CSS3 控制图片默认360旋转
一、复合属性：animation: rotateImage 10s linear infinite;
- animation-name：规定需要绑定到选择器的keyframe名称，例子中：rotateImage
- animation-duration：规定完成动画所花费的时间，以秒或毫秒计，例子中：10s
- animation-timing-function：规定动画的速度曲线。有以下值：
-- linear：动画从头到尾的速度是相同的
-- ease：默认。动画以低速开始，然后加快，在结束前变慢
-- ease-in：动画以低速开始
-- ease-out：动画以低速结束
-- ease-in-out：动画以低速开始和结束
- animation-delay：规定动画开始之前的延迟，可选，
- animation-iteration-count：规定动画应该播放的次数。
-- n：定义动画播放次数的数值
-- infinite：规定动画应该无限次播放，例子中设置
- animation-direction：规定是否应该轮流反向播放动画
二、@keyframes关键桢的定义与用法
创建：通过@keyframes规则，能够创建动画。
原理：将一套css样式逐渐变化为另一套样式。
语法：@keyframes animationname {keyframes-selector{css-styles;}}
- animationname： 必需。定义动画的名称。
- keyframes-selector ：必需。动画时长的百分比。以下为合法的值：
-- 0-100%
-- from：与0%相同
-- to：与100%相同
- css-styles：必需。一个或多个合法的CSS样式属性
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100vw;
height: 100vh;
background-color: #000;
}
.mbg{
width: 40px;
height: 40px;
background-image: url("./images/mbg.png");
background-size: 100%;
position: absolute;
top: 16px;
left: 16px;
animation: move 1s linear infinite;
}
@keyframes move{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="mbg"></div>
</body>
</html>预览：
还没有留言，还不快点抢沙发？