文章目录 [隐藏]
2018年8月30日
08:20:26
发表评论 163 views
wordpress美化：利用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效果而已。
云墨微课堂
云墨微课堂每天发布一个原创技能小视频！
查看
- 我的微信
- 这是我的微信扫一扫
- 站长技术资源群
- 群号：431710796
- A+
所属分类：
wordpress主题美化
Measure
Measure