菜单

CSS3贯彻Loading动画特效

2018年12月13日 - CSS/CSS3

CSS3制作Loading动画

2015/10/31 · CSS ·
Loading

初稿出处: AlloyTeam-
TAT.yana
   

就算如此现在互联网的网速越来越快,但永远都跟不上我们生活节奏的加速。资深性心理障碍少女表示,这大千世界最刺眼的非是日光,而是“正在加载”;最丰硕的匪是周杰伦的电影,而是“正在加载”;最沉痛之事情不是你莫爱自我,而是“正在加载”(语文先生告诉自己排比要至少写三句)。

 

当下是为什么吧

怎么loading让大家这样痛苦也?因为,我们看来的loading是这般的  图片 1凡是这么的 
 图片 2颜值再强一点之凡这么的  图片 3

立刻就是是为什么要被他们“菊花”,就以增长得丑啊喂!

咱俩只要以这多少个看脸的社会风气现有下来!!!

恰落地之时节自己是独好圆脸,塌鼻梁,单眼皮,曾经都让隔壁大妈怀疑我是自我三姑捡来之==但我好可爱的生母家长对己莫离开不放弃,平时和自己说“先天不足,先天弥补”,我才发出了延续在下来的种。作为网页,假如真没有道改变“加载慢”那么些患病,那么将loading的卡通做的窘迫一点,萌用户一面子血,“愉快的时光总是刹那间便没有”。

与此同时是一个刷朋友圈的难眠的晌午,一篇稿子引发了本人《什么样的loading动画,我会等!》。只要一点点简易的创意,加一点点简便的动效设计,加载过程就是载了童趣。

那就是说大家一并来用纯纯的CSS3召开几独简易有趣的loading动画吧~(效果图俱为动图!效果图俱为动图!效果图俱为动图!)

 

先是,我们举办一个顶简易的速条样的卡通(那里偷懒下,只兼容webkit内核查了==)

图片 4

里头,animation-timing-function的默认状态是ease(低速最先,加快,在终止前变慢),ease-in(低速开头),ease-out(低速停止),ease-in-out(低速先河低速为止),linear(匀速),还好用cubic-bezier(0, 0,
0,
0)来设置速度。具体的速度曲线和安装速度值好以http://cubic-bezier.com上查到。

animation-iteration-count的infinite表示无比次巡回;animation-direction的normal表示动画播放了晚从头起始播放,reverse和normal相反,是起后上播放,还有alternate会逆向播放。

XHTML

<a
href=”http://cdn.alloyteam.com/wp-content/uploads/2015/10/1.png"&gt;
<img alt=”1″ class=”alignnone size-medium wp-image-8625″
src=”http://cdn.alloyteam.com/wp-content/uploads/2015/10/1-300×86.png
style=”height:115px; width:400px” /> </a> <a
href=”http://cdn.alloyteam.com/wp-content/uploads/2015/10/12.png"&gt;
<img alt=”12″ class=”alignnone size-medium wp-image-8623″
src=”http://cdn.alloyteam.com/wp-content/uploads/2015/10/12-300×267.png
style=”height:356px; width:400px” /> <span
style=”font-size:16px”> <span
style=”color:#000000″>然后大家于@keyframes中确定动画效果,由于是直线举行,所以只有先导跟得了五个状态就OK了。</span>
</span> </a> <a
href=”http://cdn.alloyteam.com/wp-content/uploads/2015/10/111.png"&gt;
<img alt=”11″ class=”alignnone size-medium wp-image-8631″
src=”http://cdn.alloyteam.com/wp-content/uploads/2015/10/111-300×162.png
style=”height:162px; width:300px” /> </a>

1
2
3
4
5
6
7
8
9
10
11
12
<a href="http://cdn.alloyteam.com/wp-content/uploads/2015/10/1.png">
  <img alt="1" class="alignnone size-medium wp-image-8625" src="http://cdn.alloyteam.com/wp-content/uploads/2015/10/1-300×86.png" style="height:115px; width:400px" />
