标签：head hsi title 练习 order mat latex anim utf-8
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .main { 8 position: absolute; 9 width:300px; 10 height:500px; 11 background-color: fuchsia; 12 } 13 14 .content{ 15 position:absolute; 16 width:50px; 17 height:50px; 18 background-color: red; 19 animation: one 6s infinite; 20 /*transition: two 3s ease 0s;*/ 21 } 22 23 .content1{ 24 position:absolute; 25 width:50px; 26 height:50px; 27 background-color: yellow; 28 border-radius: 50px; 29 animation: two 3s ease 0s infinite; 30 } 31 32 .content2{ 33 position:absolute; 34 width:50px; 35 height:50px; 36 background-color: dodgerblue; 37 /*animation: three 3s ease 0s infinite;*/ 38 transition:all 2s; 39 transition-delay:5s; 40 41 /*transition-duration: 2s, 4s;*/ 42 } 43 44 .content2:hover{ 45 height:300px; 46 width:200px; 47 transform: translateX(100px) translateY(100px) scale(0.8) rotate(360deg); 48 } 49 50 @keyframes one { 51 0% { 52 transform: rotate(0deg) ; 53 left:0px; 54 } 55 20%{ 56 transform: rotate(50deg); 57 left:50px; 58 top:100px 59 } 60 60%{ 61 transform: rotate(180deg); 62 left:150px; 63 top:150px 64 } 65 100%{ 66 transform: rotate(360deg); 67 left:230px; 68 } 69 } 70 71 @keyframes two { 72 0% { 73 transform: rotate(0deg) ; 74 left:0px; 75 width:100px; 76 } 77 20%{ 78 transform: rotate(50deg); 79 left:50px; 80 top:250px; 81 width:120px; 82 } 83 84 60%{ 85 transform: rotate(180deg); 86 left:150px; 87 top:400px; 88 width:190px; 89 } 90 100%{ 91 transform: rotate(360deg); 92 left:250px; 93 width:300px; 94 } 95 } 96 97 @keyframes three { 98 0% { 99 transform: rotate(0deg) ; 100 left:0px; 101 } 102 20%{ 103 transform: rotate(50deg); 104 left:50px; 105 top:250px 106 } 107 108 60%{ 109 transform: rotate(180deg); 110 left:150px; 111 top:400px 112 } 113 100%{ 114 transform: rotate(360deg); 115 left:250px; 116 } 117 } 118 </style> 119 120 121 </head> 122 <body> 123 124 125 <div class="main"> 126 <div class="content"></div> 127 <div class="content1"></div> 128 <div class="content2"></div> 129 </div> 130 </body> 131 </html>
animation,transition,transform小练习
标签：head hsi title 练习 order mat latex anim utf-8
原文地址：https://www.cnblogs.com/yinhao-jack/p/11746170.html
