送来看我哦不来看你一个气球

马黑黑

马黑黑

代码分享：

<style type="text/css">
.balloon {
   width: 200px;
   height: 200px;
   background: radial-gradient(circle at 10% 20%, rgba(0,128,0,.5), rgba(0,96,48,.8));
   border-radius: 100% 100% 60% 100%;
   transform: rotate(45deg);
   position: relative;
   left: calc(50% - 100px);
   top: 300px;
   animation: up 5s linear infinite;
}

.balloon::before, .balloon::after { content: ''; position: absolute; }

.balloon::before {
   width: 1px;
   height:100px;
   background: rgba(0,0,0,.7);
   left: 100%;
   top: 100%;
   transform: rotate(-45deg) translate(35px,-12px);
}

.balloon::after {
   background: rgba(0,128,0,.85);
   width: 10px;
   height: 10px;
   border-radius: 10%;
   top: 100%;
   left: 100%;
   transform: rotate(-45deg) translate(0,-28px);
}

@keyframes up {
   to { top: -340px; left: 200px; }
}

</style>

<div class="balloon"></div>

加林森

@来看你  看看收礼开心。

红影

这气球做得太逼真了，黑黑真棒

红影

balloon::before里的translate(35px,-12px)看不懂，这两个数据是怎么来的？

红影

下面的after ，同样是对移动量有点迷糊。

红影

红影 发表于 2022-3-29 19:06
balloon::before里的translate(35px,-12px)看不懂，这两个数据是怎么来的？

45度方向上，正弦余弦的结果一样，值是70.71 横向移动的是这个值的一半？
-12没想出来怎么来的。

千羽

马黑黑 发表于 2022-3-29 18:22 代码分享： <style type="text/css">

来分享代码：

千羽

马黑黑 发表于 2022-3-29 18:22
代码分享：

<style type="text/css">

漂亮的小气球载着看看飞向远方……

千羽

看看，快来收礼

马黑黑

千羽 发表于 2022-3-29 20:08
看看，快来收礼

谢谢广而告之

马黑黑

千羽 发表于 2022-3-29 20:07
漂亮的小气球载着看看飞向远方……

要远嫁哪儿啊

马黑黑

千羽 发表于 2022-3-29 20:03
来分享代码：

可以玩玩吧

千羽

马黑黑 发表于 2022-3-29 20:47
谢谢广而告之

老师不客气哈

千羽

马黑黑 发表于 2022-3-29 20:48
要远嫁哪儿啊

看看要到远方去见一个有魔法的人……

千羽

马黑黑 发表于 2022-3-29 20:49
可以玩玩吧

嗯，好的

马黑黑

千羽 发表于 2022-3-29 21:10
看看要到远方去见一个有魔法的人……

这人我知道，住在水晶宫里

马黑黑

千羽 发表于 2022-3-29 21:12
嗯，好的

马黑黑

千羽 发表于 2022-3-29 21:08
老师不客气哈

千羽

马黑黑 发表于 2022-3-29 21:12
这人我知道，住在水晶宫里

太好了，你马上领着看看去吧