</a>    
<a href="http://cdn.alloyteam.com/wp-content/uploads/2015/10/12.png">
    <img alt="12" class="alignnone size-medium wp-image-8623" src="http://cdn.alloyteam.com/wp-content/uploads/2015/10/12-300×267.png" style="height:356px; width:400px" />
    <span style="font-size:16px">
     <span style="color:#000000">然后我们在@keyframes中规定动画效果,由于是直线进行,所以只有开始和结束两个状态就OK了。</span>
   </span>
</a>    
<a href="http://cdn.alloyteam.com/wp-content/uploads/2015/10/111.png">
    <img alt="11" class="alignnone size-medium wp-image-8631" src="http://cdn.alloyteam.com/wp-content/uploads/2015/10/111-300×162.png" style="height:162px; width:300px" />
</a>

 

效用如下

图片 5

 

卡带Loading

 

面异常黄条是啊鬼==好丑的出没有起!!!

乃我中一闪,卡带的典范来做loading一定不错~

自我找了一个卡带的希冀,把里面的转轮切出来,使用rotate来而圆圈旋转。注意要使用transform-origin:
50% 50%;使动画以圆形的圆心旋转。

图片 6

乃便应运而生了之类的效率:

图片 7

 

牛顿摆Loading

 

抓好了卡带的效益后我之灵感欲罢不可知,看到家里的牛顿(Newton)摆就是哼想将她做成loading。

牛顿(牛顿)摆只发半点端的小球会动,那么我们设坐绳子上为轴心旋转一定的角度就足以啦~于是大家拔取Photoshop来大概画一个牛顿(Newton)摆的图片。

可是,摆动速度并无是无就可的,毕竟也算是个自由落体运动。最先的时会来个横向的加速度,然后就发出个通往下之重力加速度,毕竟用户被独产生个别凡物翻译家,所以假若出个大概的快变化即可。也就是说小球起始走先加速再减速,到极致上方后再行加速。于是下图片 8来设置速度。

搞定!于是牛顿(Newton)摆的Loading是这般的:

图片 9

 

橘子甩汁Loading

 

不畏说我对取得名字呀的非擅长。。。

于上马提到的这篇稿子中,我来看了一个动图真的是萌生我平体面血,让自身不禁咽了咽口水。

就是立时货!!

图片 10

事实上被“橘子甩汁”依然生像之==

此,我将全体动画分为三局部。

图片 11

率先有些是周的速修动画,这里大家的率先单颜值略小的进度条固然着上了用场。大家将背景观换成青色,然后被进度长长8px之border就好啦。

老二片是太右侧边的桔子切面,只要固定好岗位就是可以,注意,一定要用她置到最顶。

其三片即便是橘子果肉部分,因为要为不同倾向旋转不同途径走,所以我分成了三独状态。图片 12

图片 13

图片 14

translate为运动运动,translate(left的价,top的值);rotate从0到360渡过也逆时针旋转,反的为顺时针转动。通过给translate和rotate设置的价值不同,就好转果肉运动的状态。但是大家无得以被他们同时内部出现,那么我们得吧中一个肉动画设置delay图片 15,这样虽生出矣肉不断被甩出底功效。

css3动辄画好简练有趣,只要经过简单的平移变换的结合就可以做出过多迷人之动效。

 

设loading动画不再是菊花,那么等待也不再是起痛苦之从事了。

1 赞 1 收藏
评论

图片 16

