响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-5 CSS3 动画

发布时间：2024年01月12日

代码

<!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动画实现当鼠标指针悬停在图片上时让图片不停的旋转。

运行效果

CSS3 动画


CSS3可以创建动画，它可以取代许多网页动画图像、Flash动画和JavaScript实现的效果。
animation属性用于描述动画的CSS声明，包括指定具体动画以及动画化时长等行为。

文章来源:https://blog.csdn.net/m0_73657966/article/details/135560084
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章