如何给网站LOGO加一层扫光效果，可以从物理层次和逻辑层次两个方面出发。所谓物理层次的修改就是直接通过ps对图片本身增加图层蒙版过帧的方式最后生成动态gif图片，需要有一定的ps功底且加载会增加网站负担。所以今天讲一下第二种方法，逻辑层次的改动css以达到LOGO扫光的效果。用 CSS3 伪元素 :bfore 或 :after 添加一扫光层；现用 transform:rotate(-45deg) 旋转 45 度；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;} } 

前言       之前看见过类似的动画，甚是好看而且因为是一段js实现的相对来说对加载影响并不大。 效果       效果可参照本博客的背景js连线动画。方法       下载附件里的js代码复制粘贴到自己网站的foot文件的任意位置，不懂留言。

简介       意外之间发现了一个可以免费撸三年主机云，总共价值6000的服务器，系统可选，另外还不包括一个100G大小的免费价值1000的云数据库。活动力度挺大的，很可能只能撸这一段。需要注意的是，活动需要注册并实名认证才可以激活，实名认证需要身份证正反两面及银行卡号作为实名验证方式，对于注重信息安全的站长来讲需要估摸衡量下权重利弊，不过服务器提供商是UCLOUD大厂，应该问题不大，手头如果有他人的实名数据用来撸最好不过。案例方法1，首先进入活动地址（活动地址在文章最后）2，活动页面拉到最上面，领取6000元的优惠卷（分三年，每年可使用2000优惠卷）3，注册账号并且实名认证（需要身份证正反两面外加银行卡号，基本秒认证，已测服务器提供商调用有银行卡号姓名验证接口没办法浑水摸鱼）4，购买服务器，并使用2000元优惠卷（服务器性价比最高的是2核4G内存40G系统盘10G数据盘，共1900多，使用两千元的优惠卷最后支付0元）5，特别需要注意的是在选购云服务器的时候注意把弹性IP这块的勾勾给去掉，因为弹性IP不在云服务器优惠卷范围内。购买之后的云服务器只能内网访问，想要建站或者挂机别有用途的同学需要单独再购买弹性IP，大概1M一个月是25左右，第一个月可用20的优惠卷，也就是5元一个月，后几个月需要另行付费，弹性IP相对来说比较贵的，不过对于撸到的2000元配置的服务器来说算很好的了。活动地址 管理员设置 回复 可见隐藏内容