CSS-实现animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜效果

CSS-实现animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜效果

介绍

利用CSS3分别实现animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜效果。

以下效果可以直接应用于元素控件中

雪花飘落效果

.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);
    }
}
温馨提示:本文最后更新于2022-05-12 20:38:17,某些文章具有时效性,若有错误或已失效,请在下方留言或联系乡野博文
您阅读这篇文章共花了: 0小时00分00秒
-----本页内容已结束,喜欢请分享!-----
© 版权声明
THE END
喜欢本站内容,请点【点赞】【分享】和【收藏】~
点赞6 分享
评论 抢沙发

请登录后发表评论