技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

纯CSS3:鼠标移上后(悬停)图片/文字出现扫光效果

作者:admin    时间:2022-3-26 12:34:25    浏览:

在前一文中,我们介绍了纯CSS3实现图片/logo/文字扫光效果,该扫光效果是加载后自动无限循环的,本文将更进一步,加上鼠标悬停事件,即是只有鼠标移上去后,图片/文字才出现扫光效果。

纯CSS3:鼠标移上后(悬停)图片/文字出现扫光效果

这个其实只是在原代码的基础上,稍微修改了一下CSS代码就可以实现。

完整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:hover: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 2s ease-in 1s infinite;
        -o-animation: searchLights 2s ease-in 1s infinite;
        animation: searchLights 2s ease-in 0s infinite; /**第一个数字参数控制扫光速度,数字越大越慢**/
    }

    @keyframes searchLights {
        0% {
            left: -200px;
            top: -300px;
        }
        100% {
            left: -160px;
            top: 800px;
        }
    }
</style>
</head>
<body>
    <div class="ilogo">
      <h1 class="ititle">
         <a href="#">
          卡卡测速网 webkaka.com
         </a>
      </h1>
    </div>
</body>
</html>

demodownload

代码解释

.ilogo:hover:before {} 是表示只有鼠标悬停时,才触发该(动画)事件。如果去掉:hover,变为.ilogo:hover:before {},那么就是自动无限循环运动。

示例是文字扫光效果,如果你要实现图片扫光效果,那么把HTML里的文字改为图片标签<img ...>即可。

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

相关文章

x
x
  • 站长推荐