WordPress网站logo扫光特效纯代码

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

/*logo扫光*/.logo:before{/*这里第一句看原理解释*/content: "";
    position: absolute;
    width: 110px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);/*角度倾斜45*/-webkit-animation: blink 1.5s 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;}}

(必看)原理解释

给大家解释一下代码,不看可能不会扫(WordPress柒比贰主题可以忽略,因为博主也是。)
找到你的logo所处的div,然后找到他的class,如这个实例:



<h1 class="yuanli pos-a">< a src=https://www.jian2.com/logo1.png alt="简爱博客"/>a h1>

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

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

教程到此结束。

关于作者:放弃江南

有时候心情会突然的很低落,不想说话也不想动。别人问起,也不知道该怎样回答。真的,我不是假装沉默,只是无力诉说。

分享到:
赞(0) 打赏

评论抢沙发

评论前必须登录!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