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

代码

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声明,包括指定具体动画以及动画化时长等行为。

你可能感兴趣的:(前端,html5,css3)