介绍

利用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);
    }
}

分享到：

打赏