自助购买VIP收藏本站将本站放到桌面
开启辅助访问 购买锦尚中国空间免费安装程序 请联系QQ278869155
源码论坛公告：本站是一个交流学习建站资源的社区论坛，旨在交流学习源码脚本等资源技术，欢迎大家投稿发言！ 【点击此处将锦尚放在桌面】

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

 找回密码
 会员注册

QQ登录

只需一步，快速开始

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛»论坛 › 网站源码(交流学习,共同进步) › 站长教程 › 动态圆点水波纹效果纯css实现
返回列表 发新帖
查看: 2030|回复: 0
打印 上一主题 下一主题

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

[复制链接]
洪七公

3102

主题

3503

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
271670
跳转到指定楼层
1#
发表于 2023-10-10 15:24:57 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式


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



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


分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

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

GMT+8, 2024-5-1 02:47 , Processed in 0.107528 second(s), 19 queries .

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

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