w3h5

纯CSS实现Logo图片扫光效果

纯CSS实现图片扫光效果,效果如下:

扫光.png 纯CSS实现Logo图片扫光效果 HTML笔记

html代码如下:

<div class="ilogo">
    <h1 class="ititle">
        <a href="">
            <img src="timg.jpg">
        </a>
    </h1>
</div>

CSS代码:

<style>
    .ilogo {
        position: relative;
        float: left;
        margin: 18px 0 0 5px;
        overflow: hidden;
        transition-duration: 5s;/**动画时间**/
    }

    .ilogo:before {
        content: "";
        position: absolute;
        width: 1000px;
        height: 20px; /**光标的宽度,可根据实际调整**/
        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 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>

图片扫光效果实现说明:

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

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

3、@ keyframes 规则来控制扫光效果的起始位置和结束位置;

4、用 CSS 控制位置和动画时间等。

赞 (0)
分享到: +More |

评论 沙发

换个身份