醉美水芙蓉 发表于 2022-5-18 22:22

西海情歌英文版

本帖最后由 醉美水芙蓉 于 2022-5-18 22:29 编辑 <br /><br /><style>
.bgBox {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1280px;
      height: 720px;
      left: -342px;
      background: #000 url('http://pan.yinhuabbs.cn/view.php/cbd6a7f59f755d418050fc90d8548278.jpg') no-repeat;
      overflow: hidden;
      perspective: 3000px;
}
.ball {
      position: absolute;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: block;
      transform-style: preserve-3d;
      animation: fly var(--ss) linear infinite alternate;
}

.ball::before, .ball::after {
      position: absolute;
      content: '';
      width: 24px;
      height: 24px;
      border-radius: 50%;
      left: -10px;
      top: 5px;
      background: green;
      animation: fly calc(var(--ss) + 1s) linear infinite;
}
.ball::after {
      background: red;
      animation: fly calc(var(--ss) + 2s) linear infinite;
}
@keyframes fly {
      0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
      50% { opacity: .6; }
      100% { transform: translate3d(var(--tx), var(--ty), var(--tz)); opacity: 0; }
}
</style>

<div class="bgBox"></div>

<script>
let bgBox = document.querySelector('.bgBox');
let total = 200;
let sStr = '';
for(j=0; j<total; j++){
      let ww = getNum(20,30);
      let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`;
      let xx = getNum(-640,640);
      let yy = getNum(-384,384) ;
      sStr += `<span class='ball' style='--ss: ${getNum(4,10)}s; --tx: ${xx}px; --ty:${yy}px; --tz: ${getNum(10,100)}px; width: ${ww}px; height: ${ww}px; ${bg}'></span>`;
}
bgBox.innerHTML += sStr;
let aud = document.createElement('iframe');
aud.src = 'https://music.163.com/outchain/player?type=2&id=1435616560&auto=1&height=66';
aud.style.display = 'none';
bgBox.appendChild(aud);

function setRgb(){ return `rgba(${getNum(0,255)},${getNum(0,255)}, ${getNum(0,255)})`; }
function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }

</script>

加林森 发表于 2022-5-18 22:44

水芙蓉制作得真漂亮！{:4_199:}

醉美水芙蓉 发表于 2022-5-19 07:02

加林森 发表于 2022-5-18 22:44
水芙蓉制作得真漂亮！

谢谢队长支持鼓励！

加林森 发表于 2022-5-19 12:11

醉美水芙蓉 发表于 2022-5-19 07:02
谢谢队长支持鼓励！

应该的应该的。
页: [1]
查看完整版本: 西海情歌英文版