本站同款logo飘闪效果设置教程

先来看看效果:

[lightbox title=”效果演示”][/lightbox]

设置教程:

1. 打开菜单这个选项[lightbox title=”步骤1″][/lightbox]
2. 打开额外css设置[lightbox title=”步骤2″][/lightbox]

直接在里面设置css即可

代码如下:

/* 先替换.logo为你主题的Logo选择器，比如.site-logo、.header-logo等 */
.logo {
  position: relative;
  overflow: hidden; /* 防止光效溢出 */
  display: inline-block;
}
.logo::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 12px;
  /* 半透明白色光效，可改rgba值调颜色和透明度 */
  background-color: rgba(255, 255, 255, 0.6);
  transform: rotate(-45deg); /* 光效倾斜角度 */
  /* 动画：1.2秒完成，延迟1秒循环播放 */
  animation: flashLight 1.2s ease-in 1s infinite;
}
/* 定义光效移动路径 */
@keyframes flashLight {
  0% {
    left: -100px;
    top: 0;
  }
  100% {
    left: 200px;
    top: 80px;
  }
}

在送一个呼吸效果

/* 替换.logo为你主题的Logo选择器 */
.logo {
  animation: fadeFlash 2s ease-in-out infinite;
}
/* 定义透明度动画 */
@keyframes fadeFlash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4; /* 闪暗时的透明度，值越小越暗 */
  }
  100% {
    opacity: 1;
  }
}