阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    CSS3 箭头上升,模拟缓慢增长的写法

    做了类似引导分享的一个箭头;

    提醒用户去分享;

    如下:

    .share-prompt-wrap .share-prompt-arrow{
        width: 0.573rem;
        -webkit-animation-duration:3s;
        animation-duration:3s;
        -webkit-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
        -webkit-animation-name:share-prompt-animation;
        animation-name:share-prompt-animation;
        -webkit-animation-timing-function:ease-in-out;
        animation-timing-function:ease-in-out;
    }
    

    动画部分如下

    @-webkit-keyframes share-prompt-animation {
        0% {
            -webkit-transform: none;
            transform: none;
        }
        50% {
            -webkit-transform: none;
            transform: none;
        }
        61% {
            -webkit-transform: translate3d(0, 0, 0) ;
            transform: translate3d(0, 0, 0) ;
        }
        70% {
            -webkit-transform:  translate3d(150%, -150%, 0) ;
            transform: translate3d(150%, -150%, 0) ;
        }
        71% {
            -webkit-transform: translate3d(300%, 0, 0);
            transform: translate3d(300%, 0, 0);
        }
        72% {
            -webkit-transform: translate3d(0, 300%, 0);
            transform: translate3d(0, 300%, 0);
        }
        73% {
            -webkit-transform: translate3d(-120%, 120%, 0);
            transform: translate3d(-120%, 120%, 0) ;
        }
        100% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0) ;
        }
    }
    @keyframes share-prompt-animation {
        0% {
            -webkit-transform: none;
            transform: none;
        }
        50% {
            -webkit-transform: none;
            transform: none;
        }
        61% {
            -webkit-transform: translate3d(0, 0, 0) ;
            transform: translate3d(0, 0, 0) ;
        }
        70% {
            -webkit-transform:  translate3d(150%, -150%, 0) ;
            transform: translate3d(150%, -150%, 0) ;
        }
        71% {
            -webkit-transform: translate3d(300%, 0, 0);
            transform: translate3d(300%, 0, 0);
        }
        72% {
            -webkit-transform: translate3d(0, 300%, 0);
            transform: translate3d(0, 300%, 0);
        }
        73% {
            -webkit-transform: translate3d(-120%, 120%, 0);
            transform: translate3d(-120%, 120%, 0) ;
        }
        100% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0) ;
        }
    
    }
    

    这样就可以了;

    ****扩展

    顺便记录下,摇摆的 CSS 写法;类似手机摇一摇的效果

    .shake-welfare {
        -webkit-animation-duration:1.5s;
        animation-duration:1.5s;
        -webkit-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
        -webkit-animation-name:get-welfare-animation;
        animation-name:get-welfare-animation;
        -webkit-animation-timing-function:ease-in-out;
        animation-timing-function:ease-in-out;
        /*-webkit-transition-delay:2s;
        transition-delay:2s;*/
    }
    

    然后就是 CSS 的写法

    @-webkit-keyframes get-welfare-animation {
        0% {
            -webkit-transform: none;
            transform: none;
        }
        66% {
            -webkit-transform: none;
            transform: none;
        }
    
        69% {
            -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        }
    
        72% {
            -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        }
    
        75% {
            -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        }
    
        78% {
            -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        }
    
        81% {
            -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        }
        84% {
            -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        }
    
        87% {
            -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        }
    
        90% {
            -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        }
    
        93% {
            -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        }
    
        95% {
            -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        }
    
        100% {
            -webkit-transform: none;
            transform: none;
        }
    }
    @keyframes get-welfare-animation {
        0% {
            -webkit-transform: none;
            transform: none;
        }
        66% {
            -webkit-transform: none;
            transform: none;
        }
        69% {
            -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        }
    
        72% {
            -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        }
    
        75% {
            -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        }
    
        78% {
            -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        }
    
        81% {
            -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        }
        84% {
            -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        }
    
        87% {
            -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        }
    
        90% {
            -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        }
    
        93% {
            -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        }
    
        95% {
            -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        }
    
        100% {
            -webkit-transform: none;
            transform: none;
        }
    }
    
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    本文目录
    目录