css模拟吸顶灯效果

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

posted @ 2022-12-06 15:05  维维WW  阅读(137)  评论(0)    收藏  举报