css3 画心
1 .box{ 2 width:200px; 3 height:200px; 4 margin:50px auto; 5 animation:size 1s infinite; 6 animation-direction:alternate; 7 transition:1s all; 8 } 9 .round1{ 10 width:100px; 11 height:100px; 12 border-radius:50%; 13 background-color:red; 14 float:left; 15 position:absolute; 16 } 17 .round2{ 18 width:100px; 19 height:100px; 20 border-radius:50%; 21 background-color:red; 22 float:left; 23 position:absolute; 24 margin-left:80px; 25 } 26 .rec{ 27 width:100px; 28 height:100px; 29 background-color:red; 30 float:left; 31 position:absolute; 32 margin-top:40px; 33 margin-left:40px; 34 transform:rotateZ(45deg); 35 } 36 @keyframes size{ 37 0%{ 38 transform:scale(0.6); 39 } 40 100%{ 41 transform:scale(1); 42 } 43 } 44 45 46 <div class="box"> 47 <div class="round1"></div> 48 <div class="round2"></div> 49 <div class="rec"></div> 50 </div>
效果图: