动画：
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果.
1.必要元素：
a、通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素；
2.animation样式常用属性：
a)动画序列的名称:animation-name: move;
b)动画的持续时间:animation-duration: 1s;
c)动画的延时:animation-delay: 1s;
d)播放状态:animation-play-state: paused|running;
e)播放速度:animation-timing-function: linear;
f)播放次数 反复:animation-iteration-count: 1;
g)动画播放完结后的状态:animation-fill-mode: forwards;
h)循环播放时，交叉动画:animation-direction: alternate;
/添加动画效果/
1.animation-name:指定动画名称
animation-name: moveTest;
2.设置动画的总耗时
animation-duration: 2s;
3.设置动画的播放次数，默认为1次 可以指定具体的数值，也可以指定infinite(无限次)
animation-iteration-count: 1;
4.设置交替动画 alternate:来回交替
animation-direction: alternate;
5.设置动画的延迟
animation-delay: 2s;
5.设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态
forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态
backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态
both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态
animation-fill-mode: both;
6.动画的时间函数
animation-timing-function: linear;
设置动画的播放状态 paused:暂停 running:播放
animation-play-state: running;
image.png
css3实现轮播图无缝滚动：
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 882px;
height: 86px;
margin:100px auto;
background-color: #ddd;
overflow: hidden;
}
div >ul{
width: 200%;
list-style: none;
/*1.设置的名称*/
animation-name: move;
/*2.设置动画的耗时*/
animation-duration: 7s;
/*3.市场无限循环*/
animation-iteration-count: infinite;
/*4.设置时间函数*/
animation-timing-function: linear;
}
div > ul > li{
width:126px;
float: left;
}
div > ul > li > img{
width:100%;
}
/*鼠标上移，停止动画*/
div:hover > ul{
cursor: pointer;
animation-play-state: paused;
}
/*创建动画*/
@keyframes move {
from{
transform:translateX(0);
}
to{
transform:translateX(-882px);
}
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
<li><img src="../images/4.jpg" alt=""></li>
<li><img src="../images/5.jpg" alt=""></li>
<li><img src="../images/6.jpg" alt=""></li>
<li><img src="../images/7.jpg" alt=""></li>
<li><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
<li><img src="../images/4.jpg" alt=""></li>
<li><img src="../images/5.jpg" alt=""></li>
<li><img src="../images/6.jpg" alt=""></li>
<li><img src="../images/7.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
web字体和字体图标:
web字体(阿里巴巴iconfont-在线字体):
开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。它的支持程度比较好，甚至IE低版本浏览器也能支持。
1.字体格式
不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
1、TureTpe(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2、OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
3、Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
4、Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+
使用方法：
360截图184307108774123.png
字体图标：
常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了
a)优点
将所有图标打包成字体库，减少请求；
具有矢量性，可保证清晰度；
使用灵活，便于维护
a) 生成字体图标文件
a) 下载字体图标文件：如https://www.awesomes.cn/的网站的介绍和使用
[图片上传失败...(image-aabb57-1557737561286)]
b) 自定义字体
/*定义字体图标*/ @font-face { font-family: 'wjs'; //自定义的字体名称 src: url('../fonts/MiFie-Web-Font.eot'); /* IE9*/ src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/MiFie-Web-Font.woff') format('woff'), /* chrome、firefox */ url('../fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('../fonts/MiFie-Web-Font.svg') format('svg'); /* iOS 4.1- */ }
c) 通过css样式使用字体
/自定义字体图标/ .
wjs_font_icon{ font-family: wjs; //这里对应着自定义的字体名称 } /*手机图标对应的编码*/ .wjs_font_icon_phone::before{ content: "\e908"; //指定显示的内容 }
IconFont Demo.png
网友评论