好吧 不送球球了
<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>
代码分享：
<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>
这不是QQ是oo！ <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;
}
.circle::before {
content: '';
position: absolute;
left: 10px; top: 10px; right: 10px; bottom: 10px;
border-radius: 50%;
background: #F1FAEF;
}
</style>
<div class="circle"></div> 色环代码：
<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>
熊大 发表于 2022-4-5 15:42
这不是QQ是oo！
你说得对{:4_199:} 马黑黑 发表于 2022-4-5 15:46
.circle {
margin: 50px auto 0;
width: 100px; height: 100px;
这是玉环？日环食，翡翠手镯？ 熊大 发表于 2022-4-5 15:47
这是玉环？日环食，翡翠手镯？
都可以{:4_173:} 这是不是象征着我们论坛圆圆满满啊！ 这个是播放器按钮吧。太好了。老黑又玩出新的教程出来了，厉害厉害。{:4_199:} 加林森 发表于 2022-4-5 17:00
这个是播放器按钮吧。太好了。老黑又玩出新的教程出来了，厉害厉害。
这个不是教程，是样式分享 马黑黑 发表于 2022-4-5 17:07
这个不是教程，是样式分享
嗯嗯，下次试一试能不能制作成播放器按钮。 这个很漂亮呢，真都有高光效果，太漂亮了{:4_199:} 红影 发表于 2022-4-5 17:58
这个很漂亮呢，真都有高光效果，太漂亮了
高光其实好做：做个小圆形，白色或偏白的，然后用 filter: blur(xpx) 模糊它，就能与主体融为一体 加林森 发表于 2022-4-5 17:20
嗯嗯，下次试一试能不能制作成播放器按钮。
理论上是可以的，不过他的代码偏多了一些 马黑黑 发表于 2022-4-5 18:27
理论上是可以的，不过他的代码偏多了一些
嗯嗯，是有点多。 加林森 发表于 2022-4-5 18:28
嗯嗯，是有点多。
我想减少代码，可这些又是必须的 马黑黑 发表于 2022-4-5 20:46
我想减少代码，可这些又是必须的
能不能再制作小点？ 加林森 发表于 2022-4-5 20:49
能不能再制作小点？
可以的，crystal 里的 width和height改一改 这个按钮漂亮