CSS实现图片光影滑过实例

本文最后更新于：2024年12月14日下午

CSS实现图片光影滑过实例

在网页设计中，要使网页看起来具有动态感更炫酷，我们最常用到的就是使用css动画实例来为网页增加一些动态效果，今天记录一下如何在网页图片中添加光影滑过的效果

代码

<!doctype html>
<html>
<head>
<meta set="utf-8">
<title>CSS实现图片光影滑过实例</title>
<style>
    .ilogo {
        position: relative;
        float: left;
        margin: 18px 0 0 5px;
        overflow: hidden;
        transition-duration: 5s;/**动画时间**/
    }
    .ilogo:before {
        content: "";
        position: absolute;
        width: 1000px;
        height: 80px; /**光标的宽度，可根据实际调整**/
        background-image: linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent);
        -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 1s 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="/pic/item/37cd98d109df1.jpg">
        </a>
    </h1>
</div>
</div> 
 
</body>
</html>