In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes rules.
You can achieve the same goal by manipulating the animation-duration of multiple elements.
In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop.
To make them twinkle at different rates, you can set the animation-duration property to different values for each element.
练习题目：
In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes rules.
You can achieve the same goal by manipulating the animation-duration of multiple elements.
In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the animation-duration property to different values for each element.
练习代码：
1 <style> 2 .stars { 3 background-color: white; 4 height: 30px; 5 width: 30px; 6 border-radius: 50%; 7 animation-iteration-count: infinite; 8 } 9 10 .star-1 { 11 margin-top: 15%; 12 margin-left: 60%; 13 animation-duration: 1s; 14 animation-name: twinkle; 15 } 16 17 .star-2 { 18 margin-top: 25%; 19 margin-left: 25%; 20 animation-duration: 0.9s; 21 animation-name: twinkle; 22 } 23 24 .star-3 { 25 margin-top: 10%; 26 margin-left: 50%; 27 animation-duration: 1.1s; 28 animation-name: twinkle; 29 } 30 31 @keyframes twinkle { 32 20% { 33 transform: scale(0.5); 34 opacity: 0.5; 35 } 36 } 37 38 #back { 39 position: fixed; 40 padding: 0; 41 margin: 0; 42 top: 0; 43 left: 0; 44 width: 100%; 45 height: 100%; 46 background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6); 47 } 48 </style> 49 50 <div id="back"></div> 51 <div class="star-1 stars"></div> 52 <div class="star-2 stars"></div> 53 <div class="star-3 stars"></div>
效果如下：
