CSS3 铰链效果
这世界上根本不存在“不会做”这回事，当你失去了所有的依靠的时候，自然什么都会了。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-铰链-效果</title> 6 <style> 7 body{ 8 width: 100%; 9 height: 100%; 10 overflow: hidden; 11 position: absolute; 12 left: 0; 13 background-color: #000; 14 } 15 .element{ 16 17 color: #f35626; 18 margin: -24px auto auto auto; 19 position: absolute; 20 top: 50%; 21 left: 50%; 22 background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a); 23 -webkit-background-clip: text; 24 -webkit-text-fill-color: transparent; 25 -webkit-animation: hue 60s infinite linear; 26 margin-bottom: 1.5rem; 27 font-size: 3rem; 28 font-weight: 100; 29 line-height: 1; 30 letter-spacing: -.05em; 31 } 32 .animated { 33 -webkit-animation-duration: 3s; 34 animation-duration: 3s; 35 -webkit-animation-fill-mode: both; 36 animation-fill-mode: both; 37 } 38 @keyframes hinge { 39 0% { 40 transform-origin: top left; 41 animation-timing-function: ease-in-out; 42 } 43 44 20%, 60% { 45 transform: rotate3d(0, 0, 1, 80deg); 46 transform-origin: top left; 47 animation-timing-function: ease-in-out; 48 } 49 50 40%, 80% { 51 transform: rotate3d(0, 0, 1, 60deg); 52 transform-origin: top left; 53 animation-timing-function: ease-in-out; 54 opacity: 1; 55 } 56 57 to { 58 transform: translate3d(0, 700px, 0); 59 opacity: 0; 60 } 61 } 62 63 .hinge { 64 animation-name: hinge; 65 } 66 </style> 67 </head> 68 <body> 69 <div class="element animated hinge">hinge</div> 70 </body> 71 </html>
