温馨提示:本文最后更新于
2025-05-31 00:07:19
,某些文章具有时效性,若有错误或已失效,请在文末评论区留言站长们应该都知道,静态二维码在信息密集的网页底部是非常容易被忽略的。我们可以给网站底部的静态二维码增加炫酷旋转特效,吸引用户的视线,在用户快速滑动页面时形成“视觉停顿点”,引导用户的注意力聚焦至二维码区域,如下图。
![图片[1]-Zibll子比主题 | 网站底部第三板块二维码增加炫酷旋转特效-十一张](https://www.11zhang.com/wp-content/uploads/2025/05/c47d69bf1c20250530003449.gif)
下面,十一张(www.11zhang.com)以Zibll子比主题为例,在网站底部第三板块二维码增加炫酷旋转特效,设置方法如下。
设置方法
登录到 WordPress 网站后台,进入“Zibll主题设置”,选择 [全局功能] – [自定义代码] – [自定义css样式],添加以下代码即可,如下图。
/*二维码增加炫酷特效 开始*/
.footer-miniimg {
p{
position: relative;
&:hover {
filter: contrast(1.1);
}
&:active {
filter: contrast(0.9);
}
&::before,
&::after{
content: "";
border: 2px solid;
border-image: linear-gradient(45deg, gold, deeppink) 1;
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
animation: clippath 3s infinite ;
}
&::before{
animation: clippath 3s infinite -1.5s linear;
}
}
}
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 96% 0);
filter: hue-rotate(0deg);
}
25% {
clip-path: inset(0 96% 0 0);
}
50% {
clip-path: inset(96% 0 0 0);
filter: hue-rotate(360deg);
}
75% {
clip-path: inset(0 0 0 96%);
}
}
/*二维码增加炫酷特效 结束*/
![图片[2]-Zibll子比主题 | 网站底部第三板块二维码增加炫酷旋转特效-十一张](https://www.11zhang.com/wp-content/uploads/2025/05/7ae1fee8d620250530235432.webp)
THE END
暂无评论内容