飞流 发表于 2025-10-8 17:54:18

子比主题 – 页脚二维码动态跑马灯效果

这是一款子比主题自带的页脚二维码动态跑马灯效果,加上去给自己的页脚非常的好看,喜欢的自行部署!
代码部署
直接将下面的代码放到:子比主题–>>自定义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%);
}
}
页: [1]
查看完整版本: 子比主题 – 页脚二维码动态跑马灯效果