css3可以定义样式变化的动画
是一个非常强大的功能
我们哪一个实例说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.yicminimg{
width: 20em;
height: 20em;
border-radius: 50%;
margin:calc(50vh - 10em) auto 0 auto;
display: block;
-webkit-animation: play 10s linear infinite;
-moz-animation: play 10s linear infinite;
animation: play 10s linear infinite;
}
@-webkit-keyframes play{
0%{-webkit-transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
@-moz-keyframes play {
0%{-moz-transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
@keyframes play{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
</style>
</head>
<body>
<img class = "yicminimg" src = "./images/landscape.jpg"/>
</body>
</html>
./images/landscape.jpg 是一张这样的图片
然后我们就会发现图片在页面中间一直旋转
首先
@keyframes play{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
这段代码的意思是 定义一个动画 名称叫play
然后动画 一开始 旋转0度 完成时 旋转360度
@-webkit-keyframes和@-moz-keyframes写上去是为了浏览器兼容
animation的配置分别代表三个属性
animation: play 10s linear infinite;是一种简写
可以分为
animation-name: play;
调用一个名称为play的动画效果
animation-duration: 10s;
动画一次执行十秒 十秒完成整个动画效果
animation-timing-function: linear;
从头到尾以平滑的速度执行动画
animation-iteration-count: infinite;
循环执行动画 无限次
这个可能有的不具体
animation-iteration-count 代表动画会执行多少次
例如animation-iteration-count:1;
infinite代表无限次
-webkit- 和 -moz-也是在兼容浏览器语法