CSS3 元素转圈动画 （元素旋转动画）
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body><p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p><div></div></body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>css 转圈</title><style>.turn{width:100px;height: 100px;background: aqua;animation:turn 1s linear infinite; margin: 100px auto;}/* turn : 定义的动画名称1s : 动画时间linear : 动画以何种运行轨迹完成一个周期infinite :规定动画应该无限次播放*/@keyframes turn{0%{-webkit-transform:rotate(0deg);}25%{-webkit-transform:rotate(90deg);}50%{-webkit-transform:rotate(180deg);}75%{-webkit-transform:rotate(270deg);}100%{-webkit-transform:rotate(360deg);}}</style>
</head>
<body><div class="turn"></div>
</body>
</html>分类: CSS
