文章访客
墨宇的头像 - 腾飞博客黑钻会员
墨宇
详情
评论
问答

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

文章最后更新时间:2025-03-08 20:32:12

这是一款子比主题自带的页脚二维码动态跑马灯效果,加上去给自己的页脚非常的好看,喜欢的自行部署!

图片[1] - 子比主题 - 页脚二维码动态跑马灯效果

代码部署

直接将下面的代码放到:子比主题–>>自定义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%);
  }
}
THE END
点赞13 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容