【每日一练】79—CSS实现扫描二维码动画

最新推荐文章于 2024-04-17 14:18:53 发布

web前端开发V

最新推荐文章于 2024-04-17 14:18:53 发布

阅读量809

点赞数

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649132955&idx=2&sn=1fff5d20f1772671a8e02be8e65c32fc&chksm=be58a836892f21209431feb6feea959db1746451e369d0610a280ba8c06c6bb3bd08ee737f4f&scene=126&&sessionid=0

版权

二维码的应用越来越普通，加个好友，付个款，做个核酸，想去一个地方，还要扫个场所码，总之，需要二维码的地方越来越多。

因此，在这样的大环境里，如何让你的码与众不同，引人注意，就显得非常重要。今天我们就来练习一个二维码的动画效果，具体效果如下：

看完了最终效果，我们再来看看代码实现过程。

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>【每日一练】79—CSS实现扫描二维码动画</title>
</head>
<body>
  <div class="scan">
    <div class="qrcode"></div>
    <h3>二维码扫描中...</h3>
    <div class="border"></div>
  </div>
</body>
</html>

CSS代码：

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: consolas;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #111;
}
.scan 
{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scan .qrcode 
{
  position: relative;
  width: 400px;
  height: 400px;
  background: url(QR_Code01.png);
  background-size: 400px;
}
.scan .qrcode::before 
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(QR_Code02.png);
  background-size: 400px;
  overflow: hidden;
  animation: animate 4s ease-in-out infinite;
}
@keyframes animate 
{
  0%,100%
  {
    height: 20px;
  }
  50%
  {
    height: calc(100% - 20px);
  }
}
.scan .qrcode::after 
{
  content: '';
  position: absolute;
  inset: 20px;
  width: calc(100% - 40px);
  height: 2px;
  background: #35fd5c;
  filter: drop-shadow(0 0 20px #35fd5c) drop-shadow(0 0 60px #35fd5c);
  animation: animate_line 4s ease-in-out infinite;
} 
@keyframes animate_line 
{  
  0%,100%
  {
    top: 20px;
  }
  50%
  {
    top: calc(100% - 20px);
  }
}
.border 
{
  position: absolute;
  inset: 0px;
  background: url(border.png);
  background-size: 400px;
  background-repeat: no-repeat;
  animation: animate_text 0.5s linear infinite;
}
@keyframes animate_text 
{  
  0%,100%
  {
    opacity: 0;
  }
  50%
  {
    opacity: 1;
  }
}
.scan h3 
{
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 2px;
  margin-top: 20px;
  color: #fff;  filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 60px #fff);
  animation: animate_text 0.5s steps(1) infinite;
}

写在最后

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

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

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】79—CSS实现扫描二维码动画

二维码的应用越来越普通，加个好友，付个款，做个核酸，想去一个地方，还要扫个场所码，总之，需要二维码的地方越来越多。因此，在这样的大环境里，如何让你的码与众不同，引人注意，就显得非常重要。今天我们就来练习一个二维码的动画效果，具体效果如下：看完了最终效果，我们再来看看代码实现过程。HTML代码：<!DOCTYPE html><html><head><t...
复制链接

扫一扫