整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
次我们展示多个图标动画特效！上次有人在问，为什么不写 font-family，就调用不了图标。很简单，你在 @font-face 中，指定 font-family 名字为 'FishC-icon';
@font-face {
font-family:'FishC-icon';
src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
}
那么在伪元素中就要告诉脚本，劳资就用'FishC-icon'里的图标！
这次因为有多个动画对象，所以用延迟参数形成动画序列，先写 5 个 div 吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图标元素2</title>
<style type="text/css">
@font-face {
font-family:'FishC-icon';
src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
}
.icon{
display: inline-block;
margin-right: 33px;
}
.android::before{
content: "\e65f";
font-size: 66px;
font-family: 'FishC-icon';
}
.app::before{
content: "\e660";
font-size: 66px;
font-family: 'FishC-icon';
}
.page::before{
content: "\e64d";
font-size: 66px;
font-family: 'FishC-icon';
}
.show::before{
content: "\e647";
font-size: 66px;
font-family: 'FishC-icon';
}
.victor::before{
content: "\e648";
font-size: 66px;
font-family: 'FishC-icon';
}
</style>
</head>
<body>
<div class="android icon">Android</div>
<div class="app icon">Apple</div>
<div class="page icon">Page</div>
<div class="show icon">Show</div>
<div class="victor icon">Victor</div>
</body>
</html>
效果图：
此时由于没有隐藏文字，这是上一讲的点睛之笔 ，有兴趣自己去找。但不同之处在于此处的图标都设置为“inline-block”，使之能够横向排列。现在修改样式
.icon{
display: inline-block;
cursor: help;
width: 111px;
height: 111px;
font-size: 0px;
line-height: 100px;
border-radius: 50%;/*圆框*/
background:#7FE;
color: #000;
text-align: center;
animation:move 1s
}
效果图：
例如，使图标位置向下偏移 -100%。
然后在向上移动回到初始位置，此过程中让图标从完全透明化变为完全不透明。
@keyframes move{
from{
opacity: 0;
transform: translateY(100%);
}
to{
opacity: 1;
transform: translateY(0%);
}
}
效果图：
利用 transform 属性的 translateY 方法来实现图标的向下偏移。
然后使用 opacity 属性设置图标的透明度，0.0 （完全透明）到 1.0（完全不透明）。
由于未设置单个图标的延迟，所以一下子 5 个同时出现。
既然提到了延迟，那就设置一下咯～
使用 animation-delay 属性设置延迟：
.android{
animation-delay: 0s;
}
.app{
animation-delay: .3s;
}
.page{
animation-delay: .6s;
}
.show{
animation-delay: 1.2s;
}
.victor{
animation-delay: 1.5s;
}
效果图：
光这么直棱棱也不好玩。
然后我们自己设置贝塞尔（cubic-bezier）速度曲线，达到不同速率节奏效果 ～
假设你穿越成功，会看到：
拖动粉点（起始点），蓝点（终点）即可以生成坐标。
生成的结果为 cubic-bezier(.86,.15,.18,.9)。
.icon{
animation-fill-mode: both;
animation: move 2s cubic-bezier(.86,.15,.18,.9);
}
效果图：
其中 animation-fill-mode 属性用来属性规定动画在播放之前或之后，其动画效果是否可见。。
设置完成后，防止图标闪现。
学习HTML5开发培训，到重庆千锋教育，千锋重庆HTML5开发培训怎么样？千锋提供两周免费试听课程，欢迎你来试听。
tml5图标
在HTML5中新增了几个全局属性（所谓全局属性是指所有元素共用的属性）。
contentEditable属性（可编辑，是一个布尔值，当为true的时候，表示元素包含内容可编辑，默认是false，不可编辑）。示例
一个文档
在网页中就可以重新对它进行编辑
hidden属性（隐藏显示，这个属性可以通过js去控制显示或隐藏，同样也是一个布尔值，值为true就是显示，false就是隐藏）
spellcheck属性（针对input和textarea，对用户输入的内容进行语法检查，也是一个布尔值,为true就要检查，如果单词拼写错误，就会显示下图下标带波浪线的错误单词提示）
单词拼写错误
tabindex属性（按键盘TAB键切换，带到指定 tab顺序的链接）
按TAB键可以切换指定顺序的链接上
1.设置文字颜色--text
2.背景颜色属性--bgcolor
3.背景图像属性--background
4.设置链接文字属性--link
5.设置边距--margin
概述
<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其他元素；这些元素属性构成HTML文档的主体部分。
<body>元素中有下列元素属性：
（1）bgcolor
bgcolor属性标志HTML文档的背景颜色。如bgcolor="#CCFFCC"。
（2）background
background属性标志HTML文档的背景图片。如
background=“images/gb.gif"。
可以使用的图片格式为GIF，JPG
bgcolor代码实例：
运行效果
background代码实例
运行效果
想要不重复重叠显示，添加CSS样式代码如下
效果
*请认真填写需求信息，我们会在24小时内与您取得联系。
