Typecho-Joe主题参照WordPress-DUX主题实现Logo扫光效果

前言： 博客的Logo是不是感觉平平无奇？如果想要不一样可以加上扫光效果，只需要简单的几步即可实现。（和DUX主题一样）

.joe_header__above-logo{
    overflow:hidden;
    display: block;
}
/* 这一步是为了弹性布局，照着写就行啦，不然手机端出错。 */
.joe_header__above-logo:before {
  content: "";
  position: absolute;
  top: -50px;
  left: -15px;
  width: 250px;
  height: 12px;/**光标的宽度，可根据实际调整（建议默认）**/
  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: flashlights 1s ease-in 1s infinite;
  -o-animation: flashlights 1s ease-in 1s infinite;
  animation: flashlights 1.5s ease-in 1s infinite;/**1.5数字参数控制扫光速度，数字越大越慢，默认也是可以的。**/
}
@-webkit-keyframes flashlights {
  0% { left: -100px; top: 0; }
  to { left: 120px; top: 100px; }
}
@-o-keyframes flashlights {
  0% { left: -100px; top: 0; }
  to { left: 120px; top: 100px; }
}
@-moz-keyframes flashlights {
  0% { left: -100px; top: 0; }
  to { left: 120px; top: 100px; }
}
@keyframes flashlights {
  0% { left: -100px; top: 0; }
  to { left: 120px; top: 100px; }
}
/* 博主实际测试后有效，请放心使用，效果观赏www.imkee.com */

复制上方的代码，找到博客程序文件，进入usr/themes/JoeJoe主题的文件打开joe文件，找到assets/css文件夹进去新建一个文件，命名为joe.logo.css当然你自己想一个也行，但是必须是以css后缀结尾的文件，新建好之后，我们把代码粘贴保存即可。

CSS文件上传路径： usr/themes/Joe/assets/css/joe.logo.css

引入CSS文件

<!-- 扫光引入开始 -->
<link rel="stylesheet" href="这里是路径：/usr/themes/Joe/assets/css/joe.logo.css">
<!-- 扫光引入结束 -->

将上面的代码放入head里面，Joe主题的是在后台全局设置里面的自定义head那里填入link引入代码即可，路径不要有文字哦。可以是https和http开头的链接，但是不能有文字开头的哦。

扫光效果实现

完成上述的几个步骤之后我们的Logo扫光就添加完成啦，要看效果的话请访问： Kee's Note

写在最后

新建CSS文件完成代码的填写，引入填写的代码，引入的代码的代码就是使用link进行的，将代码引入到网站的head里面进行加载然后就可以看到效果啦。
当然这个css照样可以放到cdn云存储，到时候复制好cdn的链接link引入即可。

目录

创建css文件

引入CSS文件

扫光效果实现

写在最后

评论