本文介绍了一个使用CSS实现的简单动画案例，该动画通过关键帧定义了元素从初始状态到结束状态的变化过程，并设置了无限循环播放。文章还提到了浏览器兼容性问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@-webkit-keyframes lll {
0%{
-webkit-transform: rotate3d(180,180,180,90deg);
-moz-transform: rotate3d(180,180,180,90deg);
-o-transform: rotate3d(180,180,180,90deg);
}
100%{
-webkit-transform: rotate3d(80,80,80,135deg);
-moz-transform: rotate3d(80,80,80,135deg);
-o-transform: rotate3d(80,80,80,135deg);
}
}
#hello{
width: 300px;
height: 400px;
background-color: #646464;
-webkit-transition: all 3s linear;
-moz-transition: all 3s linear;
-o-transition: all 3s linear;
}
#hello{
-webkit-animation-name:lll;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
background-color: green;
}
</style>
</head>
<body>
<div id="hello"></div>
记得兼容性问题
</body>
</html>
扫一扫
2767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
