给底部第三板块增加border边框(初一版本)

初一的教程是scss,有很多浏览器不显示,改成css,不会有这个影响

效果预览:

图片[1]-给底部第三板块增加border边框(初一版本)-派克资源

部署代码:

[content_hide]

.footer-miniimg p {
  position: relative;
}

.footer-miniimg p:hover {
  filter: contrast(1.1);
}

.footer-miniimg p:active {
  filter: contrast(0.9);
}

.footer-miniimg p::before,
.footer-miniimg p::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;
}

.footer-miniimg p::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%);
  }
}

[/content_hide]

文章版权声明 1、本网站名称:派克资源
2、本站永久网址:https://www.pknn.net
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享