源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 346|回复: 0

[CSS/Html] 动态圆点水波纹效果纯css实现

[复制链接]

3084

主题

3480

帖子

12万

金币

超级版主

Rank: 8Rank: 8

积分
251648
发表于 2023-10-10 15:24:57 | 显示全部楼层 |阅读模式


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

45744b45574003336624055448728295c42442.gif


这个效果使用 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. }
复制代码


您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2023-11-30 22:01 , Processed in 0.174811 second(s), 29 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明