120行純css程式碼製作沙漏小動畫
阿新 • • 發佈：2019-02-08
沙漏小動畫是由120行純css程式碼寫出來的，中間的沙掉落是不是和真的很像呢，全程效果不新增任何javascript程式碼。
沙漏原始碼：
<!doctype html> <html lang="en"> <head> <!--網站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼--> <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <title>Document</title> <!--css js 檔案的引入--> <style> html { box-sizing: border-box; font-family: "Lato, sans-serif"; } *, *:before, *:after { box-sizing: inherit; } html { width: 100%; height: 100%; font-size: 62.5%; font-family: 'Lato', sans-serif; color: #4d4d4d; } body { width: 100%; height: 100%; font-size: 1.6em; } .wrapper { font-size: 1.6rem; background: #dad8d2; width: 100%; height: 100%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .visuallyhidden { border: 0; clip: rect(00 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .clearfix:before, .clearfix:after { content: ' '; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } html, body { width: 100%; background: #dad8d2; } .hourglass { display: block; background: #dad8d2; margin: 3emauto; width: 2em; height: 4em; box-shadow: inset#dad8d2 0 0 0 0,inset #00b7c60 2em 0 0, inset#dad8d2 0 0 4em 0; -webkit-animation: hourglass 1s linear infinite; animation: hourglass 1s linear infinite; } .outer { fill: #00b7c6; } .middle { fill: #dad8d2; } @-webkit-keyframes hourglass { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); box-shadow: inset#dad8d2 0 0 0 0,inset #00b7c60 2em 0 0, inset#dad8d2 0 4em 0 0,inset #00b7c60 4em 0 0; } 80% { -webkit-transform: rotate(0deg); transform: rotate(0deg); box-shadow: inset#dad8d2 0 2em 0 0,inset #00b7c60 2em 0 0, inset#dad8d2 0 2em 0 0,inset #00b7c60 4em 0 0; } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); box-shadow: inset#dad8d2 0 2em 0 0,inset #00b7c60 2em 0 0, inset#dad8d2 0 2em 0 0,inset #00b7c60 4em 0 0; } } @keyframes hourglass { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); box-shadow: inset#dad8d2 0 0 0 0,inset #00b7c60 2em 0 0, inset#dad8d2 0 4em 0 0,inset #00b7c60 4em 0 0; } 80% { -webkit-transform: rotate(0deg); transform: rotate(0deg); box-shadow: inset#dad8d2 0 2em 0 0,inset #00b7c60 2em 0 0, inset#dad8d2 0 2em 0 0,inset #00b7c60 4em 0 0; } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); box-shadow: inset#dad8d2 0 2em 0 0,inset #00b7c60 2em 0 0, inset#dad8d2 0 2em 0 0,inset #00b7c60 4em 0 0; } } </style> </head> <body> <div class="demo"> <link href='//fonts.googleapis.com/css?family=Lato:900,400'rel='stylesheet'type='text/css'> <div class="wrapper"> <svg class="hourglass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 206" preserveAspectRatio="none"> <path class="middle" d="M120 0H0v206h120V0zM77.1 133.2C87.5 140.9 92 145 92 152.6V178H28v-25.4c0-7.6 4.5-11.7 14.9-19.4 6-4.5 13-9.6 17.1-17 4.1 7.4 11.1 12.6 17.1 17zM60 89.7c-4.1-7.3-11.1-12.5-17.1-17C32.5 65.1 28 61 28 53.4V28h64v25.4c0 7.6-4.5 11.7-14.9 19.4-6 4.4-13 9.6-17.1 16.9z"/> <path class="outer" d="M93.7 95.3c10.5-7.7 26.3-19.4 26.3-41.9V0H0v53.4c0 22.5 15.8 34.2 26.3 41.9 3 2.2 7.9 5.8 9 7.7-1.1 1.9-6 5.5-9 7.7C15.8 118.4 0 130.1 0 152.6V206h120v-53.4c0-22.5-15.8-34.2-26.3-41.9-3-2.2-7.9-5.8-9-7.7 1.1-2 6-5.5 9-7.7zM70.6 103c0 18 35.4 21.8 35.4 49.6V192H14v-39.4c0-27.9 35.4-31.6 35.4-49.6S14 81.2 14 53.4V14h92v39.4C106 81.2 70.6 85 70.6 103z"/> </svg> </div> </body> </html>
web前端學習群：575308719，分享原始碼、視訊、企業級案例、最新知識點，歡迎初學者和在進階中的小夥伴。
關注公眾號→‘學習web前端’跟大佬一起學前端！