![图片[1]-【网站美化】给网站底部二维码增加炫酷旋转动效边框-凤翼天翔剧社](https://www.bona99.com/wp-content/uploads/2025/02/微信截图_20250207002901.jpg)
【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
暂无评论内容