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>

 

效果图：

转载于:https://www.cnblogs.com/hermitks/p/10980550.html