好吧不送球球了

马黑黑 · 发表于 2022-4-5 15:34

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-4-5 15:35

代码分享：

<style>
/* 水晶按钮主体 */
.crystal {
margin: 20px auto 0;
width: 80px;
height: 80px;
background: linear-gradient(120deg, #4FE846, #f6a337);
border-radius: 50%;
position: relative;
}
/* 外圈蹩脚的呼吸灯效果 */
.crystal::before {
content: '';
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
background: transparent;
border-radius: 50%;
box-shadow: 1px 1px 10px blue, 0 0 4px green inset;
animation: glow 1s linear infinite alternate;
}
/* 按钮抛光 */
.crystal::after {
content: '';
width: 50%;
height: 50%;
position: absolute;
left: 10%; top: 20%;
border-radius: 50%;
background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
filter: blur(5px);
}
@keyframes glow {
from { filter: blur(0px); }
to { filter: blur(3px); }
}
</style>
<div class="crystal"></div>

复制代码

熊大 · 发表于 2022-4-5 15:42

这不是QQ是oo！

马黑黑 · 发表于 2022-4-5 15:46

马黑黑 · 发表于 2022-4-5 15:47

色环代码：

<style>
/* 色环主体圆柱渐变盘 */
.circle {
margin: 50px auto 0;
width: 100px; height: 100px;
background: conic-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
border-radius: 50%;
position: relative;
}
/* 伪元素遮罩层如果不想要遮罩层，可以考虑在主体用 mask :
mask: radial-gradient(transparent 40px, #000 40px);
-webkit-mask: radial-gradient(transparent 40px, #000 40px);
*/
.circle::before {
content: '';
position: absolute;
left: 10px; top: 10px; right: 10px; bottom: 10px;
border-radius: 50%;
background: #F1FAEF;
}
</style>
<div class="circle"></div>