body {
background: #222
}
figure {
position: absolute
margin: auto
top: 0
bottom: 0
left: 0
right: 0
width: 6.250em
height: 6.250em
animation: rotate 2.4s linear infinite
}
.white {
top: 0
bottom: 0
left: 0
right: 0
background: white
animation: flash 2.4s linear infinite
opacity: 0
}
.dot {
position: absolute
margin: auto
width: 2.4em
height: 2.4em
border-radius: 100%
transition: all 1s ease
}
.dot:nth-child(2) {
top: 0
bottom: 0
left: 0
background: #FF4444
animation: dotsY 2.4s linear infinite
}
.dot:nth-child(3) {
left: 0
right: 0
top: 0
background: #FFBB33
animation: dotsX 2.4s linear infinite
}
.dot:nth-child(4) {
top: 0
bottom: 0
right: 0
background: #99CC00
animation: dotsY 2.4s linear infinite
}
.dot:nth-child(5) {
left: 0
right: 0
bottom: 0
background: #33B5E5
animation: dotsX 2.4s linear infinite
}
@keyframes rotate {
0% {
transform: rotate( 0 )
}
10% {
width: 6.250em
height: 6.250em
}
66% {
width: 2.4em
height: 2.4em
}
100% {
transform: rotate(360deg)
width: 6.250em
height: 6.250em
}
} @keyframes dotsY {
66% {
opacity: .1
width: 2.4em
}
77% {
opacity: 1
width: 0
}
}
@keyframes dotsX {
66% {
opacity: .1
height: 2.4em
}
77% {
opacity: 1
height: 0
}
} @keyframes flash {
33% {
opacity: 0
border-radius: 0%
}
55% {
opacity: .6
border-radius: 100%
}
66% {
opacity: 0
}
}
用css做一个呼吸效果，然后让想闪烁的元素调用：
比如，我的div想呼吸
div.breatheDiv{height:500px
width:500px
background-color: #FF94A6
border-radius: 100%
webkit-animation: breathe 2000ms ease infinite
-moz-animation: breathe 2000ms ease infinite
-o-animation: breathe 2000ms ease infinite
animation: breathe 2000ms ease infinite
}
@-webkit-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@-moz-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@-o-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
