前端光影流光效果特效 CSS3

最新推荐文章于 2024-06-03 16:33:41 发布

一个喜欢玩胶的码农

最新推荐文章于 2024-06-03 16:33:41 发布

阅读量595

点赞数 7

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/m0_37946517/article/details/136295995

版权

header-line {
            position: relative;
            display: block;
            width: 200px;
            scale: 0.4;
            animation: bordeLists infinite 3.5s;

            .header-line1 {
                position: absolute;
                right: 0;
                top: 20px;
                display: block;
                width: 477.8px;
                height: 6.6px;
                background-image: linear-gradient(270deg,
                        rgba(255, 255, 255, 0) 0%,
                        #ffffff 21%,
                        rgba(255, 255, 255, 0) 100%);
                border-radius: 3px;
                z-index: 5;
            }

            .header-line2 {
                position: absolute;
                right: 0;
                top: 20px;
                display: block;
                width: 547.8px;
                height: 10px;
                background-image: linear-gradient(90deg, rgba(25, 40, 137, 0) 0%, rgba(0, 203, 255, 100) 100%);
                z-index: 4;
                border-radius: 5px;
                filter: blur(3px);
            }

            .header-line2::before {
                content: '';
                position: absolute;
                left: -5px;
                right: -5px;
                top: -5px;
                bottom: -5px;
            }

            .header-line3 {
                position: absolute;
                right: 0;
                display: block;
                width: 343.2px;
                height: 44px;
                opacity: 0.53;
                background-image: linear-gradient(270deg,
                        rgba(190, 248, 255, 0) 0%,
                        #cee8ff 21%,
                        rgba(255, 255, 255, 0.02) 100%);
                border-radius: 3px;
                z-index: 3;
                filter: blur(10px);
            }
        }

        @keyframes bordeLists {
            0% {
                // background-color:#4ec7f3;
                left: 30px;
                top: 52px;
            }

            100% {
                top: 52px;
                left: 100%;
                opacity: 0.1;
            }
        }

        img {
            width: 100%;
            height: 100%;
        }

        .rightTime {
            position: absolute;
            top: 24px;
            font-family: HYQiHei;
            font-size: 16px;
            line-height: 24px;
            color: #99AECA;
            letter-spacing: 0;
            font-weight: 400;
            display: flex;
            align-items: center;
        }
    }