一闪一闪亮晶晶满天星是小星星,我相信如果你会了如下的css3动画效果那个满天星就会很好制作了,当然还能制作五星好评时闪闪发光的效果。
用纯css3 animation 属性
animation : name duration timing-function delay iteration-count direction fill-mode play-state
<!DOCTYPE HTML> <html> <head> <title>纯CSS3实现闪闪发光的动画</title> <style> body{ background-color:#000000; } /*0%开始,100%结束*/ @keyframes scale{ 0%{transform:scale(1)} 50%,75%{transform:scale(3)} 78%,100%{opacity:0} } .item1 { position: absolute; width: 14px; height: 14px; background-color: #FFFF00; border-radius: 50%; margin: 100px 100px 50px 200px; } .item1:before { content: ''; display:block; width: 14px; height: 14px; border-radius: 50%; opacity: .7; background-color: #FFFF00; animation: scale 2s infinite cubic-bezier(0,0,.49,1.02); animation-delay: 200ms; } .item2 { position: absolute; width: 14px; height: 14px; border-radius: 50%; background-color: #5BFF4A; margin: 100px 100px 50px 300px; } .item2:before { content: ''; display:block; width: 14px; height: 14px; border-radius: 50%; background-color: #5BFF4A; opacity: .7; animation: scale 2s infinite cubic-bezier(0,0,.49,1.02); animation-delay: 100ms; } .item3 { position: absolute; width: 14px; height: 14px; border-radius: 50%; background-color: #FF66CC; margin: 180px 100px 50px 200px; } .item3:before { content: ''; display:block; width: 14px; height: 14px; border-radius: 50%; background-color: #FF66CC; opacity: .7; animation: scale 2s infinite cubic-bezier(0,0,.49,1.02); animation-delay: 400ms; } .item4 { position: absolute; width: 14px; height: 14px; border-radius: 50%; background-color: #FF0033; margin: 180px 100px 50px 300px; } .item4:before { content: ''; display:block; width: 14px; height: 14px; border-radius: 50%; background-color: #FF0033; opacity: .7; animation: scale 2s infinite cubic-bezier(0,0,.49,1.02); animation-delay: 300ms; } </style> </head> <body> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> <div class="item4"></div> </body> </html>