多彩流动边框演示
位置:
首页 >
前端三套件[发布: 2024.6.5 作者: 马黑 阅读: 60]
代码：
<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>
<div id="bbox"></div>
效果：
前一篇: Oklab颜色空间演示
下一篇: 初识JS原生animate动画函数
发表评论:
评论列表 [2条]
#2 | 飞飞 于 2024-6-5 20:32 发布: 贴子大小width: 400px;height: 200px;就是外框大小`
#1 | 悄然 于 2024-6-5 20:31 发布: 这个边框流光溢彩，看着漂亮极了。。。 overflow: hidden;这一句去掉，就可以显示全部了吧。。
