有句话叫,没吃过猪肉难道还没见过猪跑吗?iphone 14除了灵动岛比较新颖,其他的因素也不是咱们想用它的原因;那我们用代码来看看灵动岛是怎么实现的吧,从此之后麻麻再也不用担心我没见过世面了;
1、展示效果
2、代码分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #ffffff;
}
.box {
position: relative;
width: 300px;
height: 600px;
background: #666;
border-radius: 50px;
}
.box::before {
content: '';
position: absolute;
inset: 3px;
background: #000;
border-radius: 48px;
}
.inner {
position: absolute;
inset: 3px;
background: url('https://cdn.ytechb.com/wp-content/uploads/2022/09/iPhone-14-Pro-Wallpaper-purple.webp');
background-size: cover;
background-position: center;
border-radius: 48px;
border: 10px solid #000;
display: flex;
justify-content: center;
opacity: 1;
transition: 0.5s;
}
.box:hover .inner {
opacity: 1;
}
.btn {
position: absolute;
top: 110px;
left: -2px;
width: 3px;
height: 26px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: radial-gradient(#ccc, #666, #222);
z-index: 10;
}
.btn.btn2 {
top: 160px;
height: 40px;
}
.btn.btn3 {
top: 220px;
height: 40px;
}
.rightSlideBtn {
position: absolute;
top: 170px;
right: -2px;
width: 3px;
height: 70px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: radial-gradient(#ccc, #666, #222);
z-index: 10;
}
.island-popup {
position: absolute;
width: 90px;
height: 25px;
top: 10px;
background: #000;
border-radius: 20px;
transition: 0.5s ease-in-out;
}
.island-popup:hover {
width: 200px;
height: 25px;
}
.island-popup.active {
width: 250px;
height: 60px;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<div class="island-popup">
<div class="content">
<div class="details">
<div class="imgBx">
<img src="" alt="">
</div>
<p>this is</p>
</div>
<div class="action">
</div>
</div>
</div>
</div>
<i class="btn btn1"></i>
<i class="btn btn2"></i>
<i class="btn btn3"></i>
<i class="rightSlideBtn"></i>
</div>
<script>
let popup = document.querySelector('.island-popup')
popup.onclick = function () {
popup.classList.toggle('active')
}
</script>
</body>
</html>