Zibll子比主题 | 网站底部第三板块二维码增加炫酷旋转特效

温馨提示:本文最后更新于2025-05-31 00:07:19,某些文章具有时效性,若有错误或已失效,请在文末评论区留言

站长们应该都知道,静态二维码在信息密集的网页底部是非常容易被忽略的。我们可以给网站底部的静态二维码增加炫酷旋转特效,吸引用户的视线,在用户快速滑动页面时形成“视觉停顿点”,引导用户的注意力聚焦至二维码区域,如下图。

图片[1]-Zibll子比主题 | 网站底部第三板块二维码增加炫酷旋转特效-十一张

下面,十一张(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子比主题 | 网站底部第三板块二维码增加炫酷旋转特效-十一张
© 版权声明
THE END
如果觉得这篇文章对您有帮助,可以收藏本网址,方便下次访问!
点赞11 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容