CSS实现Logo扫光效果

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

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

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

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

HTML结构

logo扫光效果的HTML结构如下

CSS代码如下

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

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

欢迎评论

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

  1. avatar 巧娃网 2017-08-19 at 下午8:55 回复

    这个还不赖

    1. avatar Oconner 2017-08-21 at 上午11:04 回复

      互相学习

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

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

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

      看起来稍微好一点。

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

    效果还是不错的

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

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