CSS3 水波纹
css3 动画设置水波纹，效果如下图：
源码：
<!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>test</title> </head> <style type="text/css"> .dot-box{height:40px;width:40px;border-radius:100%;position:relative;margin:40px;} .dot-box:hover{cursor:pointer;} .dot1 {animation: keyframes-dot1 1.5s cubic-bezier(.17,.67,.18,.41); } .dot2 {animation: keyframes-dot2 1.5s cubic-bezier(.17,.67,.18,.41);//贝塞尔曲线生成网站：http://cubic-bezier.com/ } .dot3 {animation: keyframes-dot3 1.5s cubic-bezier(.17,.67,.18,.41); } .dot1,.dot2,.dot3{height: 40px;width: 40px;background: rgba(249,58,28, 1);color: white;line-height: 40px;text-align: center;border-radius: 100%;animation-iteration-count:infinite; } @keyframes keyframes-dot1 {0% {box-shadow: 0 0 0 0px rgba(238,67,40, 0.7);}100% {box-shadow: 0 0 0 30px rgba(238,67,40, 0);} } @keyframes keyframes-dot2 {0% {box-shadow: 0 0 0 0px rgba(238,67,40, 0.8);}100% {box-shadow: 0 0 0 20px rgba(238,67,40, 0);} } @keyframes keyframes-dot3 {0% {box-shadow: 0 0 0 0px rgba(238,67,40, 0.9);}100% {box-shadow: 0 0 0 10px rgba(238,67,40, 0);} }</style> <body><div class="dot-box"><div class="dot1"><div class="dot2"><div class="dot3">扬州</div></div></div></div> </body> </html>
转载于:https://www.cnblogs.com/xmqa/p/8795993.html
总结
- 上一篇： System.Data.SqlClien
- 下一篇： bs4 CSS选择器