css闪光效果

最新推荐文章于 2024-08-20 13:54:32 发布

阿川阿川

最新推荐文章于 2024-08-20 13:54:32 发布

阅读量779

点赞数

分类专栏： style 文章标签： css炫光效果

本文链接：https://blog.csdn.net/tangkthh/article/details/103871681

版权

style 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

.swiper-slide.slide-2:before {
    content: "";
    width: 1200px;
    height: 300px;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    background: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    background: -o-linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    background: -moz-linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    animation: shanguang 3s infinite;
    -webkit-animation: shanguang 3s infinite;
}

@keyframes shanguang {
    0% {
        left: -800px;
        top: 0;
    }
    50% {
        left: 600px;
        top: 600px;
    }

    100% {
        left: 600px;
        top: 600px;
    }
}

@-webkit-keyframes shanguang {
    0% {
        left: -800px;
        top: 0;
    }

    25% {
        left: 600px;
        top: 600px;
    }

    100% {
        left: 600px;
        top: 600px;
    }
}