CSS实现Logo扫光效果

浏览网页的时候看到很多博客logo都有扫光效果,非常漂亮,于是就踏着大神的步伐一步步实现logo扫光效果,记录如下。Logo扫光效果思路非常简单,如下

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

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

3.CSS控制位置和动画时间等。

HTML结构

logo扫光效果的HTML结构如下

CSS代码如下

@keyframes 规则可以控制扫光动画的起始位置和终止位置,以上的参数根据自己的logo的大小和布局进行调整即可。具体效果如下

  • 打赏
  • 评论 4
  • 分享
  • 点赞 4
转载请注明出处: CSS实现Logo扫光效果 | 乐朦

欢迎评论

CSS实现Logo扫光效果 | 有 4 条评论

  1. avatar sky 2016-10-30 at 上午9:05 回复

    在flash没落的时候这种效果还是不错的

    1. avatar Lerm 2016-10-30 at 下午12:17 回复

      看起来稍微好一点。

  2. avatar 憧憬Licoy 2016-10-29 at 上午9:47 回复

    效果还是不错的

    1. avatar Lerm 2016-10-29 at 上午9:54 回复

      知更鸟主题自带就有这个效果,看起来挺不错的,网上搜了一下就搞了一个