css3 animation實現風車轉動

時間 2019-11-12

標籤 css3 css animation 實現風車轉動欄目 CSS 简体版

原文原文鏈接

　　項目中常常有用到動畫效果，好比Loading、風車轉動等等。最簡單的辦法是使用gif，可是gif在半透明背景下有白邊，體驗不友好，好在如今可使用css3的anmiation來實現動畫效果，極大的提高了用戶體驗。下面是風車轉動效果實現democss

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>風車 - css3動畫示例</title> <style type="text/css"> .windmill { width: 110px; height: 160px; overflow: hidden; background: url(http://115.29.225.190/fiddle/css3/windmill.png) no-repeat; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-animation: earthDay 2.5s linear infinite; animation: earthDay 2.5s linear infinite; } @keyframes earthDay { 7.99% { background-position: 0 0; } 8% { background-position: 0 -160px; } 15.99% { background-position: 0 -160px; } 16% { background-position: 0 -320px; } 23.99% { background-position: 0 -320px; } 24% { background-position: 0 -480px; } 31.99% { background-position: 0 -480px; } 32% { background-position: 0 -640px; } 39.99% { background-position: 0 -640px; } 40% { background-position: 0 -800px; } 47.99% { background-position: 0 -800px; } 48% { background-position: 0 -960px; } 55.99% { background-position: 0 -960px; } 56% { background-position: 0 -1120px; } 63.99% { background-position: 0 -1120px; } 64% { background-position: 0 -1280px; } 71.99% { background-position: 0 -1280px; } 72% { background-position: 0 -1440px; } 79.99% { background-position: 0 -1440px; } 80% { background-position: 0 -1600px; } 87.99% { background-position: 0 -1600px; } 88% { background-position: 0 -1760px; } 99.99% { background-position: 0 -1760px; } 100% { background-position: 0 -160px; } } @-webkit-keyframes earthDay { 7.99% { background-position: 0 0; } 8% { background-position: 0 -160px; } 15.99% { background-position: 0 -160px; } 16% { background-position: 0 -320px; } 23.99% { background-position: 0 -320px; } 24% { background-position: 0 -480px; } 31.99% { background-position: 0 -480px; } 32% { background-position: 0 -640px; } 39.99% { background-position: 0 -640px; } 40% { background-position: 0 -800px; } 47.99% { background-position: 0 -800px; } 48% { background-position: 0 -960px; } 55.99% { background-position: 0 -960px; } 56% { background-position: 0 -1120px; } 63.99% { background-position: 0 -1120px; } 64% { background-position: 0 -1280px; } 71.99% { background-position: 0 -1280px; } 72% { background-position: 0 -1440px; } 79.99% { background-position: 0 -1440px; } 80% { background-position: 0 -1600px; } 87.99% { background-position: 0 -1600px; } 88% { background-position: 0 -1760px; } 99.99% { background-position: 0 -1760px; } 100% { background-position: 0 -160px; } } </style> </head> <body> <div class="windmill"> </div> </body> </html> html

css3 Animation目前瀏覽器的支持狀況：css3

IE10+web

FF31+瀏覽器

Chrome31 - 42支持帶-webkit-前綴的，Chrome43+支持標準css3動畫

Safari7 - 8 支持帶-webkit-前綴的動畫

Opera28 - 29支持帶-webkit-前綴的，Opera30+支持url

iOS Safari7.1 - 8.3支持帶-webkit-前綴的3d