CSS3实现页面加载动画的方法-创新互联
这篇文章给大家分享的是CSS3实现页面加载动画的方法,相信大部分人都还没学会这个技能,为了让大家学会,给大家总结了以下内容,话不多说,一起往下看吧。
创新互联网络公司拥有十年的成都网站开发建设经验,近千家客户的共同信赖。提供成都网站制作、成都网站建设、外贸营销网站建设、网站开发、网站定制、买友情链接、建网站、网站搭建、响应式网站、网页设计师打造企业风格,提供周到的售前咨询和贴心的售后服务十七、效果十七
三个小球,纵向居中,间距撑开,依次改变小球的translateY的值即可。
@keyframes leap_ball { 50% { transform: translateY(60px); } }
十八、效果十八
三个小球,横纵方向上均居中,通过外边距撑开小球之间的距离,从效果上看是左右两边的两个小球在围绕中间小球做环绕运动,那么我们可以直接让小球的父元素来旋转,来达到两边小球的环绕效果(父元素旋转的时候,因为圆形,所以中间小球看不出是在旋转,并且中间的位置也不会改变,从视觉上看,中间小球没有做任何变化)。
@keyframes wind_ball { 50% { transform: rotateZ(180deg); } 100% { transform: rotateZ(360deg); } }
十九、效果十九
一共五个小球,每一个小球执行的动画都一样,只是每个小球的动画延迟时间不同,而使小球的位置不同,将五个小球定位至同一个位置作为统一起点(这里,我是将五个小球统一定位至最右边)
{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP { 80% { right: 75%; //到达终点,开始返回起点 } } @keyframes cool_ballS { 80% { //到达终点 top: 25%; width: 20px; height: 20px; } 81% { //开始返回起点,长度变大,宽度变小,模拟移动产生的形变 top: 0; width: 25px; height: 15px; } 99% { //到达起点 top: 0; width: 25px; height: 15px; } 100% { //恢复初始 width: 20px; height: 20px; } }
二十、效果二十
共八个小球,定位围成一个圆,改变小球的宽度、高度即可(要保持小球改变的是以小球的圆心为基准)
{animation: load_ball 1.6s linear infinite;}@keyframes load_ball { 50% { height: 0; width: 0; } 80% { height: 0; width: 0; } }
(50%-80%小球维持宽度、高度保持0,形成了一半显示,一半隐藏的效果)
二十一、效果二十一
一共三个小球,每个小球的运动轨迹依然是相同的,这里,我将三个小球的中心定位到纵向顶部,横向中心,然后分三个阶段,先运动到右下角,再到左下角,最后返回起点。
(在每一个阶段接近中间的时间点,加上了透明度的改变)
@keyframes triangle_ball { 16% { opacity: .6; } 33% { left: 100%; top: 100%; opacity: 1; } 50% { opacity: .6; } 66% { left: 0; top: 100%; opacity: 1; } 83% { opacity: .6; } 99% { top: 0; left: 50%; opacity: 1; } }
二十二、效果二十二
这类似于一个旋转的齿轮,关键是如何做出一个齿轮的形状来,一个p给实现边框做里面的圆,给p的伪类虚线边框做外面的锯齿,伪类的边框越宽,锯齿越稀松,反之,越密集。
做出来齿轮了,就剩下旋转的小case了。
.gear_ball { height: 60px; width: 60px; border-radius: 50%; display: inline-block; border: 4px #fff solid; position: relative; } .gear_ball:after { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 50%; top: -8px; left: -8px; border: 8px #fff dashed; }
看完这篇文章,你们学会CSS3实现页面加载动画的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联网站制作公司行业资讯频道,感谢各位的阅读。
新闻名称:CSS3实现页面加载动画的方法-创新互联
当前地址:http://myzitong.com/article/djodgh.html