css3水波纹效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" > <title>Document</title> </head> <style type= "text/css" > .dot { animation: sploosh 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .dot2 { animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .dot3 { animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .dot,.dot2,.dot3{ height: 100px; width: 100px; font-size: 20px; color: #fff; line-height: 100px; text-align: center; border-radius: 100%; position: absolute; z-index: 10; animation-iteration-count:infinite; background: transparent; } @keyframes sploosh { 0% { box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7); background: rgba(255, 220, 1, 0.7); } 100% { box-shadow: 0 0 0 30px rgba(255, 220, 1, 0); background: rgba(255, 220, 1, 0); } } @keyframes sploosh2 { 0% { box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7); background: rgba(255, 220, 1, 0.7); } 100% { box-shadow: 0 0 0 20px rgba(255, 220, 1, 0); background: rgba(255, 220, 1, 0.3); } } @keyframes sploosh3 { 0% { box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7); background: rgba(255, 220, 1, 0.7); } 100% { box-shadow: 0 0 0 10px rgba(255, 220, 1, 0); background: rgba(255, 220, 1, 1); } } </style> <body> <div style= "height:100px;width:100px;border-radius:100%;position: relative;margin:200px auto; " > <div class = "dot" > <div class = "dot2" > <div class = "dot3" >每日签到</div> </div> </div> </div> </body> </html> |
效果图:
学习是一个不断抄袭和重复的过程.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 如何打造一个高并发系统?