第六篇博客-加载动画.png
最近在系统的学习CSS3方面的知识，以前经常在编程使用到部分CSS3属性，但没有想到还有许多功能强大的功能都是在CSS3当中提出的。对于学习前端的同学们，一定要熟悉掌握CSS3的相关知识，可以极大的提高开发效率。
下面是介绍在项目中使用到的CSS3技术：
一、自定义字体 @font-face
提问：为什么要使用自定义字体？
回答：在CSS3之前，网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3，网页设计师就可以设置网页使用大众喜欢的字体，并且不再受用户本地计算机是否存在该字体的影响。字体资源可以作为图片资源一样，放在服务器上，它会自动下载给需要的用户。
1.1 现有的字体文件有？
woff文件、ttf文件、svg文件、eot文件
1.2 @font-face使用：将字体下载到本地项目中，路径的设置跟图片类似
自定义字体名，并引入字体资源
@font-face{ font-family: hwxk;
src:url(../fonts/hwxk.ttf);}引用自定义字体
p{font-family:hwxk}二、伪类：向某些选择器添加特殊的效果
2.1 child选择器
div:first-child：作为父元素的第一个div
div:last-child：作为父元素的最后一个div
div:nth-child()：括号内可以是确切的值，也可以是表达式
例如：
div:nth-child(2):作为父元素的第二个div
div:nth-child(an+b):作为子元素位置是a倍数偏移量为b的所有div元素
div:nth-child(odd):作为子元素是奇数位置的所有div元素
:nth-last-child()：括号内可以是确切的值，也可以是表达式
:nth-child()和:nth-last-child()的区别在于，前者从上到下查询，后者从下到上查询
2.2 type选择器
div:first-of-type:作为父元素的第一个类型为div的元素
div:last-of-type:作为父元素的最后一个类型为div的元素
div:nth-of-type()：与nth-child()用法类似，但含义不同
div:nth-last-of-type()：于nth-last-child()用法类似，但含有不同
三、圆角：border-radius
.box{ width: 200px; height: 200px; border-radius:100px;
background: gold;
}效果：
圆形.png
四、阴影：box-shadow
4.1 属性值
h-shadow：必需，水平阴影的位置。正值时表示向右偏移，负值时表示向左偏移。
v-shadow：必需，垂直阴影的位置。正值时表示向下偏移，负值时表示向上偏移。
blur：可选，模糊距离。
spread：可选，阴影的尺寸。
color：可选，阴影的颜色。
inset：可选，将外部阴影 (outset) 改为内部阴影。
4.2 实例
代码：
.box{ width: 200px; height: 200px; background: #e8e8e8; box-shadow: 2px 2px 5px gold;
}效果：
阴影.png
五、动画
5.1 创建动画@keyframes(还需要兼容各种浏览器)
@-moz-keyframes anim{ from{transform: rotateY(0deg);}
50% {transform: rotateY(180deg);} to {transform: rotateY(360deg);
}@-o-keyframes anim{ from{transform: rotateY(0deg);}
50% {transform: rotateY(180deg);} to {transform: rotateY(360deg);
}@-webkit-keyframes anim{ from{transform: rotateY(0deg);}
50% {transform: rotateY(180deg);} to {transform: rotateY(360deg);
}@-ms-keyframes anim{ from{transform: rotateY(0deg);}
50% {transform: rotateY(180deg);} to {transform: rotateY(360deg);
}@keyframes anim{ from{transform: rotateY(0deg);}
50% {transform: rotateY(180deg);} to {transform: rotateY(360deg);}
}5.2 使用动画animation
animation：所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name：规定@keyframes 动画的名称。
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function：规定动画的速度曲线，默认是 "ease"。
animation-delay：规定动画何时开始，默认是 0。
animation-iteration-count：规定动画被播放的次数，默认是 1。
animation-direction：规定动画是否在下一周期逆向地播放，默认是 "normal"。
animation-play-state规定动画是否正在运行或暂停，默认是"running"。
-webkit-animation: anim 2s linear infinite;-moz-animation: anim 2s linear infinite;-ms-animation: anim 2s linear infinite;-o-animation: anim 2s linear infinite;animation: anim 2s linear infinite;
六、CSS3实例-加载效果
6.1 html代码
加载中..
6.2 CSS3代码
*{ padding:0; margin:0; list-style-type: none;
}
@font-face{ font-family: hwxk;
src:url(../fonts/hwxk.ttf);}.loading{ width: 200px; height: 200px; margin: 100px auto; border-radius: 50%; font-size: 20px; line-height: 200px; position: relative; text-align: center; font-family: hwxk;
}.loading > div:nth-child(2),.loading > div:nth-child(3){ width: 200px; height: 200px; border-radius: 50%; border:1px solid #ffffff; box-shadow: 0px 0px 5px 0 gold; position: absolute; top:0; -webkit-animation: anim 2s linear infinite; -moz-animation: anim 2s linear infinite; -ms-animation: anim 2s linear infinite; -o-animation: anim 2s linear infinite; animation: anim 2s linear infinite;
}.loading > div:nth-child(2){ border-color:#fff; left:10px; width:180px;
}.loading > div:nth-child(3){ border-color: gold; left:0px; width: 200px; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -ms-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s;
}
@-moz-keyframes anim{ from{transform: rotateY(0deg);}
50% {transform: rotateY(180deg);} to {transform: rotateY(360deg);
}
@-o-keyframes anim{ from{transform: rotateY(0deg);}
50% {transform: rotateY(180deg);} to {transform: rotateY(360deg);
}
@-webkit-keyframes anim{ from{transform: rotateY(0deg);}
50% {transform: rotateY(180deg);} to {transform: rotateY(360deg);
}
@-ms-keyframes anim{ from{transform: rotateY(0deg);}
50% {transform: rotateY(180deg);} to {transform: rotateY(360deg);
}
@keyframes anim{ from{transform: rotateY(0deg);}
50% {transform: rotateY(180deg);} to {transform: rotateY(360deg);}
}6.3 效果
其最终效果下图所示，但是一个动态循环的效果，希望可以自己将代码复制到本地感受一下效果，然后学习一下代码。
加载动画.png
作者：瑾瑜爱上猫
链接：https://www.jianshu.com/p/6263bda5902d
