html 呼吸燈效果,CSS3實作呼吸燈效果

margin: 0;

padding: 0

}

body {

font-size: 12px;

-webkit-text-size-adjust: none;

font-family: Arial,Helvetica,sans-serif

}

img {

border: 0

}

ol,ul {

list-style: none

}

em {

font-style: normal

}

a {

text-decoration: none

}

.clearfix {

#zoom: 1

}

.clearfix:after {

content: ' ';

display: block;

height: 0;

clear: both;

color: #fff

}

body {

background: #333

}

.breathe-btn {

position: relative;

width: 500px;

height: 400px;

margin: 40px auto;

line-height: 40px;

border: 1px solid #2b92d4;

border-radius: 5px;

color: #fff;

font-size: 20px;

text-align: center;

cursor: pointer;

box-shadow: 0 1px 2px rgba(0,0,0,.3);

overflow: hidden;

background-image: -webkit-gradient(linear,left top,left bottom,from(#6cc3fe),to(#21a1d0));

-webkit-animation-timing-function: ease-in-out;

-webkit-animation-name: breathe;

-webkit-animation-duration: 2700ms;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: alternate

}

@-webkit-keyframes breathe {

0% {

opacity: .2;

box-shadow: 0 1px 2px rgba(255,255,255,0.1)

}

100% {

opacity: 1;

border: 1px solid rgba(59,235,235,1);

box-shadow: 0 1px 30px rgba(59,255,255,1)

}

}