纯CSS3实现图片/logo/文字扫光效果【演示/源码下载】

技术频道 - html技术

纯CSS3实现图片/logo/文字扫光效果【演示/源码下载】

作者:admin 时间:2022-3-26 10:56:52 浏览:

图片/文字扫光效果使用作图工具制作并不难，如果你有兴趣，可参考Firefox用蒙版组合实现文字扫光效果，不过本文要介绍的是，使用纯CSS3来实现图片/文字扫光效果，而实现起来代码也不多，非常容易修改使用。

我们先看看下面几张效果图：

下面是完整的HTML代码

<!DOCTYPE html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    .ilogo {
        position: relative;
        float: left;
        margin: 18px 0 0 5px;
        overflow: hidden;
    }
    .ititle {
        /* font-size: 50px; */ /**文字大小**/
}
    .ilogo:before {
        content: "";
        position: absolute;
        width: 1000px;
        height: 30px; /**白光的宽度，可根据实际调整**/
        background-image: linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-animation: searchLights 3s ease-in 1s infinite;
        -o-animation: searchLights 3s ease-in 1s infinite;
        animation: searchLights 3s ease-in 1s infinite; /**第一个数字参数控制扫光速度，数字越大越慢**/
    }

    @keyframes searchLights {
        0% {
            left: -200px;
            top: -300px;
        }
        100% {
            left: -160px;
            top: 800px;
        }
    }
</style>
</head>
<body>
    <div class="ilogo">
      <h1 class="ititle">
         <a href="#">
           <img src="logo.png"/>
         </a>
      </h1>
    </div>
</body>
</html>

demo download

代码解释

1、用 CSS3 伪元素 :bfore 或 :after 添加一个扫光层；

2、用 transform:rotate(-45deg) 旋转 45 度；

3、@keyframes 是控制扫光效果的起始位置(0%)和结束位置(100%)；

4、animation属性是定义动画的运动方式、运动时间等。示例中searchLights是动画集名称，3s是动画(扫光)时间，ease-in是运动方式(加速运动)，1s是动画延迟(执行)时间，infinite是无限循环运动。关于animation的动画属性，可以参考如下文章了解更多：

5、示例是图片扫光效果，如果你要实现文字扫光效果，那么把HTML里的图片标签<img ...>改为文字即可，你还可以通过定义h1的类.ititle的CSS属性，设置文字的大小、颜色等属性。