我经常看到很多网站上的 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 添加扫光
汇站网 wordpress美化 为WordPress站点Logo添加扫光 https://www.huizhanii.com/15074.html
汇站
站长资源下载中心-找源码上汇站
常见问题
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
相关文章
猜你喜欢
- 使用代码实现WordPress网站右上角展示春节灯笼动态效果 2024-01-01
- WordPress仿discuz为热门帖子添加热帖图标 2023-12-20
- 纯代码实现WordPress彩色标签云(TAG) 2023-11-10
- 彩色渐变的圆角按钮ui特效,为界面增添了一抹色彩的魅力 2023-11-09
- 美化WordPress博客侧边栏主题:添加新年倒计时代码 2023-10-16
- WordPress美化 – 文章页面tag标签 2023-09-24
- (WordPress美化)文章内容标题H标签美化教程 2023-09-24
- WordPress美化/主题首页美化添加搜索框 2022-08-18
- WordPress侧边栏[日期+古诗一言][WP教程] 2022-08-08
- WordPress美化教程:js复制弹出美化 2022-01-19