雪花飘落:

//雪花飘落
.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);
    }
}






Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