找回密码
 立即注册
展开
长沙SEO 长沙SEO首页 长沙网站优化 查看内容

专注SEO 通过css代码给网站logo添加扫光特效

admin 2018-1-14 14:33 349人围观 长沙网站优化

专注SEO,多年SEO工作经验,多个网站关键词排名指导成功案例。SEO学习整个流程:SEO入门→网站建设→网站排名实操→SEO思维(网站运营分析) 学习SEO,思考和实践操作非常重要!带着问题来学习,会让你学得更快更好 ...
 专注SEO,多年SEO工作经验,多个网站关键词排名指导成功案例。
SEO学习整个流程:SEO入门→网站建设→网站排名实操→SEO思维(网站运营分析)
    学习SEO,思考和实践操作非常重要!带着问题来学习,会让你学得更快更好!
①是什么(What) ②为什么(Why)
③怎么做(How) ④在哪里(Where)
网站实现网站Logo扫光特效之后就有很多网站也效仿起来添加Logo扫光效果了,这个效果看起来还是比较炫的。我们可以通过“右键-检查(审查元素)” 查看logo图片的相关代码

  html代码如下:
<div class="logo-site">
<h1 class="site-title">
<a href="http://www.csseo.cc/">
<img src="http://csseo.cc/logo.png" title="长沙seo" alt="长沙seo" rel="home">
<span class="site-name">长沙seo</span></a></h1>
</div>

css代码如下:

.logo-site, .logo-sites {
    position: relative;
    float: left;
    margin: 18px 0 0 5px;
    width: 250px;
    max-height: 50px;
    overflow: hidden;
    transition-duration: .5s;
}
.logo-site:before {
    content: "";
    position: absolute;
    left: -665px;
    top: -460px;
    width: 250px;
    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;  /**第一个数字参数控制扫光速度,数字越大越慢**/
}

Logo扫光效果实现说明:

1、用 CSS3 伪元素 :bfore 或 :after 添加一扫光层;

2、用 transform:rotate(-45deg) 旋转 45 度;

3、@ keyframes 规则来控制扫光效果的起始位置和结束位置;

4、用 CSS 控制位置和动画时间等。

那么,如何修改css属性,为自己网站的logo添加扫光特效呢?
二维码
欢迎关注,微信 【www_csseo_cc】