css实现亮光扫过特效【案例】

原创于 2025-08-03 15:27:52 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

前端笔记【JavaScript】同时被 3 个专栏收录

11 篇文章

订阅专栏

前端笔记【CSS】

8 篇文章

订阅专栏

前端必备笔记

4 篇文章

订阅专栏

在图片上出现白光条并划过，无限循环的模式

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>logo扫光效果</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style>
        .logo {
            width: 200px;
            height: 70px;
            display: flex;
            line-height: 70px;
            position: relative;
            overflow: hidden;
        }

        .logo img {
            width: 100%;
            height: 70px;
        }

        /**根据logo外div样式名称修改before前名称**/
        .logo:before {
            content: "";
            position: absolute;
            left: -10px;
            /**第一个数字参数控制扫光速度，数字越大越慢**/
            top: -460px;
            width: 200px;
            height: 10px;
            /**光标的宽度，可根据实际调整**/
            background-color: rgba(255, 255, 255, .5);
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-animation: searchLights 1s ease-in 1s infinite;
            -o-animation: searchLights 1s ease-in 1s infinite;
            animation: searchLights 1.5s ease-in 1s infinite;
            /**第一个数字参数控制扫光速度，数字越大越慢**/
        }

        @-webkit-keyframes searchLights {
            0% {
                left: -80px;
                top: 0;
            }

            to {
                left: 130px;
                top: 0px;
            }
        }

        @-o-keyframes searchLights {
            0% {
                left: -80px;
                top: 0;
            }

            to {
                left: 130px;
                top: 0px;
            }
        }

        @-moz-keyframes searchLights {
            0% {
                left: -80px;
                top: 0;
            }

            to {
                left: 130px;
                top: 0px;
            }
        }

        @keyframes searchLights {
            0% {
                left: -80px;
                top: 0;
            }

            to {
                left: 130px;
                top: 0px;
            }
        }
    </style>
</head>

<body>
    <div class="logo">
        <img src='https://t7.baidu.com/it/u=1699454570,2952675447&fm=190&app=131&size=f242,150&n=0&f=JPEG&fmt=auto?s=1BF6E816C8B47F800B7547C402007026&sec=1716224400&t=98a45f665487a7ddd2acbf73f5a79e72'>
    </div>
</body>

</html>