早安，花潮（学习气球效果）
<style type="text/css">/* 背景图 */
.hy {
position: relative;
left: -304px;
width: 1200px;
height: 576px;
top: 120px;
overflow: hidden;
background: #eee url('https://pic.imgdb.cn/item/62478ecd27f86abb2acc1655.jpg') no-repeat center/cover;
opacity: 0.98;
box-shadow: 4px 4px 5px #888;border-radius:12px;
}
/* 气球 */
.balloon {
width: 100px;
height: 100px;
background: radial-gradient(circle at 10% 20%, #d4fc79 0%, #96e6a1 100%);
border-radius: 100% 100% 60% 100%;
transform: rotate(45deg);
position: relative;
left: 800px;
top: 400px;
animation: fly1 10s 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,2px);
}
.balloon::after {
background: rgba(0,128,0,.85);
width: 10px;
height: 10px;
border-radius: 10%;
top: 100%;
left: 100%;
transform: rotate(-45deg) translate(0,-16px);
}
@keyframes fly1 {
0% { top:240px;left:780px;width: 50px;height: 50px;opacity: 0.65; }
40% { top:240px;left:960px;width: 100px;height: 100px;opacity: 0.95}
60% { top:100px;left:880px;width: 150px;height: 150px;opacity: 0.95}
80% { top:200px;left:840px;width: 100px;height: 100px;opacity: 0.6}
100% { top:240px;left:790px;width: 50px;height: 50px;opacity: 0.1; }
}
/* 音乐控制按钮 */
.picBtn {
position: absolute;
width: 275px;
height: 200px;
left: 870px;
top: 370px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://pic.imgdb.cn/item/6247992927f86abb2ad74d59.gif') no-repeat;
cursor: pointer;
}
/* 动图定位 */
.dongtu {
position: absolute;
width: 451px;
height: 249px;
left: 140px;
top: 80px;
}
</style>
<div id="hy" class="hy">
<div class="balloon"></div>
<div class="dongtu">
<img alt="" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif"/>
</div>
<button id="picBtn" class="picBtn"></button>
<audio id="music" src="http://music.163.com/song/media/outer/url?id=1906079089.mp3" loop="loop" autoplay="autoplay"
></audio>
</div>
<script language="javascript">
//按钮
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/6247992927f86abb2ad74d59.gif')") :
(mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/6247995a27f86abb2ad7918b.png')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/6247995a27f86abb2ad7918b.png')";
});
</script>
<br><br><br><br><br><br><br><br><br><br><br> 早安，影子 早安，气球
早安，花篮
早安，飞鸟
早安，天空
早安，阴云
早安，我的咖啡
关于气球创意的建议：
从远处飘来，比如山沟沟那里，慢慢变大，到花篮处再飞回去 红影这PP找的真棒，音乐融合的温暖，看着听着真舒服，原来气球也能用一个啊，还可以慢慢飘
继续学习！
{:4_204:}{:4_190:}{:5_106:}
四海八荒 发表于 2022-4-2 09:05
早安，影子
早安四海，呵呵，大清早被猫儿弄醒了，就跑上来做图图了{:4_173:} 马黑黑 发表于 2022-4-2 10:25
早安，气球
早安，花篮
早安，飞鸟
早安这么多啊，呵呵，早安黑黑{:4_187:} 马黑黑 发表于 2022-4-2 10:30
关于气球创意的建议：
从远处飘来，比如山沟沟那里，慢慢变大，到花篮处再飞回去
我试试。。。 大猫咪 发表于 2022-4-2 13:02
红影这PP找的真棒，音乐融合的温暖，看着听着真舒服，原来气球也能用一个啊，还可以慢慢飘
继续学习！
...
是啊，黑黑先分享的事一个气球，然后才是五个{:4_173:} 红影 发表于 2022-4-2 14:00
是啊，黑黑先分享的事一个气球，然后才是五个
制作的真棒， 看着真舒服 {:5_116:}{:4_204:} 马黑黑 发表于 2022-4-2 10:30
关于气球创意的建议：
从远处飘来，比如山沟沟那里，慢慢变大，到花篮处再飞回去
改了一下，黑黑看看是不是这样的{:4_173:} 大猫咪 发表于 2022-4-2 14:02
制作的真棒， 看着真舒服
按照黑黑说的修改了气球的运动轨迹，的确觉得更好一些呢{:4_173:} 红影 发表于 2022-4-2 14:50
按照黑黑说的修改了气球的运动轨迹，的确觉得更好一些呢
是啊，灵动一下子就出来了 红影 发表于 2022-4-2 13:59
我试试。。。
{:4_190:} 红影 发表于 2022-4-2 13:59
早安这么多啊，呵呵，早安黑黑
现在是下午安好了 红影这个制作真漂亮，画面真美，飞来的气球又飞回去了，真好。{:4_199:} 红影 发表于 2022-4-2 14:50
按照黑黑说的修改了气球的运动轨迹，的确觉得更好一些呢
嗯嗯 非常棒的 {:4_187:} 马黑黑 发表于 2022-4-2 16:06
是啊，灵动一下子就出来了
只是气球下的那个柄就没法子了，除非让也跟着改。不过还好，看不太出来{:4_173:} 马黑黑 发表于 2022-4-2 16:06
现在是下午安好了
嗯嗯，祝黑黑每一天都安好{:4_187:} 加林森 发表于 2022-4-2 17:08
红影这个制作真漂亮，画面真美，飞来的气球又飞回去了，真好。
谢谢队长鼓励，是黑黑提醒了做的呢。对于单个气球还是比较容易控制轨迹的{:4_173:}