为WordPress站点Logo添加扫光

2021-08-19 0 739

我经常看到很多网站上的 logo 有一种席卷而来的效果，非常漂亮。今天，我在我的网站上添加了这个效果。添加后的效果请参见本网站的徽标
徽标扫掠效果的想法非常简单，如下所示：
1.添加 CSS3 伪元素扫掠层：bfore 或：after；
2.变换：旋转（-45 度）45 度；
3、CSS 控制位置、动画时间等。
那么，如何修改 CSS 属性并为网站的徽标添加全面效果呢？
步骤 1：右键单击网站徽标-选中，打开代码视图面板，找到网站徽标图像的徽标元素选择器名称（即 logo）。

第二步，把以下代码加入主题 CSS 中

/**logo 扫光效果 CSS**/

.logo{

position: relative;

overflow: hidden;

float:left;

max-height: 50px;

}

.logo:before {

content: “”;

position: absolute;

width: 150px;

height: 10px;

background-color: rgba(255, 255, 255, 0.5);

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-animation: blink 1s ease-in 1s infinite;

animation: blink 1s 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;}

}

关键帧规则可以控制扫描动画的开始位置和结束位置。以上参数可根据徽标的大小和布局进行调整。您可以根据需要调整上述代码中的参数，以适应您的网站徽标。
对于部分自适应主题，需要删除以下代码：

.logo{

position: relative;

overflow: hidden;

float:left;

max-height: 50px;

}

修改后，您可以通过刷新网站主页来查看效果。有时您可能无法立即查看修改后的效果。别担心。这主要是由于网页缓存或使用 CDN 服务。您可以通过了解浏览器缓存、刷新 CDN 或临时禁用 CDN 来快速查看效果。

转载请注明：汇站网 » 为 WordPress 站点 Logo 添加扫光

赏

微信扫一扫

支付宝扫一扫

免责声明

本资源仅用于个人学习和研究使用，禁止用于任何商业环境！

1.  本网站名称：汇站网
2.  本站永久网址：https://www.huizhanii.com/
3.  本站所有资源来源于网友投稿和高价购买，所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习，本站不提供任何技术服务！
4.  本站所有资源的展示图片和信息不代表本站的立场！本站只是储蓄平台及搬运
5.  下载者禁止在服务器和虚拟机下进行搭建运营，本站所有资源不支持联网运行！只允许调试，参考和研究！！！！
6.  未经原版权作者许可,禁止用于任何商业环境，任何人不得擅作它用，下载者不得用于违反国家法律，否则发生的一切法律后果自行承担！
7.  为尊重作者版权，请在下载24小时内删除！请购买原版授权作品，支持你喜欢的作者，谢谢！
8.  若资源侵犯了您的合法权益，请持您的版权证书和相关原作品信息来信通知我们请来信     我们会及时删除，给您带来的不便，我们深表歉意！
9.  如下载链接失效、广告或者压缩包问题请联系站长处理！
10.  如果你也有好源码或者教程，可以发布到网站，分享有金币奖励和额外收入！
11.  本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
12.  因源码具有可复制性，一经赞助，不得以任何形式退款。
13.  更多详情请点击查看

汇站网 wordpress美化为WordPress站点Logo添加扫光 https://www.huizhanii.com/15074.html