点击注册网校，注册后直接登录使用，免费入驻，技术支持微信：https98wordpress美化：利用before选择器给网站Logo添加扫光特效
在知更鸟大神的网站看到他的Begin主题Logo有扫光特效，看起来还是比较炫的。研究了一下，发现是用:before选择器实现的扫光效果，现在把代码甩出来，觉得好看的可以在自己的站点上试一试。
Logo扫光方法
方法很简单，只需要添加一段css代码即可，如果你是WordPress程序，那么请在当前主题css文件最下方添加如下代码，需注意：代码中的#logo:before，根据自己的实际情况修改为当前主题的Logo元素选择器名称。
- /**logo扫光效果CSS**/
- #logo:before{
- content:"";
- position: absolute;
- left: -665px;
- top: -460px;
- width: 200px;
- height: 15px;
- background-color: rgba(255,255,255,.5);
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- -o-transform: rotate(-45deg);
- transform: rotate(-45deg);
- -webkit-animation: searchLights 1s ease-in 1s infinite;
- -o-animation: searchLights 1s ease-in 1s infinite;
- animation: searchLights 1s ease-in 1s infinite;
- }
- @-webkit-keyframes searchLights {
- 0% { left: -100px; top: 0; }
- to { left: 120px; top: 100px; }
- }
- @-o-keyframes searchLights {
- 0% { left: -100px; top: 0; }
- to { left: 120px; top: 100px; }
- }
- @-moz-keyframes searchLights {
- 0% { left: -100px; top: 0; }
- to { left: 120px; top: 100px; }
- }
- @keyframes searchLights {
- 0% { left: -100px; top: 0; }
- to { left: 120px; top: 100px; }
- }
当然，此效果也适用于其他建站程序，其仅仅是一个CSS效果而已。
1. 如有链接无法下载、失效或广告，请联系QQ：181289218 处理！
2. 本站的所有资源为购买、网络收集，或者用户投稿的资源，版权归原作者及网站所有!
3. 如若侵犯了您的权利，请及时联系站长删除!
4. 本站提供的资源，都不包含技术服务请大家谅解！
5. 此软件“仅限学习交流，不能用于商业用途”！
6. 如用于商业用途，请到官方购买正版软件，追究法律责任与“云墨SEO”站点无关！
2. 本站的所有资源为购买、网络收集，或者用户投稿的资源，版权归原作者及网站所有!
3. 如若侵犯了您的权利，请及时联系站长删除!
4. 本站提供的资源，都不包含技术服务请大家谅解！
5. 此软件“仅限学习交流，不能用于商业用途”！
6. 如用于商业用途，请到官方购买正版软件，追究法律责任与“云墨SEO”站点无关！
- 我的微信
- 这是我的微信扫一扫
-
- 站长技术资源群
- QQ群：431710796
-
评论