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

SEO技巧4,9723

知更鸟的Begin主题实现网站Logo扫光特效之后就有很多网站也效仿起来添加Logo扫光效果了,这个效果看起来还是比较炫的。(注:本站主题就是知更鸟主题)

我们可以通过“右键-检查(审查元素)”来查看logo图片的相关代码文章源自SEO视频网-https://www.seoshipin.cn/seojiqiao/1841.html

通过css给网站logo添加扫光特效文章源自SEO视频网-https://www.seoshipin.cn/seojiqiao/1841.html

html代码如下:文章源自SEO视频网-https://www.seoshipin.cn/seojiqiao/1841.html

  1. <div class="logo-site">
  2. <h1 class="site-title">
  3. <a href="http://www.seoshipin.cn/">
  4. <img src="http://seoshipin.cn/wp-content/themes/begin/img/logo.png" title="SEO视频|seoshipin.cn" alt="SEO视频|seoshipin.cn" rel="home">
  5. <span class="site-name">SEO视频|seoshipin.cn</span></a></h1>
  6. </div>

css代码如下:文章源自SEO视频网-https://www.seoshipin.cn/seojiqiao/1841.html

  1. .logo-site, .logo-sites {
  2.     position: relative;
  3.     float: left;
  4.     margin: 18px 0 0 5px;
  5.     width: 250px;
  6.     max-height: 50px;
  7.     overflow: hidden;
  8.     transition-duration: .5s;
  9. }
  10. .logo-site:before {
  11.     content: "";
  12.     position: absolute;
  13.     left: -665px;
  14.     top: -460px;
  15.     width: 250px;
  16.     height: 15px;  /**光标的宽度,可根据实际调整**/
  17.     background-color: rgba(255,255,255,.5);
  18.     -webkit-transform: rotate(-45deg);
  19.     -moz-transform: rotate(-45deg);
  20.     -ms-transform: rotate(-45deg);
  21.     -o-transform: rotate(-45deg);
  22.     transform: rotate(-45deg);
  23.     -webkit-animation: searchLights 1s ease-in 1s infinite;
  24.     -o-animation: searchLights 1s ease-in 1s infinite;
  25.     animation: searchLights 1s ease-in 1s infinite;  /**第一个数字参数控制扫光速度,数字越大越慢**/
  26. }

Logo扫光效果实现说明:文章源自SEO视频网-https://www.seoshipin.cn/seojiqiao/1841.html

1、用 CSS3 伪元素 :bfore 或 :after 添加一扫光层;文章源自SEO视频网-https://www.seoshipin.cn/seojiqiao/1841.html

2、用 transform:rotate(-45deg) 旋转 45 度;文章源自SEO视频网-https://www.seoshipin.cn/seojiqiao/1841.html

3、@ keyframes 规则来控制扫光效果的起始位置和结束位置;文章源自SEO视频网-https://www.seoshipin.cn/seojiqiao/1841.html

4、用 CSS 控制位置和动画时间等。文章源自SEO视频网-https://www.seoshipin.cn/seojiqiao/1841.html

 文章源自SEO视频网-https://www.seoshipin.cn/seojiqiao/1841.html

那么,如何修改css属性,为自己网站的logo添加扫光特效呢?

第一步,在自己的网站logo上,鼠标右键-检查,打开代码查看面板,找到自己网站的logo图片的css名称(即:logo)。

找到自己网站的logo图片的css名称

第二步,把扫光代码的css名称改为logo的css名称,即:把“logo-site”改为“logo”。

把扫光代码的css名称改为logo的css名称

第三步,,点击“外观-自定义-额外css”,复制css代码到wordpress网站自定义的额外CSS中,点击“保存并发布”就可以了。

复制css代码到wordpress网站自定义的额外CSS中

 
  • 本文由 潮涌SEO 发表于 2017年10月16日 23:54:05
  • 转载请务必保留本文链接:https://www.seoshipin.cn/seojiqiao/1841.html