争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

CSS3学习之页面加载动画(二)

时间:2024/1/30作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家分享6种css3的页面加载动画。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

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

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

五、效果五

CSS3学习之页面加载动画(二)

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

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

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

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

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

六、效果六

CSS3学习之页面加载动画(二)

这个效果就比较简单了。

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

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

七、效果七

CSS3学习之页面加载动画(二)

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

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

八、效果八

CSS3学习之页面加载动画(二)

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

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

九、效果九

CSS3学习之页面加载动画(二)

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

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

十、效果十

CSS3学习之页面加载动画(二)

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

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

(未完待续)

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

以上就是CSS3学习之页面加载动画(二)的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:CSS3学习之页面加载动画(二)




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版