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

🌙
手机阅读
本文目录结构
axihe

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

提醒用户去分享;

如下:

.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;
    }
}

~~~~


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang