通过css3给网站LOGO添加扫光效果

释放双眼,带上耳机,听听看~!

Logo扫光效果实现方式:

  1. 用 CSS3 伪元素 :bfore 或 :after 添加一扫光层;
  2. 用 transform:rotate(-45deg) 旋转 45 度;
  3. @ keyframes 规则来控制扫光效果的起始位置和结束位置;
  4. 用 CSS 控制位置和动画时间等。

操作方法:

例:搜狗浏览器操作:鼠标移到你的网站logo处,右键选择审查元素,找到所在div样式名称

通过css3给网站LOGO添加扫光效果

谷歌浏览器操作:鼠标移到你的网站logo处,右键选择检查,找到所在div样式名称:

通过css3给网站LOGO添加扫光效果

扫光效果的代码:

/**logo扫光效果CSS**/
.site-title:before{  /**根据logo外div样式名称修改before前名称**/
    content:"";
    position: absolute;
    left: -665px; 
    top: -460px;
    width: 200px;
    height: 10px; /**光标的宽度,可根据实际调整**/
    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 1.5s ease-in 1s infinite;/**第一个数字参数控制扫光速度,数字越大越慢**/
}
@-webkit-keyframes searchLights {
    0% { left: -100px; top: 0; }
    to { left: 120px; top: 100px; }
}
@-o-keyframes searchLights {
    0% { left: -100px; top: 0; }
    to { left: 120px; top: 100px; }
}
@-moz-keyframes searchLights {
    0% { left: -100px; top: 0; }
    to { left: 120px; top: 100px; }
}
@keyframes searchLights {
    0% { left: -100px; top: 0; }
    to { left: 120px; top: 100px; }
}
/*END*/

需要修改的地方:

第2行的site-title需要修改:.site-title:before{ /**根据logo外div样式名称修改before前名称**/

如果你的logo所处的div的class是cslogo,如下:

看到的class = “cslogo”,然后第2段则把css名称修改为:

.cslogo:before{  /**根据logo外div样式名称修改before前名称**/

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新消息 消息中心
有新私信 私信列表
搜索