论坛 › 欢乐水吧 › 送来看我哦不来看你一个气球

马黑黑 发表于 2022-3-29 18:20

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

<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>

马黑黑 发表于 2022-3-29 18:22

<pre>
代码分享：

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

<span style='color: blue;'>.balloon</span>::before, .balloon::after { content: <span style='color: magenta'>''</span>; position: absolute; }

<span style='color: blue;'>.balloon</span>::before {
<span style='color: blue;'>&nbsp; &nbsp;width</span>: 1px;
<span style='color: blue;'>&nbsp; &nbsp;height</span>:100px;
<span style='color: blue;'>&nbsp; &nbsp;background</span>: rgba(0,0,0,.7);
<span style='color: blue;'>&nbsp; &nbsp;left</span>: 100%;
<span style='color: blue;'>&nbsp; &nbsp;top</span>: 100%;
<span style='color: blue;'>&nbsp; &nbsp;transform</span>: rotate(-45deg) translate(35px,-12px);
}

<span style='color: blue;'>.balloon</span>::after {
<span style='color: blue;'>&nbsp; &nbsp;background</span>: rgba(0,128,0,.85);
<span style='color: blue;'>&nbsp; &nbsp;width</span>: 10px;
<span style='color: blue;'>&nbsp; &nbsp;height</span>: 10px;
<span style='color: blue;'>&nbsp; &nbsp;border-radius</span>: 10%;
<span style='color: blue;'>&nbsp; &nbsp;top</span>: 100%;
<span style='color: blue;'>&nbsp; &nbsp;left</span>: 100%;
<span style='color: blue;'>&nbsp; &nbsp;transform</span>: rotate(-45deg) translate(0,-28px);
}

<span style='color: red;'>@keyframes up </span>{
<span style='color: blue;'>&nbsp; &nbsp;to { top</span>: -340px; left: 200px; }
}

&lt;/style&gt;

&lt;<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"balloon"</span>&gt;&lt;<span style='color: darkred'>/div</span>&gt;

</pre>

加林森 发表于 2022-3-29 18:31

@来看你看看收礼开心。{:4_187:}

红影 发表于 2022-3-29 19:03

这气球做得太逼真了，黑黑真棒{:4_199:}

红影 发表于 2022-3-29 19:06

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

红影 发表于 2022-3-29 19:11

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

红影 发表于 2022-3-29 19:14

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

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

千羽 发表于 2022-3-29 20:03

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

&lt;style type="text/css"&gt;


来分享代码：


<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>

千羽 发表于 2022-3-29 20:07

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

<style type="text/css">

漂亮的小气球载着看看飞向远方……{:4_173:}

千羽 发表于 2022-3-29 20:08

看看，快来收礼{:4_195:}

马黑黑 发表于 2022-3-29 20:47

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

谢谢广而告之

马黑黑 发表于 2022-3-29 20:48

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

要远嫁哪儿啊{:5_106:}

马黑黑 发表于 2022-3-29 20:49

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




可以玩玩吧

千羽 发表于 2022-3-29 21:08

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

老师{:4_181:}不客气哈

千羽 发表于 2022-3-29 21:10

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

看看要到远方去见一个有魔法的人……{:4_205:}

千羽 发表于 2022-3-29 21:12

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

嗯，好的{:4_181:}

马黑黑 发表于 2022-3-29 21:12

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

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

马黑黑 发表于 2022-3-29 21:13

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

{:4_190:}

马黑黑 发表于 2022-3-29 21:13

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

{:5_108:}

千羽 发表于 2022-3-29 21:13

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

太好了，你马上领着看看去吧{:4_189:}

查看完整版本: 送来看我哦不来看你一个气球