7.你心动了吗--动图
HTML:
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"/> 4 <title>demo02-xin</title> 5 <link type="text/css" href="E:\htmltest1\demo1\demo02.css" rel="stylesheet"> 6 </head> 7 <body> 8 <div class="xin"></div> 9 </body>
CSS:
1 *{margin:0;padding:0;} 2 3 @keyframes move{ 4 0%{transform:scale(0.2);} 5 20%{transform:scale(0.4);} 6 40%{transform:scale(0.6);} 7 60%{transform:scale(0.8);} 8 80%{transform:scale(1);} 9 100%{transform:scale(1.2);} 10 } 11 .xin{ 12 width:140px; 13 height:115px; 14 position:relative; 15 margin:100px auto; 16 animation:move 2s infinite step-end; 17 } 18 .xin::before { 19 content: ""; 20 position: absolute; 21 left: 39px; 22 top: 0; 23 width: 70px; 24 height: 115px; 25 background: red; 26 border-radius: 50px 50px 0 0; 27 transform: rotate(-45deg); 28 transform-origin: left bottombottom; 29 } 30 .xin::after { 31 content: ""; 32 position: absolute; 33 top: 0; 34 left: 71px; 35 width: 70px; 36 height: 115px; 37 background: red; 38 border-radius: 50px 50px 0 0; 39 transform: rotate(45deg); 40 transform-origin: rightright bottombottom; 41 } 42 43 44 45 /* .xin{ 46 width:280px; 47 height:250px; 48 border:1px solid #cecece; 49 margin:100px auto; 50 position:relative; 51 } 52 .xin_zuo{ 53 width:100px; 54 height:200px; 55 background-color:red; 56 border-radius:50px 50px 0 0; 57 position:absolute; 58 top:20px; 59 left:55px; 60 transform-origin:left bottombottom; 61 transform:rotate(-45deg); 62 } 63 .xin_you{ 64 width:100px; 65 height:200px; 66 background-color:red; 67 border-radius:50px 50px 0 0; 68 position:absolute; 69 top:26px; 70 left:40px; 71 transform-origin:right bottom; 72 transform:rotate(45deg); 73 } */
效果图：
