<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS3实现会呼吸的灯</title> <style type="text/css"> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td { margin: 0; padding: 0; } body { background: #333; } .circle { position: relative; margin: 100px auto; width: 120px; height: 120px; line-height: 40px; border: 1px solid #FFC0CB; border-radius: 5px; color: #fff; font-size: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); background-image: -webkit-gradient(linear, left top, left bottom, from(#FFC0CB), to(#FF69B4)); background-image: -moz-linear-gradient(#FFC0CB, #FF69B4); animation: ease-in-out breath 2500ms infinite alternate; -webkit-animation: ease-in-out breath 2500ms infinite alternate; cursor: pointer; } @keyframes breath { 0% { opacity: .2; box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1); } 100% { opacity: 1; border: 1px solid rgba(255, 192, 203, 1); box-shadow: 0 1px 30px rgba(255, 192, 203, 1); } } @-webkit-keyframes breath { 0% { opacity: .2; box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1); } 100% { opacity: 1; border: 1px solid rgba(255, 192, 203, 1); box-shadow: 0 1px 30px rgba(255, 192, 203, 1); } } </style> </head> <body> <div class="circle"></div> </body> </html>