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 }