气球飞飞

马黑黑 · 发表于 2022-3-29 21:20

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-3-29 21:26 编辑

马黑黑 · 发表于 2022-3-29 21:27

参考代码：

<style type="text/css">
#outBox {
position: relative;
border: 1px solid;
border-color: navy red magenta green;
width: 1200px;
height: 576px;
background: green url('/data/attachment/forum/202203/29/211020bepsfooppskiauoo.jpg') no-repeat center/cover;
left: -304px;
}
.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);
}
.wyyPlay {
position: absolute;
width: 330px;
height: 86px;
left: 20px;
top: 20px;
clip-path: circle(33px at 43px 43px);
border: 0;
opacity: .4;
}
@keyframes up {
to { top: -600px; }
}
.box { width: 100px; height: 100px; border: 1px solid; }
</style>
<div id="outBox">
<iframe class="wyyPlay" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=238050&auto=1&height=66"></iframe>
</div>
<script language="javascript">
let bln = document.getElementById('outBox');
let bArr = ['b0', 'b1', 'b2', 'b3', 'b4'];
for(j=0; j<5; j++) {
let bBb = document.createElement('div');
bBb.id = "b" + j;
bBb.setAttribute('class','balloon');
bBb.style.left = `${j*300-100}px`;
chgColor(bBb);
bln.appendChild(bBb);
}
function chgColor(obj){
let c1 = `#${Math.random().toString(16).substr(-6)}`;
let c2 = `#${Math.random().toString(16).substr(-6)}`;
obj.style.background =`linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}
setInterval(function(){
for (j=0; j<5; j++) {
chgColor(document.getElementById(bArr[j]));
}
}, 5000);
</script>