如何给网站LOGO加一层扫光效果(css实现)

  • 内容
  • 相关

       如何给网站LOGO加一层扫光效果,可以从物理层次和逻辑层次两个方面出发。所谓物理层次的修改就是直接通过ps对图片本身增加图层蒙版过帧的方式最后生成动态gif图片,需要有一定的ps功底且加载会增加网站负担。所以今天讲一下第二种方法,逻辑层次的改动css以达到LOGO扫光的效果。

  • 用 CSS3 伪元素 :bfore:after 添加一扫光层;
  • 现用 transform:rotate(-45deg) 旋转 45 度;
  • CSS 控制位置和动画时间等。

HTML 结构

/** logo扫光效果html添加**/
<div class="site-logo">
<a href="http://localhost/wordpress/" rel="home" itemprop="url">
<img src="http://logo.png" alt="logo" itemprop="logo" width="150" height="50">
</a>
</div>

CSS 代码

/**logo扫光效果CSS**/
.site-logo{
position: relative;
overflow: hidden;
float:left;
max-height: 50px;
}
.site-logo:before {
content: "";
position: absolute;
width: 150px;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: blink 1s ease-in 1s infinite;
animation: blink 1s ease-in 1s infinite;
}

@-webkit-keyframes blink {
from {left: 10px;top: 0;}
to {left: 320px;top: 0;}
}
@-o-keyframes blink {
from {left: 10px;top: 0;}
to {left: 320px;top: 0;}
}
@-moz-keyframes blink {
from {left: 10px;top: 0;}
to {left: 320px;top: 0;}
}
@keyframes blink {
from {left: -100px;top: 0;}
to {left: 320px;top: 0;}
}

 

本文标签:

版权声明:若无特殊注明,本文皆为《安三》原创,转载请保留文章出处。『鹦鹉搜索』

百度收录:百度已收录『查看详情』

本文链接:如何给网站LOGO加一层扫光效果(css实现) - https://www.15qq.cn/web_skill/1.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知