这篇博客展示了一个使用HTML5和CSS3实现div元素旋转的示例。通过设置关键帧动画和变换属性，div元素能够以1秒的时间周期，线性无限次地进行360度旋转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.change{
position: absolute;
top:50%;
left: 50%;
margin: -100px 0px 0px -100px;
background-color: bisque;
width: 200px;
height: 200px;
animation:change 1s linear infinite;
}
@keyframes change{
0%{transform:rotate(0deg);}
25%{transform:rotate(90deg);}
50%{transform:rotate(180deg);}
75%{transform:rotate(270deg);}
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div class="change" ></div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.change{
position: absolute;
top:50%;
left: 50%;
margin: -100px 0px 0px -100px;
background-color: bisque;
width: 200px;
height: 200px;
animation:change 1s linear infinite;
}
@keyframes change{
0%{transform:rotate(0deg);}
25%{transform:rotate(90deg);}
50%{transform:rotate(180deg);}
75%{transform:rotate(270deg);}
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div class="change" ></div>
</body>
</html>
扫一扫
1000
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
