css呼吸灯效果

html

1  <body>
2     <div class="breathe-btn" onclick="alert('别点我!')">呼吸...</div>
3   </body>

css

 1    body,
 2       div,
 3       dl,
 4       dt,
 5       dd,
 6       ul,
 7       ol,
 8       li,
 9       h1,
10       h2,
11       h3,
12       h4,
13       h5,
14       h6,
15       form,
16       input,
17       textarea,
18       p,
19       th,
20       td,
21       menu {
22         margin: 0;
23         padding: 0;
24       }
25       body {
26         font-size: 12px;
27         -webkit-text-size-adjust: none;
28         font-family: Arial, Helvetica, sans-serif;
29       }
30       img {
31         border: none;
32       }
33       ol,
34       ul {
35         list-style: none;
36       }
37       em {
38         font-style: normal;
39       }
40       a {
41         text-decoration: none;
42       }
43       .clearfix {
44         #zoom: 1;
45       }
46       .clearfix:after {
47         content: " ";
48         display: block;
49         height: 0;
50         clear: both;
51         /* color: #fff; */
52       }
53       body {
54         background: #333;
55       }
56       .breathe-btn {
57         position: relative;
58         width: 100px;
59         height: 100px;
60         margin: 40px auto;
61         line-height: 40px;
62         border: 1px solid rgb(192, 141, 150);
63         border-radius: 50%;
64         color: rgb(255, 208, 208);
65         font-size: 20px;
66         text-align: center;
67         cursor: pointer;
68         box-shadow: 0 1px 2px rgba(255, 240, 240, 0.3);
69         overflow: hidden;
70         background-image: -webkit-gradient(
71           linear,
72           left top,
73           left bottom,
74           from(rgb(148, 237, 253)),
75           to(rgb(0, 174, 255))
76         );
77         -webkit-animation-timing-function: ease-in-out;
78         -webkit-animation-name: breathe;
79         -webkit-animation-duration: 2700ms;
80         -webkit-animation-iteration-count: infinite;
81         -webkit-animation-direction: alternate;
82       }
83       @-webkit-keyframes breathe {
84         0% {
85           opacity: 0.2;
86           box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
87         }
88         100% {
89           opacity: 1;
90           border: 1px solid rgb(77, 200, 248);
91           box-shadow: 0 2px 30px rgb(82, 133, 243);
92         }
93       }

 

posted @ 2020-10-23 09:55  俩只猫  阅读(832)  评论(0)  编辑  收藏  举报