CSS-实现animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜效果-路羽博客-第1张图片

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

CSS-实现animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜效果-路羽博客-第2张图片

作者: 路羽

原创资源分享博客

CSS-实现animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜效果-路羽博客-第3张图片微信小程序

路羽博客 资源分享www.luyuz.cn

       

介绍

利用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);
    }
}
分享到:
打赏
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽博客
原文地址: 《CSS-实现animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜效果》 发布于2022-3-1

评论

          
       
切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

路羽博客验证码