【网站美化】给网站底部二维码增加炫酷旋转动效边框

图片[1]-【网站美化】给网站底部二维码增加炫酷旋转动效边框-凤翼天翔剧社

【Zibll主题设置】 – 【全局&功能】– 【自定义代码】]– 【自定义CSS样式】,添加下面的CSS代码即可

/*底部板块三图片border*/
.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%);
  }
}

温馨提示: 本文最后更新于2025-02-07 00:32:03,某些文章具有时效性,若有错误或已失效,请在下方 留言
本站内容仅供学习和研究使用,请在下载后24小时内删除 凤翼天翔
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称表情图片

    暂无评论内容