前端代码
<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
» 本文链接地址:https://blog.mydns.vip/944.html
最新评论
麻烦发下检测工具
让我下载
非常好