源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 动态圆点水波纹效果纯css实现 [打印本页]
作者: 洪七公    时间: 2023-10-10 15:24
标题: 动态圆点水波纹效果纯css实现


老规矩先看效果(图片可能上传时候压缩了一下，画质失真，具体以代码展示的效果为准)：

(, 下载次数: 171)


这个效果使用 css 中 animation 属性，以及搭配伪元素 ::after、::before 来实现两个圆交替变化。

伪元素可以百度查看一下更多的，系统的总结我们锦尚中国会继续更新总结！

完整代码

html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <link rel="stylesheet" href="style.css?k3f22ww">
  7.   <title>03 圆点水波纹效果</title>
  8. </head>
  9. <body>
  10.   <div class="app">
  11.     <label class="dot"></label>
  12.   </div>
  13. </body>
  14. </html>
复制代码

css代码
  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4.   list-style: none;
  5.   transition: .5s;
  6. }
  7. html,body{
  8.   background-color: #f5f5f5;
  9.   color: #fff;
  10.   font-size: 14px;
  11. }
  12. .app{
  13.   width: 100%;
  14.   height: 100vh;
  15.   position: relative;
  16.   display: flex;
  17.   justify-content: center;
  18.   align-items: center;
  19. }
  20. .dot {
  21.   width: 48px;
  22.   height: 48px;
  23.   display: block;
  24.   position: relative;
  25.   border-radius: 50%;
  26.   background-color: blue;
  27.   z-index: 1;
  28. }
  29. .dot::after {
  30.   width: 100%;
  31.   height: 100%;
  32.   content: "";
  33.   border-radius: 50%;
  34.   position: absolute;
  35.   top: 0;
  36.   left: 0;
  37.   z-index: -2;
  38.   background-color: blue;
  39.   animation: dot-play 4s linear 400ms infinite;
  40. }
  41. .dot::before {
  42.   width: 100%;
  43.   height: 100%;
  44.   content: "";
  45.   border-radius: 50%;
  46.   position: absolute;
  47.   top: 0;
  48.   left: 0;
  49.   z-index: -1;
  50.   background-color: blue;
  51.   animation: dot-play 4s linear 200ms infinite;
  52.   animation-delay: 2s; /* 延迟 2s */
  53. }
  54. @keyframes dot-play{
  55.   from{
  56.     transform: scale(1);
  57.     opacity: .2;
  58.   }
  59.   to{
  60.     transform: scale(4);
  61.     opacity: 0;
  62.   }
  63. }
复制代码






欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3