专栏首页优启梦使用:before选择器给你的Logo添加扫光特效
原创

使用:before选择器给你的Logo添加扫光特效

[摘要]

在知更鸟大神的网站看到他的Begin主题Logo有扫光特效,看起来还是比较炫的。研究了一下,发现是用:before选择器实现的扫光效果,现在把代码甩出来,觉得好看的可以在自己的站点上试一试。

在知更鸟大神的网站看到他的Begin主题Logo有扫光特效,看起来还是比较炫的。研究了一下,发现是用:before选择器实现的扫光效果,现在把代码甩出来,觉得好看的可以在自己的站点上试一试。

Logo扫光方法

方法很简单,只需要添加一段css代码即可,如果你是WordPress程序,那么请在当前主题css文件最下方添加如下代码,需注意:代码中的#logo:before,根据自己的实际情况修改为当前主题的Logo元素选择器名称。

/**logo扫光效果CSS**/
.logo: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; }
}

当然,此效果也适用于其他建站程序,其仅仅是一个CSS效果而已。

:before 选择器介绍

:before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。

所有主流浏览器都支持:before选择器。

注意: before在IE8中运行,必须声明 <!DOCTYPE> 。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • emlog后台登录失败邮件通知

    前面说到emlog后台登录参数加密,下面我们说说如何给emlog添加后台登录失败邮件通知的功能,本次我们需要用到mail函数,当然也就是需要25端口发信,如果是...

    墨渊
  • 给网站添加好看的底部功能按钮

    在一些博客手机版会看到底部有些按键很好看! 跟下面图片的一样,把代码自行添加到合适位置就可以了!。 只在手机版显示 ? <style type="text/cs...

    墨渊
  • 利用Nginx反向代理绕过腾讯云黑洞隔离

    我这里备用机用的是windows phpstudy nginx 环境,其他环境请自行测试!

    墨渊
  • LeetCode 716. 最大栈(双栈 / list+map)

    设计一个最大栈,支持 push、pop、top、peekMax 和 popMax 操作。

    Michael阿明
  • 面试:说说Java反射中获取Class对象三种方式的区别?

    在上篇文章《一篇文章全面了解Java反射机制》中我们学习了Java反射机制的基本使用,留心的朋友可能已经注意到了,在文中提到了三种获取Class对象的方法。

    程序新视界
  • 剑指offer--包含min函数的栈

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数。

    AI那点小事
  • 部署高可用 kubernetes 集群

    kubernetes 虽然具有故障自愈和容错能力,但某些组件的异常会导致整个集群不可用,生产环境中将其部署为高可用还是非常有必要的,本文会介绍如何构建一个高可用...

    田飞雨
  • java语言反射的概述以及三种获取字节码文件对应的Class类型的对象的方式

    反射的概述:   JAVA反射机制是在运行状态中,   对于任意一个类,都能够知道这个类的所有属性和方法(动态获取的信息);   对于任意一个对象,...

    黑泽君
  • VRTK插件总是报:Failed to load IVRRenderModels interface version的问题解决

    1.Assertion failed on expression: 'IsMatrixValid(matrix)' && Unity SteamVR: Fai...

    LittleU
  • Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

    Jetpropelledsnake21

扫码关注云+社区

领取腾讯云代金券