用纯CSS完成饼状Loading等候图实际效果

日期:2020-12-12 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

写在前面

以前碰到1个小训练,便是用纯CSS3来写饼状的loading实际效果,以前着实沒有写过这玩意,小花彻底没思绪,随后参照了张鑫旭老师的CSS3完成鸡蛋饼饼状图loading等候转转转,也有些其他物品,用1种看起来有1点相近可是仿佛又不1样的方法进行了一样的实际效果,题型规定的大约便是这个模样:

刚开始

揣摩了1下,睡1觉起来画了个图,理顺了1下,但是觉得此图有点难会意啊啊啊啊啊,没事儿,小花会在后文1点1点解释哒~(红跟粉意味着色调,斜杠后边是z-index的值)

基本原理

这个物品分成两一部分:外圈和内圆。色调这物品都自定啦,但是我画的的圈圈仿佛有点太大,随后动漫時间是随意设的,总之转起看来着觉得有点怪怪的额

先上html构造

<div class="con-wrap">

    <!--外圈-->
    <div class="out-round"></div>

    <!--内圆,里边有半圆4个-->
    <div class="in-round">
        <div class="lt-round"></div>
        <div class="lt-mask"></div>
        <div class="rt-round"></div>
        <div class="rt-mask"></div>
    </div>
</div>

外圈和内圆是根据position精准定位重叠在1起,本质上外圈转完2圈,内圆的鲜红色和粉色才各转完1圈(内圆的全程包含鲜红色从1到0、粉色从1到0),因此内圆的动漫時间应当是外圈的两倍!!!

1、外圈  

外圈很简易,设定border-radius:50%便可画出1个圆,随后设定3条边框为鲜红色,此外1条为全透明,即画出了4分之3个圆边框(即外圆)。

.out-round {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 150px auto;
            border: 3px solid #FF298C;
            border-left: 3px solid transparent;
            animation: outRound 1s linear infinite running;
        }

 

接下来是外圈的动漫,为其设定的动漫便是转动1圈,infinite表明无尽次

@keyframes outRound {
            0% {
                transform: rotate(120deg)
            }
            100% {
                transform: rotate(⑵40deg)
            }
        }

在其中rotate(120deg)为转动起止部位,可依据具体状况调剂。

至另外圈就进行了,较为不便的是下面的内圆,但是依据图示应当是能够想像的。

2.内圆

此处有4个半圆,左侧两个,右侧两个(round为鲜红色,mask为粉色),动漫关键根据更改两个鲜红色半圆的z-index值来操纵各个半圆显示信息的优先选择次序。内圆的css完成一部分为:

/*左侧两个半圆*/
        .lt-round, .lt-mask {
            position: absolute;
            width: 35px;
            height: 70px;
            border-radius: 35px 0 0 35px;
            transform-origin: right center;
        }

/*右侧两个半圆*/
        .rt-round, .rt-mask {
            position: absolute;
            left: 50%;
            width: 35px;
            height: 70px;
            border-radius: 0 35px 35px 0;
        }

下面全过程叙述内圆的动漫全程(在其中右侧的粉色全程不必须动,右侧鲜红色一部分只必须更改z-index的值来更改显示信息的优先选择级,从而完成显示信息和掩藏的实际效果来相互配合填补左半边的圆。):

1、原始设定:  

 红左 z-index:3
 粉1  z-index:2

 红右 z-index:1
 粉2  z-index:0

实体模型图:

视觉效果实际效果图(忽视正中间的白线):

 

2.左侧鲜红色转动完180度时(逆时针转动因此是360→180→0)

实体模型图:

视觉效果实际效果图:

3.左侧鲜红色转完到0度时(此时上下两侧的鲜红色半圆被粉色遮盖)

实体模型图:

 

视觉效果实际效果图:

4.粉色半圆反复以前鲜红色半圆的动漫(即左侧粉色360→180→0)

实体模型图:

视觉效果实际效果图:

 

5.当左侧粉色转动到0度时,所有半圆返回了最开始始的情况,全部动漫即进行(在同样時间下外圈进行了2次的动漫)。

实体模型图:

 

视觉效果实际效果图:

 

动漫编码一部分

1、前半程为左侧鲜红色转动1周,后半程为粉色转动1周。动漫完成以下:  

/*左侧鲜红色进行第1圈的转动*/
@keyframes ltRound {
            0% {
                transform: rotate(360deg);
            }
            24.9% {
                z-index: 3;
            }
            25% {
                z-index: 1;
                transform: rotate(180deg);
            }
            50% {
                transform: rotate(0deg);
            }
            74.9% {
                z-index: 1;
            }
            75%, 100% {
                z-index: 3;
            }
        }

/*右侧鲜红色圆根据z-index来操纵显示信息和掩藏,从而做到在适度時间配上左半圆的实际效果*/
@keyframes rtRound {
            0%, 24.9% {
                z-index: 1;
            }
            25% {
                z-index: ⑶;
            }
            74.9% {
                z-index: ⑶;
            }
            75%, 100% {
                z-index: 1;
            }
        }

/*左侧粉色进行第2圈的转动*/
@keyframes ltMask {
            0%, 25%, 50% {
                transform: rotate(360deg);
            }
            75% {
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }

2.在所有编码未进行时,能够将动漫時间设大1点,这样便于观查,搞完了再设回去就OK了。  

3.因为动漫是匀速转变的,可是z-index的值不可以匀速转变,因此只能在某个很短期内内去更改z-index的值。这样才可以做到实际效果(忽然觉得这类完成仿佛也并不是很好)

小结

没做适配,在chrome中无出现异常,其他我就不太了解了  

源代码详细地址

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:CSS3的 fit 返回下一篇:详解CSS3中nth