Css

星の点滅効果を実現するCSSアニメーション



Css Animation Achieve Star Blinking Effect



画像
きらめききらめききらめき、背景として使うのに最適です〜

htmlセクション



<div class='container'> <div class='star star1'></div> <div class='star star2'></div> <div class='star star3'></div> </div>

CSSセクション

body { overflow: hidden } .container { position : relative top : 0 left : 50% transform: translateX(-50%) width : 1920px height : 600px background : url(images/bg1.jpg) repeat } .star { position : absolute top : 0 left : 50% transform: translateX(-50%) width : 1920px height : 500px animation: star 2.5s ease-in infinite } .star1 { background: url(images/bg_star_1.png) no-repeat center center } .star2 { background: url(images/bg_star_2.png) no-repeat center center animation-delay: .8s } .star3 { background: url(images/bg_star_3.png) no-repeat center center animation-delay: 1.7s } @keyframes star { 10% { opacity: 0 } 90% { opacity: 1 } }

アニメーションは宝物です