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

# 版权声明

西柚乐ciyol.cn发布的部分内容包括:教程、文章、图片、视频、软件、程序、源码等搜集于互连网,仅供学习交流,严禁用于商业用途,请于24小时内删除,如喜欢请购买作者正版,享受售后服务!

# 详细介绍

释放双眼,带上耳机,听听看~!

将以下代码加到你的网站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: "";

完成以上操作就行啦。

柒比贰(7b2)主题logo扫光特效,网站logo扫光特效纯代码-西柚乐
最后修改: 2020-09-3 01:58

人已赞赏
WordPress美化

RiPlus主题如何修改VIP介绍为动态?

2020-8-3 13:54:27

WordPress美化

柒比贰7b2主题首页美化教程,幻灯片下方精美UI布局

2020-8-8 14:30:01

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索