web前端-简单常用css3动画

最新推荐文章于 2022-05-25 21:20:30 发布

Yozo椰子

最新推荐文章于 2022-05-25 21:20:30 发布

阅读量136

点赞数

分类专栏： web前端文章标签： CSS动画按钮动画文字抖动心跳效果网页交互

本文链接：https://blog.csdn.net/lin875859873/article/details/118968057

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

上下飘动：


.topToBottom {
    animation: topToBottom 1s ease-in-out 0.4s infinite alternate;
}

@keyframes topToBottom {
    100% {
        transform: translate(0, -.1rem);
    }
}

按钮抖动（吸引注意力）：

.shake {
    animation: shake 3s linear infinite;
}

@keyframes shake {
    0% {
        transform: scale(1);
        transform: scale3d(1, 1, 1)
    }

    3% {
        transform: scale(.9) rotate(-6deg)
    }

    9%,
    15%,
    21%,
    27%,
    33% {
        transform: scale(1) rotate(6deg)
    }

    6%,
    12%,
    18%,
    24%,
    30%,
    36% {
        transform: scale(1) rotate(-6deg)
    }

    50%,
    100% {
        transform: scale(1)
    }
}

显示后抖动下：

.text_up {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: text_up 4s linear infinite;
}

@-webkit-keyframes text_up {

    0%,
    20% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    30%,
    47%,
    53%,
    90% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    49% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        opacity: 1;
    }

    50% {
        -webkit-transform: scale3d(1.25, .75, 1);
        opacity: 1;
    }

    51% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.1);
        opacity: 0;
    }
}

心跳按钮：

.pulse {
    animation: pulse 1s linear infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    90% {
        transform: scale(0.95);
    }

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