css3吸顶灯效果,代码如下
1 <div class="breathe-btn "></div> 2 <style> 3 body { 4 background:#333; 5 } 6 .breathe-btn { 7 position:relative; 8 width:100px; 9 height:10px; 10 margin:40px auto; 11 line-height:40px; 12 border:2px solid #FF6178; 13 border-radius:5px; 14 box-shadow:0 1px 2px rgba(0,0,0,.3); 15 overflow:hidden; 16 background: #FF6178; 17 -webkit-animation-timing-function:ease-in-out; 18 -webkit-animation-name: breathe; 19 -webkit-animation-duration:2700ms; 20 -webkit-animation-iteration-count:infinite; 21 -webkit-animation-direction:alternate; 22 } 23 @-webkit-keyframes breathe { 24 0% { 25 opacity:.2; //如果要做边框的闪烁效果,把这个注释掉就好了 26 box-shadow:0 1px 2px rgba(255, 97, 120, .1); 27 } 28 100% { 29 opacity:1; 30 border:2px solid rgba(255, 97, 120, 1); 31 box-shadow:0 1px 10px rgba(255, 97, 120, 1); 32 } 33 } 34 </style>
参考文档:https://www.jq22.com/webqd1732
标签:rgba,2px,120,1px,animation,css,吸顶灯,webkit,模拟 From: https://www.cnblogs.com/tanweiwei/p/16955332.html