2018-05-26 CSS3实现动画加载效果

第六篇博客-加载动画.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;/*最大为宽度的一半，超过时只能显示一半时的效果；50%时显示圆形*/
    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(还需要兼容各种浏览器)

/*Firefox*/@-moz-keyframes anim{    from{transform: rotateY(0deg);}
    50% {transform: rotateY(180deg);}    to {transform: rotateY(360deg);
}/*Opera*/@-o-keyframes anim{    from{transform: rotateY(0deg);}
    50% {transform: rotateY(180deg);}    to {transform: rotateY(360deg);
}/*Safari和Chrome*/@-webkit-keyframes anim{    from{transform: rotateY(0deg);}
    50% {transform: rotateY(180deg);}    to {transform: rotateY(360deg);
}/*IE*/@-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;/*Safari和Chrome*/-moz-animation: anim 2s linear infinite;/*Firefox*/-ms-animation: anim 2s linear infinite;/*IE*/-o-animation: anim 2s linear infinite;/*Opera*/animation: anim 2s linear infinite;/*常规*/

六、CSS3实例-加载效果

6.1 html代码

<div class="loading">
    <div>加载中..</div>
    <div></div>
    <div></div></div>

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