如何让Joe主题实现logo扫光效果

如何让Joe主题实现logo扫光效果

蓝逸轩
2022-06-18 / 0 评论 / 86 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年06月18日,已超过1047天没有更新,若内容或图片失效,请留言反馈。

效果图

ly8dgsk8.png

登录网站后台 - 主题设置 - 全局设置 - 自定义CSS(非必填),将下列代码放置其中并保存设置

.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; }
}
0

评论

博主关闭了所有页面的评论