红影 发表于 2022-4-2 10:20
真不错，在黑黑这里总能学到很多招数
学到用到就好
马黑黑 发表于 2022-4-2 10:20
气球大家都喜欢
我做了单只的，是的，气球的效果看着很可爱{:4_187:}
马黑黑 发表于 2022-4-2 10:20
学到用到就好
感谢黑黑的分享，花潮有你真好{:4_187:}
红影 发表于 2022-4-2 13:03
感谢黑黑的分享，花潮有你真好
都好都好
红影 发表于 2022-4-2 13:02
我做了单只的，是的，气球的效果看着很可爱
气球给人带来的美感很多，同时，它是柔和的，还能给人带来安全感
继续学习
加林森 发表于 2022-4-2 17:24
继续学习
手痒痒了木有{:4_170:}
马黑黑 发表于 2022-4-2 18:05
手痒痒了木有
有点有点{:4_189:}
加林森 发表于 2022-4-2 18:13
有点有点
支持
马黑黑 发表于 2022-4-2 18:26
支持
嗯嗯
马黑黑 发表于 2022-4-2 16:19
都好都好
非常感谢呢{:4_187:}
红影 发表于 2022-4-2 19:50
非常感谢呢
客气了
马黑黑 发表于 2022-4-2 16:20
气球给人带来的美感很多，同时，它是柔和的，还能给人带来安全感
是啊，形状柔和，色彩缤纷，的确是很让人喜爱的物件呢{:4_187:}
红影 发表于 2022-4-2 20:34
是啊，形状柔和，色彩缤纷，的确是很让人喜爱的物件呢
如此甚好
马黑黑 发表于 2022-4-2 20:47
如此甚好
看着代码模仿各类物件，觉得很有意思呢{:4_204:}
红影 发表于 2022-4-3 09:04
看着代码模仿各类物件，觉得很有意思呢
所以玩玩
<style>
.stage {
margin: auto;
position: relative;
max-width: 600px;
min-height: 400px;
background: linear-gradient(olive, gray, blue);
}
.stage::after {
content: '';
width: 40px;
height: 40px;
background: transparent;
border: 1px solid #eee;
border-radius: 50%;
box-shadow: 0px 0px 4px #eee inset, 0 0 6px blue;
position: absolute;
left: calc(50% - 20px);
top: 300px;
opacity: 0;
animation: circle 1.5s 1.5s linear infinite;
}
.wdrop {
position: absolute;
left: calc(50% - 10px);
top: -20px;
width: 20px;
height: 20px;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
transform: rotate(-45deg);
background-image: linear-gradient(45deg, #32c415 0%, #f09 100%);
animation: drop 1.5s ease-in infinite;
}
@keyframes drop{
0% { top: -20px; }
100% { top: 300px; }
}
@keyframes circle {
0% { opacity: 0.1; }
100% { transform: scale(3, 1.2); opacity: 0; }
}
</style>
<div class="stage">
<div class="wdrop"></div>
</div>
加林森 发表于 2022-4-3 14:36
.stage {
margin: auto;
position: relative;
{:4_190:}
马黑黑 发表于 2022-4-3 15:39
谢茶
加林森 发表于 2022-4-3 17:32
谢茶
不客气