当前位置:首页>WordPress>WordPress美化>柒比贰(7b2)主题logo扫光特效,网站logo扫光特效纯代码

柒比贰(7b2)主题logo扫光特效,网站logo扫光特效纯代码

将以下代码加到你的网站css文件里面,随意,只要能引用的css就行了,wordpress用户加在style.css里面。

/*logo扫光*/
.logo:before {
position: absolute;
width: 13px;
height: 45px;
background-color: hsla(0,0%,100%,.5);
content: "";
transform: rotate(32deg);/*角度倾斜32*/animation: blink 1s ease-in 1s infinite;
}

@keyframes blink {
0% {
top: 0;
left: -75pt
}

to {
top: 0;
left: 20pc
}
}
/*logo扫光结束*/

 (必看)原理解释

给大家解释一下代码,不看可能不会扫(WordPress柒比贰主题可以忽略,因为西柚也是。)

找到你的logo所处的div,然后找到他的class,如这个实例:

<h1 class="logo pos-a">< a src=https://www.ciyol.cn/logo.png alt="西柚乐"/>a h1>  

看到logo那个class了吗?你的应该只是命名不一样,然后再css里面添加上面的css,然后第一句写法就应该用如下的

.logo:before{/*这里第一句看原理解释*/content: "";

完成以上操作就行啦。

©版权声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员Ciyol 或给邮箱发送邮件 admin@ciyol.cn 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

给TA打赏
共{{data.count}}人
人已打赏
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
有新私信 私信列表
搜索