用纯CSS3的animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜

最新推荐文章于 2025-06-12 11:40:17 发布

墨墨博客

最新推荐文章于 2025-06-12 11:40:17 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css3 动画雪花飘落星星闪烁

本文链接：https://blog.youkuaiyun.com/wangweiscsdn/article/details/60584150

css3 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了几种使用CSS实现的动画效果，包括雪花飘落、星星闪烁、按钮缩放及图片倾斜波动等。通过这些示例，读者可以了解如何运用关键帧动画来创建动态视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

雪花飘落：

//雪花飘落
.snowDown {
    animation: snowDown 3s linear infinite normal;
    -webkit-animation: snowDown 3s linear infinite normal;
    position: relative;
}
@keyframes snowDown {
    from {
        opacity: 1;
        top: 0;
    }
    to {
        opacity: 0;
        top: 30em;
    }
}

星星闪烁：

.starFlick {
    animation: starFlick 0.8s ease-out infinite;
    -webkit-animation: starFlick 0.8s ease-out infinite;
}

@keyframes starFlick {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

按钮缩放：

.ds_Btn {
    animation: ds_Btn 1.5s ease-in-out infinite;
    -webkit-animation: ds_Btn 1.5s ease-in-out infinite;
}

@keyframes ds_Btn {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1.08, 1.08);
    }
    50% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1);
    }
}

.ql_Btn {
    animation: ql_Btn 1.5s ease-in-out infinite;
    -webkit-animation: ql_Btn 1.5s ease-in-out infinite;
}

@keyframes ql_Btn {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1.08, 1.08);
    }
}

图片倾斜波动：

.peopleImg {
    animation: peopleImg 1.5s linear infinite;
}

@keyframes peopleImg {
    0% {
        transform: skewY(0deg);
        -webkit-transform: skewY(0deg);
    }
    25% {
        transform: skewY(1deg);
        -webkit-transform: skewY(1deg);
    }
    50% {
        transform: skewY(0deg);
        -webkit-transform: skewY(0deg);
    }
    100% {
        transform: skewY(-1deg);
        -webkit-transform: skewY(-1deg);
    }
}