css 圆形背景icon_css动画

使用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动画到这里就结束了

采用的是一个盒子依靠左外边距移动位置

代码整合如下

这是网页

.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;}

}

往后面教程将更加详细带解释

因为目前很多小伙伴都是入门

讲的太深入反而不好