其他分享
首页 > 其他分享> > animation实现一个搜索扩散动效

animation实现一个搜索扩散动效

作者:互联网

上gif
在这里插入图片描述
简单分析一下
1.旋转的线,我们设置他的旋转位置从他的左下开始转动就ok了,再把最中的的圆层级设置高一点,就可以遮挡住线的一部分,看起来就是旋转的线在绕着中心的圆旋转。
2.闪现的点,控制百分比来实现展示顺序,比如我设置的3s要执行完一次闪烁。

上代码

html结构如下

<div class="no-warning" v-show="true">
                    //这是最外层圆形扩散
                    <div class="out-circle"></div>
                    <div class="w1">
                        //这是旋转的那个线
                        <div class="line"></div>
                        //这是跟着线走的阴影
                        <div class="cir-shadow">
                           //这是一层层圆
                            <div class="w2">
                                <div class="w3">
                                    <div class="w4">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    //这些都是闪烁的圆
                    <div class="circle1">
                        <div class="c1-1"></div>
                        <div class="c1-2"></div>
                        <div class="c1-3"></div>
                        <div class="c1-4"></div>
                    </div>
                    <div class="circle2">
                        <div class="c2-1"></div>
                        <div class="c2-2"></div>
                        <div class="c2-3"></div>
                        <div class="c2-4"></div>
                    </div>
                    <div class="circle3">
                        <div class="c3-1"></div>
                        <div class="c3-2"></div>
                        <div class="c3-3"></div>
                        <div class="c3-4"></div>
                    </div>
                </div>

