CSS3学习之页面加载动画（二）-tutorial css-php.cn

CSS3学习之页面加载动画（二）

青灯夜游

Lepaskan： 2018-10-15 15:51:23

ke hadapan

2831 orang telah melayarinya

本篇文章给大家分享6种css3的页面加载动画。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

在之前的文章【CSS3学习之页面加载动画（一）】中已经分享了四个CSS3的加载动画，今天继续（标题接上一次）。

请注意：代码中的关键帧动画有的用的linear曲线，而有的用的是ease曲线。前者是匀速执行，整个动画以固定的速度执行；后者有加速减速阶段，在动画开始时加速，在动画将要结束时减速（比如我在50%的地方设置了一个动画，那么在快要到达50%的时候，动画开始减速，在超过50%的时候动画开始加速，表现在页面上会有一个短暂的停留效果，效果七、效果八最为明显）

五、效果五

小球爬楼梯的效果，第一看到这个效果，本以为会有点儿复杂，结果写出来之后觉得也没有那么难。

首先将楼梯定位至右上角，执行从右上至左下的运动动画，并为每一个楼梯设置animation-delay的值（我这里用了三个楼梯，总时长1.8s,animation-delay值分别为0s,-0.6s,-12s）

{animation: step_mv 1.8s linear infinite;}<br>@keyframes step_mv {<br>      0%{<br>        right: 0;<br>        top: 0;<br>        opacity: 0.6;<br>      }<br>      50%{<br>        opacity: 1;<br>      }<br>      100%{<br>        right: 100%;<br>        top: 100%;<br>        opacity: 0.6;<br>      }<br>    }<br>

Salin selepas log masuk

其次，确定小球与楼梯的接触点，小球将以此接触点作为最低基准，同时，改变小球在上升、下降过程中的宽高来是小球跳动更真实。小球动画的运动时间刚好是楼梯动画的延迟时间，这样，才能保证小球可以接触到每一个楼梯。

{animation: jump .6s 0s ease infinite,jump_S .6s 0s ease infinite;}<br>@keyframes jump {<br>      50%{<br>        top: 60%;<br>      }<br>    }<br>    @keyframes jump_S {<br>      5%{<br>        height: 25px; //下降过程<br>        width: 15px;<br>      }<br>      54%{<br>        height: 20px;//到达底部<br>        width: 20px;<br>      }<br>      55%{<br>        height: 25px;//上升过程<br>        width: 15px;<br>      }<br>      98%{<br>        height: 20px;//到达顶点<br>        width: 20px;<br>      }<br>    }<br>

Salin selepas log masuk

六、效果六

这个效果就比较简单了。

一个矩形p，设置边框、圆角，将其中任意一个边框颜色设置为继承（即border-left/bottom/top/right-color:transparent）；

这样，父元素没有边框颜色，这一边的边框也就无色，便形成了有缺口的圆，接下来只要设置旋转动画就OK了。（代码就不贴出来了）

七、效果七

这个效果形状的制作与上一个做法相同，只是这次多加了一个边框，还是旋转，就不多说了，直接上关键帧动画的代码。

{animation: rotate_bors 2s ease infinite;}//大圆<br>{animation: rotate_bors 1s ease infinite;}//小圆@keyframes rotate_bors {<br>      50%{<br>        transform: rotateZ(180deg);<br>      }<br>      100%{<br>        transform: rotateZ(360deg);<br>      }<br>    }<br>

Salin selepas log masuk

八、效果八

这个效果也很简单，外部大圈怎么做就不多说了，里面的小圆，也只要改变大小就行了。

{animation: rotate_borw 1s linear infinite;}@keyframes rotate_borw {<br>      50%{<br>        width: 15px;<br>        height: 15px;<br>      }<br>    }<br>

Salin selepas log masuk

九、效果九

将小球全部设置为行内块元素，给父元素text-align：center来使小球水平居中，通过设置行高，来使小球垂直居中。接下来通过关键帧动画来改变小球的长宽、以及左右外边距。

{animation: margin 1s linear infinite;}<br>    @keyframes margin {<br>      50%{<br>        margin:0 10px;<br>        width: 10px;<br>        height: 10px;<br>      }<br>    }<br>

Salin selepas log masuk

十、效果十

依然将小球设为行内块，只需水平居中即可，可以设置外边距来调整小球之间的距离，通过关键帧来设置小球的translateY的值。（每个小球之间的延迟不必均分，差值可以减小）

{animation: trans 1.2s ease infinite;}@keyframes trans {<br>      50%{<br>        opacity: 1;<br>        transform: translateY(30px);<br>      }<br>      70%{<br>        opacity: 1;<br>        transform: translateY(30px);<br>      }<br>      100%{<br>        opacity: 0;<br>        transform: translateY(60px);<br>      }<br>    }<br>

Salin selepas log masuk

（未完待续）

今天就分享到这里，后面还会有补充。希望能对大家的学习有所帮助，更多相关教程请访问 CSS基础视频教程， CSS3视频教程，bootstrap教程！

Atas ialah kandungan terperinci CSS3学习之页面加载动画（二）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!