使用css制作动画
第一步打开sublime
点击file（文件）
选中New File（新建文件）
第二步
ctrl+s保存后缀名为.html
第三步
创建初始代码并保存（详细解释后方有）
第四步
写出一个div盒子
并且给出css属性
宽100个像素值
高100个像素值
背景颜色红
.box{
width: 100px;
height: 100px;
background-color: red;
}
第五步
制作css动画
使用animation函数
.box:hover{
animation: icon infinite;
animation-duration: 5s;
}
其中icon为创建的名字
infinite是执行的次数 infinite便是循环执行
@keyframes icon{
0%{margin-left: 0px;}
100%{margin-left: 100px;}
}
@keyframes是调用
调用后面的icon 也就是上方命名好了的
{}是方法
0%{}
100%{}
是指从开始0到结束100
中间还可以是10 20 30等等；
margin-left是左外边距
css动画到这里就结束了
采用的是一个盒子依靠左外边距移动位置
代码整合如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是网页</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
}
.box:hover{
animation: icon infinite;
animation-duration: 5s;
}
@keyframes icon{
0%{margin-left: 0px;}
100%{margin-left: 100px;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
往后面教程将更加详细带解释
因为目前很多小伙伴都是入门
讲的太深入反而不好
双鱼站的小鱼儿