css结构如下

    .no-warning {
            position: relative;
            overflow: hidden;
            width: 400px;
            height: 88%;
            background: #1E1E3A;
            border-radius: 18px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .no-warning .w1 {
            width: 250px;
            height: 250px;
            position: relative;
            /*border: 1px solid rgba(1, 234, 159, .1);*/
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .no-warning .out-circle {
            width: 350px;
            height: 350px;
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border: 1px solid rgba(1, 234, 159, .1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: cirlce 3s infinite;
            -webkit-animation: cirlce 3s infinite;

        }
        @keyframes cirlce {
            0% {
                transform: scale(0.0);
                opacity: 0.0;
            }


            30% {
                transform: scale(0.1);
                opacity: 0.0;
            }
            60% {
                transform: scale(1);
                opacity: 1;
            }
            90% {
                transform: scale(1);
                opacity: 0;
            }


            100% {
                transform: scale(0);
                opacity: 0.0;
            }
        }

        .no-warning .w2 {
            width: 190px;
            height: 190px;
            border: 1px solid rgba(1, 234, 159, .4);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            /*background: conic-gradient(from 0deg at 50% 50%, rgba(133, 229, 198, 0) -0.14deg, rgba(133, 229, 198, 0) 256.04deg, rgba(133, 229, 198, 0.5) 359.86deg, rgba(133, 229, 198, 0) 359.86deg, rgba(133, 229, 198, 0) 616.04deg);*/
            /*animation-duration: 3s; !* 动画时间 *!*/
            /*animation-name: rotateLine; !* 关键帧名字 *!*/
            /*animation-timing-function: linear; !* 动画时间函数 *!*/
            /*animation-iteration-count: infinite; !* 让动画永远执行下去 *!*/

        }

        .no-warning .cir-shadow {
            width: 190px;
            height: 190px;
            border-radius: 50%;
            background: conic-gradient(from 0deg at 50% 50%, rgba(133, 229, 198, 0) -0.14deg, rgba(133, 229, 198, 0) 256.04deg, rgba(133, 229, 198, 0.5) 359.86deg, rgba(133, 229, 198, 0) 359.86deg, rgba(133, 229, 198, 0) 616.04deg);
            animation-duration: 3s; /* 动画时间 */
            animation-name: rotateLine; /* 关键帧名字 */
            animation-timing-function: linear; /* 动画时间函数 */
            animation-iteration-count: infinite; /* 让动画永远执行下去 */
        }

        .no-warning .w3 {
            width: 130px;
            height: 130px;
            border: 1px solid rgba(1, 234, 159, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .no-warning .w4 {
            width: 70px;
            height: 70px;
            border: 1px solid #85E5C6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1E1E3A;
            z-index: 1;

        }

        .no-warning .line {
            width: 2px;
            height: 94px;
            background-color: #01EA9F;
            position: absolute;
            /*left: 50%;*/
            top: 31.5px;
            transform-origin: bottom left; /* 已左下角为中心旋转 */
            animation-duration: 3s; /* 动画时间 */
            animation-name: rotateLine; /* 关键帧名字 */
            animation-timing-function: linear; /* 动画时间函数 */
            animation-iteration-count: infinite; /* 让动画永远执行下去 */
        }

        @keyframes rotateLine {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .no-warning .circle1 {
            position: absolute;
            left: 277px;
            top: 40%;
            width: 35px;
            height: 35px;
        }

        .no-warning .circle1 .c1-1 {
            width: 7px;
            height: 7px;
            background: #85E5C6;
            border-radius: 50%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            margin: auto;
            animation: appear 3s infinite;
            -webkit-animation: appear 3s infinite;
            /*-webkit-animation-delay: 0.5s;*/
            /*animation-delay: 0.5s;*/
        }

        @keyframes appear {
            0% {
                transform: scale(0.0);
                opacity: 0.0;
            }


            30% {
                transform: scale(0.0);
                opacity: 0.0;
            }
            50% {
                transform: scale(1);
                opacity: 1;
            }
            70% {
                transform: scale(0);
                opacity: 0;
            }


            100% {
                transform: scale(0);
                opacity: 0.0;
            }
        }

        .no-warning .circle1 .c1-2 {
            width: 23px;
            height: 23px;
            position: absolute;
            border-radius: 50%;
            border: 4px solid rgba(133, 229, 198, .1);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            margin: auto;
            -webkit-animation: appear2 3s infinite;
            animation: appear2 3s infinite;
            /*-moz-animation-delay: 0.5s; !* Firefox *!*/
            /*-webkit-animation-delay: 0.5s; !* Safari 和 Chrome *!*/
            /*animation-delay: 0.5s infinite;*/
        }

        @keyframes appear2 {
            0% {
                transform: scale(0.0);
                opacity: 0.0;
            }


            30% {
                transform: scale(0);
                opacity: 0;
            }
            50% {
                transform: scale(1);
                opacity: 1;
            }
            70% {
                transform: scale(1);
                opacity: 0;
            }


            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        .no-warning .circle1 .c1-3 {
            width: 35px;
            height: 35px;
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(133, 229, 198, .11);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            margin: auto;
            animation: appear2 3s ease-in infinite;
        }

        .no-warning .circle1 .c1-4 {
            width: 35px;
            height: 35px;
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(133, 229, 198, .11);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            margin: auto;
            -webkit-animation: appear3 3s ease-in infinite;
            animation: appear3 3s ease-in infinite;
        }

        @keyframes appear3 {
            0% {
                transform: scale(0.0);
                opacity: 0.0;
            }
            10% {
                transform: scale(0.0);
                opacity: 0.0;
            }
            30% {
                transform: scale(1);
                opacity: 1;
            }
            40% {
                transform: scale(1);
                opacity: 0;
            }

            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        /*第二个查找圆点*/
        .no-warning .circle2 {
            position: absolute;
            left: 64px;
            top: 20%;
            width: 19px;
            height: 19px;
        }

        .no-warning .circle2 .c2-1 {
            width: 3px;
            height: 3px;
            background: #85E5C6;
            border-radius: 50%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            margin: auto;
            animation: appear2-1 3s infinite;
            -webkit-animation: appear2-1 3s infinite;
            /*-webkit-animation-delay: 0.5s;*/
            /*animation-delay: 0.5s;*/
        }

        @keyframes appear2-1 {
            0% {
                transform: scale(0.0);
                opacity: 0.0;
            }


            20% {
                transform: scale(0.0);
                opacity: 0.0;
            }
            40% {
                transform: scale(1);
                opacity: 1;
            }
            60% {
                transform: scale(0);
                opacity: 0;
            }


            100% {
                transform: scale(0);
                opacity: 0.0;
            }
        }

        .no-warning .circle2 .c2-2 {
            width: 11px;
            height: 11px;
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(133, 229, 198, .1);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            margin: auto;
            -webkit-animation: appear2-2 3s infinite;
            animation: appear2-2 3s infinite;
            /*-moz-animation-delay: 0.5s; !* Firefox *!*/
            /*-webkit-animation-delay: 0.5s; !* Safari 和 Chrome *!*/
            /*animation-delay: 0.5s infinite;*/
        }

        @keyframes appear2-2 {
            0% {
                transform: scale(0.0);
                opacity: 0.0;
            }


            20% {
                transform: scale(0);
                opacity: 0;
            }
            40% {
                transform: scale(1);
                opacity: 1;
            }
            60% {
                transform: scale(1);
                opacity: 0;
            }


            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        .no-warning .circle2 .c2-3 {
            width: 19px;
            height: 19px;
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(133, 229, 198, .11);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            margin: auto;
            animation: appear2-2 3s ease-in infinite;
        }

        .no-warning .circle2 .c2-4 {
            width: 19px;
            height: 19px;
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(133, 229, 198, .11);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            margin: auto;
            -webkit-animation: appear2-3 3s ease-in infinite;
            animation: appear2-3 3s ease-in infinite;
        }

        @keyframes appear2-3 {
            0% {
                transform: scale(0.0);
                opacity: 0.0;
            }

            20% {
                transform: scale(1);
                opacity: 1;
            }
            40% {
                transform: scale(1);
                opacity: 0;
            }

            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        /*第三个查找圆点*/
        .no-warning .circle3 {
            position: absolute;
            left: 52px;
            top: 80%;
            width: 31px;
            height: 31px;
        }

        .no-warning .circle3 .c3-1 {
            width: 5px;
            height: 5px;
            background: #85E5C6;
            border-radius: 50%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            margin: auto;
            animation: appear3-1 3s infinite;
            -webkit-animation: appear3-1 3s infinite;
            /*-webkit-animation-delay: 0.5s;*/
            /*animation-delay: 0.5s;*/
        }

        @keyframes appear3-1 {
            0% {
                transform: scale(0.0);
                opacity: 0.0;
            }


            40% {
                transform: scale(0.0);
                opacity: 0.0;
            }
            60% {
                transform: scale(1);
                opacity: 1;
            }
            80% {
                transform: scale(0);
                opacity: 0;
            }


            100% {
                transform: scale(0);
                opacity: 0.0;
            }
        }

        .no-warning .circle3 .c3-2 {
            width: 15.11px;
            height: 15.11px;
            position: absolute;
            border-radius: 50%;
            border: 2.62857px solid rgba(133, 229, 198, .1);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            margin: auto;
            -webkit-animation: appear3-2 3s infinite;
            animation: appear3-2 3s infinite;
            /*-moz-animation-delay: 0.5s; !* Firefox *!*/
            /*-webkit-animation-delay: 0.5s; !* Safari 和 Chrome *!*/
            /*animation-delay: 0.5s infinite;*/
        }

        @keyframes appear3-2 {
            0% {
                transform: scale(0.0);
                opacity: 0.0;
            }


            40% {
                transform: scale(0);
                opacity: 0;
            }
            60% {
                transform: scale(1);
                opacity: 1;
            }
            80% {
                transform: scale(1);
                opacity: 0;
            }


            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        .no-warning .circle3 .c3-3 {
            width: 31px;
            height: 31px;
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(133, 229, 198, .11);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            margin: auto;
            animation: appear3-2 3s ease-in infinite;
        }

        .no-warning .circle3 .c3-4 {
            width: 31px;
            height: 31px;
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(133, 229, 198, .11);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            margin: auto;
            -webkit-animation: 3s ease-in infinite;
            animation: appear3-3 3s ease-in infinite;
        }

        @keyframes appear3-3 {
            0% {
                transform: scale(0.0);
                opacity: 0.0;
            }
            20% {
                transform: scale(0.0);
                opacity: 0.0;
            }
            40% {
                transform: scale(1);
                opacity: 1;
            }
            60% {
                transform: scale(1);
                opacity: 0;
            }

            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

标签:opacity,scale,0.0,transform,动效,animation,扩散,border
来源: https://blog.csdn.net/qq_42177478/article/details/120334730