代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 动画</title>
<style>
.img {
width: 150px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
img:hover {
animation: rotate 0.5s linear infinite;
}
</style>
</head>
<body>
<img src="images/fengche.png" alt="">
</body>
</html>
上述代码中:
第10行代码定义animation属性实现动画效果;
第10~17行代码定义rotate动画让图片从0%到100%顺时针旋转360度;
第18~20行代码通过animation动画实现当鼠标指针悬停在图片上时让图片不停的旋转。文章来源:https://www.toymoban.com/news/detail-785884.html
运行效果
CSS3 动画文章来源地址https://www.toymoban.com/news/detail-785884.html
CSS3可以创建动画,它可以取代许多网页动画图像、Flash动画和JavaScript实现的效果。
animation属性用于描述动画的CSS声明,包括指定具体动画以及动画化时长等行为。
到了这里,关于响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例3-5 CSS3 动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!