Logo图片等扫光效果的实现

 html代码如下:

<div class="ilogo">
<h1 class="ititle">
<a href="http://www.bs-st.com/">
<img src="http://www.bs-st.com/logo.png" title="礼堂椅" alt="礼堂椅" rel="home">
<span class="iname">礼堂椅</span></a></h1>
</div>


css代码如下:


.ilogo, .ilogos {
    position: relative;
    float: left;
    margin: 18px 0 0 5px;
    width: 250px;
    max-height: 50px;
    overflow: hidden;
    transition-duration: .5s;
}
.ilogo:before {
    content: "";
    position: absolute;
    left: -665px;
    top: -460px;
    width: 250px;
    height: 15px;  /**光标的宽度,可根据实际调整**/
    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 1s ease-in 1s infinite;  /**第一个数字参数控制扫光速度,数字越大越慢**/
}


Logo扫光效果实现说明:


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


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


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


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


未经允许不得转载:大谋菠萝格 » Logo图片等扫光效果的实现

打赏 收藏
分享到: +