【每日一练】133—实现一个iPhone 14的动态壁纸效果

最新推荐文章于 2023-02-17 22:21:02 发布

web前端开发V

最新推荐文章于 2023-02-17 22:21:02 发布

阅读量432

点赞数

文章标签： css css3 html 前端 javascript

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649135423&idx=3&sn=ecabc6e1bf6c0f392f3200d7c2673107&chksm=be58be92892f3784249b32adcdcb751a308ae47a193309c55fdbd91abd8406d82aae59fbc28a&scene=126&sessionid=0

版权

写在前面

有次在codepen上找灵感，无意间看到这个iPhone14的壁纸很不漂亮，截图如下：

图片来源：https://codepen.io/TajShireen/pen/zYjrejN

但是，我们今天的这个练习跟上面的壁纸效果有点不一样，具体效果可以看我下面的gif截图动画：

在这个练习中，我们采用了一个背景图片，不是纯CSS代码来实现背景图片效果。

这个练习的最终实现源码如下：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>【每日一练】133—iPhone 14 的动态壁纸效果</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box">
    <div class="inner">
      <div class="island_popup">
        <div class="content">
          <div class="details">
            <div class="imgBx">
              <img src="img.jpg">
            </div>
            <p>杨小爱</p>
          </div>
          <div class="action">
            <ion-icon name="call" class="red"></ion-icon>
            <ion-icon name="call" class="green"></ion-icon>
          </div>
        </div>
      </div>
    </div>
    <i class="btn btn1"></i>
    <i class="btn btn2"></i>
    <i class="btn btn3"></i>
    <i class="rightSideBtn"></i>
  </div>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <script>
    let popup = document.querySelector('.island_popup');
    popup.onclick = function(){
      popup.classList.toggle('active')
    }
</script>
</body>
</html>

CSS代码：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #fff;
}
.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(bg.jpg);
  background-size: cover;
  background-position: center;
  border-radius: 48px;
  border: 10px solid #000;
  display: flex;
  justify-content: center;
  opacity: 0;
  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;
}
.rightSideBtn 
{
  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;
  top: 10px;
  width: 90px;
  height: 25px;
  background: #000;
  border-radius: 20px;
  transition: 0.5s ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.island_popup:hover 
{
  width: 200px;
  height: 25px;
}
.island_popup.active 
{
  width: 250px;
  height: 60px;
  border-radius: 50px;
}
.content 
{
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 10px;
  line-height: 25px;
}
.content p 
{
  color: #fff;
  font-size: 0.6em;
  cursor: default;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}
.action 
{
  position: relative;
  top: 5px;
  color: #fff;
  display: flex;
  gap: 12px;
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
}
.island_popup.active .action 
{
  top: 12px;
}
ion-icon.red 
{
  color: #fd443b;
  transform: rotate(135deg);
  cursor: pointer;
  transition: 0.5s;
}
ion-icon.green 
{
  color: #31d059;
  cursor: pointer;
  transition: 0.5s;
}
.island_popup:hover p, 
.island_popup.active p, 
.island_popup:hover .action , 
.island_popup.active .action 
{
  visibility: visible;
  opacity: 1;
  transition-delay: 0.25s;
}
.island_popup.active ion-icon.red 
{
  background: #fd443b;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #fd443b;
  margin-right: 12px;
}
.island_popup.active ion-icon.green 
{
  background: #31d059;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #31d059;
  margin-right: 8px;
}
.details 
{
  position: relative;
  display: flex;
  align-items: center;
}
.details .imgBx 
{
  position: relative;
  width: 0;
  height: 0;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  transition: 0.5s;
}
.island_popup.active .details .imgBx 
{
  width: 40px;
  height: 40px;
  margin-right: 8px;
}
.details .imgBx img 
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

写在最后

以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

推荐阅读

【每日一练】01~100练大合集汇总

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】133—实现一个iPhone 14的动态壁纸效果

写在前面有次在codepen上找灵感，无意间看到这个iPhone14的壁纸很不漂亮，截图如下：图片来源：https://codepen.io/TajShireen/pen/zYjrejN但是，我们今天的这个练习跟上面的壁纸效果有点不一样，具体效果可以看我下面的gif截图动画：在这个练习中，我们采用了一个背景图片，不是纯CSS代码来实现背景图片效果。这个练习的最终实现源码如下：HTML代码：<...
复制链接

扫一扫