CSS3动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3动画</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> #myfirst { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; animation: myfirst 2s linear infinite normal; -moz-animation: myfirst 2s linear infinite normal; /* Firefox: */ -webkit-animation: myfirst 2s linear infinite normal; /* Safari and Chrome: */ -o-animation: myfirst 2s linear infinite normal; /* Opera: */ } @keyframes myfirst { 0% { transform: rotatez(0deg)} 50% { transform: rotatez(180deg)} 100% { transform: rotatez(360deg)} } @-moz-keyframes myfirst /* Firefox */ { 0% { -moz-transform: rotatez(0deg)} 50% { -moz-transform: rotatez(180deg)} 100% { -moz-transform: rotatez(360deg)} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% { -webkit-transform: rotatez(0deg)} 50% { -webkit-transform: rotatez(180deg)} 100% { -webkit-transform: rotatez(360deg)} } @-o-keyframes myfirst /* Opera */ { 0% { -o-transform: rotatez(0deg)} 50% { -o-transform: rotatez(180deg)} 100% { -o-transform: rotatez(360deg) } } </style></head><body><div id="myfirst"></div></body></html>转载于:https://www.cnblogs.com/webQdesign/p/5733189.html
