东篱来瞧瞧这个
<style>.ball {
margin: auto;
margin-top: 80px;
width: 100px;
height: 100px;
background: olive linear-gradient(135deg,rgba(0,250,0,.85),rgba(30,250,60,.95));
position: relative;
border-radius: 50%;
filter: drop-shadow(2px 2px 6px rgba(0,0,0,.7));
transform: skew(2deg);
}
.ball::before, .ball::after {
content: '';
position: absolute;
border: 10px solid rgba(0,0,0,.45);
border-radius: 50%;
border-color: green lightgreen green darkgreen;
opacity: .55;
}
.ball::before { left: -10px; top: -10px; right: -10px; bottom: -10px; animation: rot 4s linear infinite; }
.ball::after { left: -20px; top: -20px; right: -20px; bottom: -20px;animation: rot 12s linear infinite; }
.ball div {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 35% 40%,rgba(255,255,255,.75),rgba(0,0,0,.15));
border-radius: 50%;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div class="ball">
<div></div>
</div>
珍藏多年的夜明珠，可做镇宫之宝。
前有方，后右圆，方圆方圆，几人得闲？且将后宫镇住。 这个好！很魔幻，很科幻！{:5_116:} 黑黑真牛！{:5_116:} 代码呢？ 这个漂亮，又可以用来做音乐按钮了呢{:4_199:} 东篱闲人 发表于 2022-4-19 14:41
这个好！很魔幻，很科幻！
还很科学 红影 发表于 2022-4-19 15:30
这个漂亮，又可以用来做音乐按钮了呢
做按钮可能复杂一点的，因为是伪元素的运动 东篱闲人 发表于 2022-4-19 14:41
黑黑真牛！
你更牛 东篱闲人 发表于 2022-4-19 14:41
代码呢？
我怎么忘了：
<style>
.ball {
margin: auto;
margin-top: 80px;
width: 100px;
height: 100px;
background: olive linear-gradient(135deg,rgba(0,250,0,.85),rgba(30,250,60,.95));
position: relative;
border-radius: 50%;
filter: drop-shadow(2px 2px 6px rgba(0,0,0,.7));
transform: skew(2deg);
}
.ball::before, .ball::after {
content: '';
position: absolute;
border: 10px solid rgba(0,0,0,.45);
border-radius: 50%;
border-color: green lightgreen green darkgreen;
opacity: .55;
}
.ball::before { left: -10px; top: -10px; right: -10px; bottom: -10px; animation: rot 4s linear infinite; }
.ball::after { left: -20px; top: -20px; right: -20px; bottom: -20px;animation: rot 12s linear infinite; }
.ball div {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 35% 40%,rgba(255,255,255,.75),rgba(0,0,0,.15));
border-radius: 50%;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div class="ball">
<div></div>
</div>
这个好，我又可以玩了。老黑厉害，佩服佩服。{:4_199:} 加林森 发表于 2022-4-19 18:20
这个好，我又可以玩了。老黑厉害，佩服佩服。
{:4_190:} 马黑黑 发表于 2022-4-19 18:51
{:4_191:} 马黑黑 发表于 2022-4-19 18:13
我怎么忘了：
你太废寝忘食了。。。{:4_189:} 好玩 {:5_106:}老黑真棒，空了学习 晚上好！{:5_117:}{:4_191:}{:4_204:} 划时代的宝贝，{:4_199:} 樵歌 发表于 2022-4-19 20:52
划时代的宝贝，
{:4_170:} 东篱闲人 发表于 2022-4-19 19:26
你太废寝忘食了。。。
有道理 大猫咪 发表于 2022-4-19 20:03
好玩 老黑真棒，空了学习 晚上好！
{:4_190:} 马黑黑 发表于 2022-4-19 20:54
这个用作播放器高贵典雅{:4_173:}
页:
[1]
2