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

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

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

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

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

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

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）。

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

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