Here's one more continuous animation example with the animation-iteration-count property that uses the heart you designed in a previous challenge.
The one-second long heartbeat animation consists of two animated pieces.
The heart elements (including the :before and :after pieces) are animated to change size using the transform property, and the background div is animated to change its color using the background property.
練習題目：
Keep the heart beating by adding the animation-iteration-count property for both the back class and the heart class and setting the value to infinite. The heart:before and heart:after selectors do not need any animation properties.
練習代碼：
1 <style> 2 .back { 3 position: fixed; 4 padding: 0; 5 margin: 0; 6 top: 0; 7 left: 0; 8 width: 100%; 9 height: 100%; 10 background: white; 11 animation-name: backdiv; 12 animation-duration: 1s; 13 animation-iteration-count: infinite; 14 } 15 16 .heart { 17 position: absolute; 18 margin: auto; 19 top: 0; 20 right: 0; 21 bottom: 0; 22 left: 0; 23 background-color: pink; 24 height: 50px; 25 width: 50px; 26 transform: rotate(-45deg); 27 animation-name: beat; 28 animation-duration: 1s; 29 animation-iteration-count: infinite; 30 } 31 .heart:after { 32 background-color: pink; 33 content: ""; 34 border-radius: 50%; 35 position: absolute; 36 width: 50px; 37 height: 50px; 38 top: 0px; 39 left: 25px; 40 } 41 .heart:before { 42 background-color: pink; 43 content: ""; 44 border-radius: 50%; 45 position: absolute; 46 width: 50px; 47 height: 50px; 48 top: -25px; 49 left: 0px; 50 } 51 52 @keyframes backdiv { 53 50% { 54 background: #ffe6f2; 55 } 56 } 57 58 @keyframes beat { 59 0% { 60 transform: scale(1) rotate(-45deg); 61 } 62 50% { 63 transform: scale(0.6) rotate(-45deg); 64 } 65 } 66 67 </style> 68 <div ></div> 69 <div ></div>
效果：
跳動的粉心，背景顏色會更換，變大變小
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/113660.html
標籤：Html/Css
上一篇：案例
下一篇：FCC---Animate Elements at Variable Rates----一閃一閃亮晶晶，不同的閃動節奏