加林森 发表于 2022-4-10 13:18

《回到拉萨》 -- 阿鲁阿卓（根据老黑的教程制作）

本帖最后由 加林森 于 2022-4-10 13:59 编辑 <br /><br /><style>
.bgDiv {/* 帖子主體 */
      margin: auto;
      width: 1275px;
      height: 717px;
      left: -339.5px;
      background: url('https://pic.imgdb.cn/item/625261a2239250f7c53b7857.jpg') no-repeat center/cover;
      border: 1px solid;
      position: relative;
      perspective: 1000px;
}
.bgDiv::before {/* 煙霧 */
      content: '';
      position: absolute;
      width: inherit;
      height: inherit;
      background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
      opacity: .2;
}
.btf {/* 蝴蝶 */
      width: 200px;
      height: 113px;
      position: absolute;
      left: 20px;
      bottom: 40px;
      filter: blur(1px);
      animation: fly 40s ease infinite alternate;
}
.stage {/* 字幕wrap */
      --len: 80px;
      margin: 200px auto 0;
      position: relative;
      width: var(--len);
      height: var(--len);
      transform-style: preserve-3d;
      animation: rot 15s linear infinite;
}
.stage div {/* 字幕面板統一樣式 */
      position: absolute;
      width: inherit;
      height: inherit;
      color: #eee;
      text-shadow: 1px 1px 3px #111;
      font: 2em / var(--len) Arial;
      text-align: center;
      left: 0; top: 0;
}
/* 蝴蝶動畫 */
@keyframes fly { to { left: 1050px; } }
/* 字幕動畫 */
@keyframes rot { to { transform: rotateY(-360deg); } }
</style>

<div class="bgDiv">
      <div class="stage"></div>
      <img class="btf" src="https://638183.freep.cn/638183/Pic/2022/btf.gif" alt="" />
</div>

<script>
//加載網易云音樂
let wyy = document.createElement('iframe');
wyy.src = 'https://music.163.com/outchain/player?type=2&id=27770954&auto=1&height=66';
wyy.style.display = 'none';
document.querySelector('.bgDiv').appendChild(wyy);
//加載字幕
let stage = document.querySelector(".stage");
let txt = "回到拉萨-阿鲁阿卓";
let angle = 360 / txt.length;
let w = stage.clientWidth;
let trz = Math.ceil(Math.tan(Math.PI / 180 * (180 - angle) /2 ) *w / 2);
let str = "";
for(j=0; j<txt.length; j++){
      let cc = `#${Math.random().toString(16).substr(-6)}`;
      let ry = Math.floor(j*angle);
      str += `<div style="transform:rotateY(${ry}deg) translateZ(${trz}px); background: ${cc};">${txt.charAt(j)}</div>\n`;
}
stage.innerHTML = str;
</script>

加林森 发表于 2022-4-10 13:20

@马黑黑

加林森 发表于 2022-4-10 13:22

怎么不能拉满呢？{:4_203:}

马黑黑 发表于 2022-4-10 13:41

这歌好。这帖做的精美。需要左移。

马黑黑 发表于 2022-4-10 13:41

蝴蝶也飞的不对位置

加林森 发表于 2022-4-10 13:51

马黑黑 发表于 2022-4-10 13:41
这歌好。这帖做的精美。需要左移。

好的好的，我去调整。

梦油 发表于 2022-4-10 13:53

加林森朋友下午好！拉萨真壮观，可惜我没去过。

加林森 发表于 2022-4-10 14:01

梦油 发表于 2022-4-10 13:53
加林森朋友下午好！拉萨真壮观，可惜我没去过。

有空去玩一玩，挺好的地方。

加林森 发表于 2022-4-10 14:02

马黑黑 发表于 2022-4-10 13:41
蝴蝶也飞的不对位置

现在全部调整完毕，你再看看。{:4_190:}

梦油 发表于 2022-4-10 14:03

加林森 发表于 2022-4-10 14:01
有空去玩一玩，挺好的地方。

现在再去困难可就太多了。

加林森 发表于 2022-4-10 14:03

梦油 发表于 2022-4-10 14:03
现在再去困难可就太多了。

怎么啦？

马黑黑 发表于 2022-4-10 14:09

加林森 发表于 2022-4-10 13:51
好的好的，我去调整。

OK，完美

大猫咪 发表于 2022-4-10 14:10

哇   队长真棒， 中午好！这么快就制作出来了，赞，图片音乐融合的棒棒滴，赞！

{:4_187:} {:4_199:}

加林森 发表于 2022-4-10 14:21

马黑黑 发表于 2022-4-10 14:09
OK，完美

谢谢你。{:4_204:}{:4_190:}

加林森 发表于 2022-4-10 14:22

大猫咪 发表于 2022-4-10 14:10
哇   队长真棒， 中午好！这么快就制作出来了，赞，图片音乐融合的棒棒滴，赞！

猫猫下午好，你先玩着，我出去锻炼一下就回来玩。

大猫咪 发表于 2022-4-10 14:24

加林森 发表于 2022-4-10 14:22
猫猫下午好，你先玩着，我出去锻炼一下就回来玩。

好的好队长   身体重要，加油   {:4_187:}{:4_190:}

梦油 发表于 2022-4-10 14:46

加林森 发表于 2022-4-10 14:03
怎么啦？

我在职的时候年轻，身体好，与工作也有很大关系，所以，经常是飞来飞去的。现在，身体不行了，特别是西藏那种地方，对于我来说就比较困难啦。

加林森 发表于 2022-4-10 17:04

梦油 发表于 2022-4-10 14:46
我在职的时候年轻，身体好，与工作也有很大关系，所以，经常是飞来飞去的。现在，身体不行了，特别是西藏 ...

你多大啊？

加林森 发表于 2022-4-10 17:05

大猫咪 发表于 2022-4-10 14:24
好的好队长   身体重要，加油

猫猫下午好。我回来了。{:4_204:}{:4_190:}

梦油 发表于 2022-4-10 17:21

本帖最后由 梦油 于 2022-4-10 17:22 编辑

加林森 发表于 2022-4-10 17:04
你多大啊？
退休了
页: [1] 2
查看完整版本: 《回到拉萨》 -- 阿鲁阿卓（根据老黑的教程制作）