CSS-简单动画样式-2018.07.05
2018-07-07 本文已影响0人
侯小强2018
CSS 简单动画
-
图片旋转和移动
-
插入播放器
图片旋转
animation 命令（animation：命名 时间 动画属性）
<style>
img.{
animation: tutu 5s linear infinite;
}
@keyframes tutu{
from{transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
infinite ：无线循环
linear：直线动画
transform：变换方式
rotate：旋转 totate(旋转角度) deg：角度
from to 从一个角度旋转到另一个角度
插入播放器
<video> </video>
<video src="插入一个音频"
controls=controls 表示可以控制按键
实例操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
border-radius: 150px;
animation: tutu 5s linear infinite;
width: 150px;
height: 150px;
}
@keyframes tutu{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
</style>
</head>
<body>
<img src="img/IMG_20180628_132209.jpg"/>
<br/>
<video src=" img/郭静_心墙.mp3" controls="controls"></video>
</body>
</html>
显示效果：
实际动画效果图片展示
图片是按照逆时针360度旋转的，下面的播放器
图片移动
将图片的属性设置成为在屏幕中移动，可以根据自己想要的路径和方向，还可益气设置时间。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
border-radius: 150px;
width: 150px;
height: 150px;
position: relative;
animation: tutu 10s linear infinite;
}
@keyframes tutu
{
0% {top:300px; left:0px; background:red;}
25% {top:0px; left:300px; background:blue;}
40% {top:150px; left:450px; width:300px;background:yellow;}
50% {top:300px; left:300px; background:yellow;}
75% {top:300px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
<div style="background-color: greenyellow;height: 500px;">
<img src="img/IMG_20180628_132209.jpg" />
<br/>
<video src="img/郭静_心墙.mp3" controls="controls"></video>
</div>
</body>
</html>
显示效果：
页面上的图片按照规定的路径进行移动，实现了动态移动的效果！
