一些动画效果

最新推荐文章于 2025-02-26 13:41:48 发布

原创最新推荐文章于 2025-02-26 13:41:48 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了使用CSS @keyframes实现各种动画效果的方法，包括弹跳、背景渐变和位移动画，为网页增添生动视觉效果。

@keyframes bounceInRight {
    0% {
        margin-left: -15px;
        opacity: 0;
    }

    60% {
        margin-left: -1px;
        opacity: 0.5;
    }

    80% {
        margin-left: -3px;
        opacity: 0.8;
    }

    100% {
        margin-left: -4px;
        opacity: 1;
    }
}

@keyframes shandong {
    0% {
        background: url("../images/bg03submenu.png") 1px 1px no-repeat #a345f0;
    }

    100% {
        background: url("../images/bg03submenu.png") 1px 1px no-repeat #0050b3;
        ;
    }
}

@keyframes masked-animation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
}