|
|

楼主 |
发表于 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>
复制代码
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
加林森
| + 30 |
+ 60 |
+ 30 |
赞一个! |
查看全部评分
|