气球飞飞
本帖最后由 马黑黑 于 2022-3-29 21:26 编辑 <br /><br /><style type="text/css">#outBox {
position: relative;
border: 1px solid;
border-color: navyred 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));
}
}, 5000);
</script>
参考代码：
<style type="text/css">
#outBox {
position: relative;
border: 1px solid;
border-color: navyred 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));
}
}, 5000);
</script>
这个漂亮，怎么评个分球都逃了啊 绿叶清舟 发表于 2022-3-29 21:29
这个漂亮，怎么评个分球都逃了啊
那就不评呗 老黑这个制作真漂亮，7彩球在飞翔的。{:4_199:} 加林森 发表于 2022-3-29 21:32
老黑这个制作真漂亮，7彩球在飞翔的。
5个吧 歌曲也是我喜欢的草原歌曲，真好听。{:4_190:} 看上去很复杂啊 马黑黑 发表于 2022-3-29 21:34
5个吧
嗯嗯，制作小点应该可以飞7个的吧。 绿叶清舟 发表于 2022-3-29 21:34
看上去很复杂啊
CSS用到伪元素，JS设计了两个半自定义函数。代码量大，原理却简单 球球背景色的设计还是用 rgba 颜色样式的好。这里，JS用了实体颜色，缺少了隐约透明的精妙 加林森 发表于 2022-3-29 21:35
嗯嗯，制作小点应该可以飞7个的吧。
五个号，五子登科 马黑黑 发表于 2022-3-29 21:40
五个号，五子登科
嗯嗯，也挺漂亮的。{:5_108:} 气球是从哪儿飞起来的呢{:4_173:} 真漂亮，好美每次重新飞出就变色呢，黑黑的构思真巧妙，很赞{:4_187:} 红影 发表于 2022-3-29 22:45
真漂亮，好美每次重新飞出就变色呢，黑黑的构思真巧妙，很赞
这是幼儿园小盆友都能想得出的构思吧{:5_106:} 加林森 发表于 2022-3-29 21:54
嗯嗯，也挺漂亮的。
{:5_108:} 转转 发表于 2022-3-29 22:28
气球是从哪儿飞起来的呢
转转就有 马黑黑 发表于 2022-3-29 23:05
转转就有
{:4_189:}{:4_196:}{:4_170:} 转转 发表于 2022-3-29 23:07
{:5_108:}