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

作者: eb247a4a4211 | 来源:发表于2018-05-25 22:02 被阅读32次

教学：使用JS技术实现网页加载动画效果，网友：如今更厉害了
CSS3加载动画（原创）
2018-05-26 CSS3实现动画加载效果
CSS3 loading加载动画
WEB 四
CSS3中的过渡动画以及添加动画规则
纯CSS3制作卡通场景汽车动画效果
iOS开发之虚线动画
Vue 无缝轮播实现
CSS Grid Loading

第六篇博客-加载动画.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