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图片等扫光效果的实现

打赏 收藏
分享到: +

评论 9

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)
  • 网址 (选填)
  1. #8
    搬瓦工
    朋友 交换链接吗
    搬瓦工 2018-11-06 15:01:03回复 取消评论
  2. #7
    妻子出轨取证
    有特效会卡慢
  3. #6
    三合一收款码
    三合一收款码 词库 +1
  4. #5
    ijgames
    听张戈大侠说,这特效会导致cpu飙升的
    ijgames 2018-10-12 15:04:31回复 取消评论
  5. #4
    访客
    可以和贵站友情链接不?
    企业名录软件
    http://www.sosocom.cn
    访客 2018-10-06 19:45:53回复 取消评论
  6. #3
    盛京三四线
    现在还能认真做独立博客的已经不多了。
    盛京三四线 2018-09-25 18:13:42回复 取消评论
  7. #2
    高防服务器
    上看去很不错,改天来试一试。
    高防服务器 2018-09-17 09:44:01回复 取消评论
  8. #1
    智宇
    来看看,css3似乎很难
    智宇 2018-09-17 09:32:52回复 取消评论