多彩流动边框演示

评论资讯 [ 总 17 则 ]

友情链接

网站统计

·前端三套件 : 184
·JS插件 : 68
·黑石音画 : 526
·代码集锦 : 79
·小工具集合 : 32
·网友作品精选 : 9
·svgdr : 26
·杂记 : 4

·今日访问 : 268
·页面点击 : 283
·当前在线 : 4

多彩流动边框演示

位置: 首页 > 前端三套件[ 发布时间: 2024.6.5 作者: 马黑阅读: 660 ]

代码：

<style>

#bbox {

margin: auto;

width: 400px;

height: 200px;

overflow: hidden;

display: grid;

place-items: center;

position: relative;

}

#bbox::before, #bbox::after {

position: absolute;

content: '';

z-index: -1;

}

#bbox::before {

width: 460px;

height: 460px;

background: linear-gradient(red, green, orange, blue);

border-radius: 50%;

animation: rot 4s linear infinite;

}

#bbox::after {

background: silver;

inset: 4px;

}

@keyframes rot { to { transform: rotate(360deg); } }

</style>

发表评论:

评论列表 [2条]

#2 | 飞飞于 2024-6-5 20:32 发布: 贴子大小width: 400px;height: 200px;就是外框大小`

#1 | 悄然于 2024-6-5 20:31 发布: 这个边框流光溢彩，看着漂亮极了。。。 overflow: hidden;这一句去掉，就可以显示全部了吧。。