知更鸟wordpress主题logo扫光特效css样式

前端代码

<div class="logo-site">
<h1 class="site-title">
<a href="https://www.srsdfdsh.top/">
<img src="https://www.srsdfdsh.top/wp-content/themes/begin/img/logo.png" title="技术搬运工" alt="技术搬运工" rel="home">
<span class="site-name">技术搬运工</span></a>
</h1>
</div>

后端样式

.logo-site, .logo-sites {
  position: relative;
  float: left;
  margin: 18px 0 0 10px;
  width: 220px;
  max-height: 50px;
  overflow: hidden;
  transition-duration: .5s;
}

.logo-site img, .logo-sites img {
  width: 220px;
  max-height: 50px;
}

@media screen and (max-width: 480px) {
  .logo-site, .logo-sites {
    width: 140px;
  }
}

@media screen and (min-width: 900px) {
  .logo-site:before {
    content: "";
    position: absolute;
    left: -665px;
    top: -460px;
    width: 220px;
    height: 15px;
    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 1s 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;
  }
}

更详细的介绍可以查看我另外一篇文章：https://blog.mydns.vip/928.html

» 站长码字辛苦，有用点个赞吧，也可以打个赏
» 若转载请保留本文转自：豫章小站 » 《知更鸟wordpress主题logo扫光特效css样式》

» 本文链接地址：https://blog.mydns.vip/944.html

» 如果喜欢可以： 点此订阅本站 有需要帮助，可以联系小站