CSS实现Logo扫光效果 2018年5月4日HTML/CSS2,088 浏览网页的时候看到很多博客logo都有扫光效果,非常漂亮,于是就踏着大神的步伐一步步实现logo扫光效果,记录如下。Logo扫光效果思路非常简单,如下 1.用CSS3伪元素:bfore或:after添加一扫光层; 2.现用transform:rotate(-45deg)旋转45度; 3.CSS控制位置和动画时间等。 HTML结构 logo扫光效果的HTML结构如下 <div class="site-logo"> <a href="http://localhost/wordpress/" rel="home" itemprop="url"> <img src="http://logo.png" alt="logo" itemprop="logo" width="150" height="50"> </a> </div> CSS代码如下 /**logo扫光效果CSS**/ .site-logo{ position: relative; overflow: hidden; float:left; max-height: 50px; } .site-logo:before { content: ""; position: absolute; width: 150px; height: 10px; background-color: rgba(255, 255, 255, 0.5); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: blink 1s ease-in 1s infinite; animation: blink 1s ease-in 1s infinite; } @-webkit-keyframes blink { from {left: 10px;top: 0;} to {left: 320px;top: 0;} } @-o-keyframes blink { from {left: 10px;top: 0;} to {left: 320px;top: 0;} } @-moz-keyframes blink { from {left: 10px;top: 0;} to {left: 320px;top: 0;} } @keyframes blink { from {left: -100px;top: 0;} to {left: 320px;top: 0;} } @keyframes 规则可以控制扫光动画的起始位置和终止位置,以上的参数根据自己的logo的大小和布局进行调整即可。具体效果如下 发表评论 取消回复 电子邮件地址不会被公开。Username Username Username 憧憬Licoy 2年前 回复 效果还是不错的 Lerm 2年前 回复 知更鸟主题自带就有这个效果,看起来挺不错的,网上搜了一下就搞了一个 sky 2年前 回复 在flash没落的时候这种效果还是不错的 Lerm 2年前 回复 看起来稍微好一点。 巧娃网 2年前 回复 这个还不赖 Oconner 2年前 回复 互相学习