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 } }

אנימציה היא אוצר