查看效果:
http://hovertree.com/texiao/css3/43/

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3 loading等待加载代码 - 何问起</title>

    <style>
        @keyframes move {
            from {
                transform: translate(0,50%);
            }

            to {
                transform: translate(0,850%);
            }
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 325px;
            height: 100vh;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            align-content: flex-start;
            background: #2a2a2a;
        }

        figure {
            margin: 30px;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            position: relative;
            background: #1c1c1c;
        }

        section {
            width: 10%;
            height: 100%;
            position: absolute;
            left: 45%;
        }

            section:nth-child(2) {
                transform: rotate(22.5deg);
            }

            section:nth-child(3) {
                transform: rotate(45deg);
            }

            section:nth-child(4) {
                transform: rotate(67.5deg);
            }

            section:nth-child(5) {
                transform: rotate(90deg);
            }

            section:nth-child(6) {
                transform: rotate(112.5deg);
            }

            section:nth-child(7) {
                transform: rotate(135deg);
            }

            section:nth-child(8) {
                transform: rotate(157.5deg);
            }

        figure div {
            height: 10%;
            border-radius: 50%;
            background: dodgerblue;
            animation: move 1s ease-in-out infinite alternate;
        }

        figure:nth-child(1) > section:nth-child(1) > div {
            animation-delay: -0.1875s;
        }

        figure:nth-child(1) > section:nth-child(2) > div {
            animation-delay: -0.175s;
        }

        figure:nth-child(1) > section:nth-child(3) > div {
            animation-delay: -0.1625s;
        }

        figure:nth-child(1) > section:nth-child(4) > div {
            animation-delay: -0.15s;
        }

        figure:nth-child(1) > section:nth-child(5) > div {
            animation-delay: -0.9375s;
        }

        figure:nth-child(1) > section:nth-child(6) > div {
            animation-delay: -0.925s;
        }

        figure:nth-child(1) > section:nth-child(7) > div {
            animation-delay: -0.9125s;
        }

        figure:nth-child(1) > section:nth-child(8) > div {
            animation-delay: -0.9s;
        }

        figure:nth-child(2) > section:nth-child(1) > div {
            animation-delay: -0.875s;
        }

        figure:nth-child(2) > section:nth-child(2) > div {
            animation-delay: -0.75s;
        }

        figure:nth-child(2) > section:nth-child(3) > div {
            animation-delay: -0.625s;
        }

        figure:nth-child(2) > section:nth-child(4) > div {
            animation-delay: -0.5s;
        }

        figure:nth-child(2) > section:nth-child(5) > div {
            animation-delay: -0.375s;
        }

        figure:nth-child(2) > section:nth-child(6) > div {
            animation-delay: -0.25s;
        }

        figure:nth-child(2) > section:nth-child(7) > div {
            animation-delay: -0.125s;
        }

        figure:nth-child(3) > section:nth-child(1) > div {
            animation-delay: -0.5s;
        }

        figure:nth-child(3) > section:nth-child(3) > div {
            animation-delay: -0.5s;
        }

        figure:nth-child(3) > section:nth-child(5) > div {
            animation-delay: -0.5s;
        }

        figure:nth-child(3) > section:nth-child(7) > div {
            animation-delay: -0.5s;
        }

        figure:nth-child(4) > section:nth-child(1) > div {
            animation-delay: -0.35s;
        }

        figure:nth-child(4) > section:nth-child(2) > div {
            animation-delay: -0.3s;
        }

        figure:nth-child(4) > section:nth-child(3) > div {
            animation-delay: -0.25s;
        }

        figure:nth-child(4) > section:nth-child(4) > div {
            animation-delay: -0.2s;
        }

        figure:nth-child(4) > section:nth-child(5) > div {
            animation-delay: -0.15s;
        }

        figure:nth-child(4) > section:nth-child(6) > div {
            animation-delay: -0.1s;
        }

        figure:nth-child(4) > section:nth-child(7) > div {
            animation-delay: -0.05s;
        }
    </style>

    <script src="js/prefixfree.min.js"></script>

</head>

<body>

    <figure>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
    </figure>

    <figure>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
    </figure>

    <figure>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
    </figure>

    <figure>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
    </figure>

    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
        <p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
        <p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a></p>
    </div>
</body>
</html>

web前端特效:http://www.cnblogs.com/jihua/p/webfront.html

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图