红影 发表于 2022-4-1 12:59

愿幸福树带给你满满的幸福 贺九儿芳辰

<style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-304px; top:120px; width: 1200px; height: 680px; background-image: url('https://pic.imgdb.cn/item/6246839327f86abb2a142895.jpg'); box-shadow: 4px 4px 5px #888; background-size: 1200px 680px;

border-radius:12px; background-position: 1200px 0;animation: mv 28s linear infinite; }
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }

body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
      margin: auto;
      width: 400px;
      text-align: center;
      font-size: 4rem;
      font-weight: bold;
      color: red;
      transform-origin: top;
      animation: yao 0.8s linear infinite alternate;
}
/* 动画 */
@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}
/* 播放按钮 */
.picBtn {
      width: 90px;
      height: 84px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('https://pic.imgdb.cn/item/624684a827f86abb2a163234.gif') no-repeat;
      cursor: pointer;
}

</style>

<div id="xq" >
      <div id="baiBox" style="position: absolute; left:50px; top: 80px; ">生日快乐</div>


      <div style="position: absolute; left:600px; top: 250px; width:488px;">
                <img alt="" src="https://pic.imgdb.cn/item/6246845127f86abb2a1596ab.gif"/>
               
      </div>

      

      <!-- 控制按钮应是父盒子的第一代子元素 -->
      <div style="position:absolute; width:90px; left: 60px; top:calc(100% - 110px); text-align:center;">
                <button id="picBtn" class="picBtn"></button>
      </div>
</div>
<!-- 因为播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=33004810.mp3"

></audio>

<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/624684a827f86abb2a163234.gif')") :

(mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/6246847227f86abb2a15d318.png')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/6246847227f86abb2a15d318.png')";
});
</script>
<br><br><br><br><br><br><br><br>

红影 发表于 2022-4-1 13:00

九儿订购的幸福树还没到货，现在帖子里送你一棵。祝生日快乐{:4_187:}

红影 发表于 2022-4-1 13:01

要去志愿者了，匆忙一个贺帖，愿九儿幸福快乐{:4_177:}

小九 发表于 2022-4-1 13:08

谢谢影子！ 看到好美的幸福树！ 一起开心快乐！ 你也要多注意防护，安全第一哈{:5_150:}{:4_187:}

大猫咪 发表于 2022-4-1 13:45

红影制作真漂亮，用心之作清新雅致， 真清爽，一起祝福小九生日快乐，幸福每一天！

{:4_204:}{:4_177:}{:4_191:}{:4_204:}{:5_166:}

小九 发表于 2022-4-1 16:12

大猫咪 发表于 2022-4-1 13:45
红影制作真漂亮，用心之作清新雅致， 真清爽，一起祝福小九生日快乐，幸福每一天！

{:4_177: ...

谢谢猫咪的祝福！也祝福你的每一天健康快乐！{:4_187:}{:4_171:}{:4_191:}

红影 发表于 2022-4-1 20:20

小九 发表于 2022-4-1 13:08
谢谢影子！ 看到好美的幸福树！ 一起开心快乐！ 你也要多注意防护，安全第一哈

为了做无缝滚动，这个帖子我裁了两遍，先是把底图裁开修改两端色差，然后是幸福树，其实这棵树是在图片的两端各占了一半{:4_173:}

小九 发表于 2022-4-1 20:29

红影 发表于 2022-4-1 20:20
为了做无缝滚动，这个帖子我裁了两遍，先是把底图裁开修改两端色差，然后是幸福树，其实这棵树是在图片的 ...

也就是说，用了2张图片吗？{:4_187:}

加林森 发表于 2022-4-1 20:49

好漂亮的祝福帖。红影真厉害。我们共同祝福小九生日快乐！{:4_204:}

红影 发表于 2022-4-2 11:20

小九 发表于 2022-4-1 20:29
也就是说，用了2张图片吗？

不是，是有一张裁开，两边去掉接缝处的痕迹，然后把幸福树扣出来，放在当中，再把拼好的图图裁开，重新接好，看起来就是无缝的了{:4_173:}

红影 发表于 2022-4-2 11:21

加林森 发表于 2022-4-1 20:49
好漂亮的祝福帖。红影真厉害。我们共同祝福小九生日快乐！

谢谢队长，急急忙忙弄了个，九儿生日了，必须要庆祝一下呢{:4_173:}

加林森 发表于 2022-4-2 11:24

红影 发表于 2022-4-2 11:21
谢谢队长，急急忙忙弄了个，九儿生日了，必须要庆祝一下呢

是的是的。你这个制作真漂亮。{:4_199:}

红影 发表于 2022-4-2 13:07

加林森 发表于 2022-4-2 11:24
是的是的。你这个制作真漂亮。

谢谢队长鼓励{:4_187:}

加林森 发表于 2022-4-2 13:12

红影 发表于 2022-4-2 13:07
谢谢队长鼓励

向你学习

红影 发表于 2022-4-2 14:32

加林森 发表于 2022-4-2 13:12
向你学习

应该向队长学习才对，队长做了那么多练习呢，应该做得少{:4_173:}

加林森 发表于 2022-4-2 16:54

红影 发表于 2022-4-2 14:32
应该向队长学习才对，队长做了那么多练习呢，应该做得少

但你制作得漂亮啊。

红影 发表于 2022-4-2 20:58

加林森 发表于 2022-4-2 16:54
但你制作得漂亮啊。

谢谢队长鼓励{:4_187:}

加林森 发表于 2022-4-2 21:09

红影 发表于 2022-4-2 20:58
谢谢队长鼓励

不客气的。{:4_190:}
页: [1]
查看完整版本: 愿幸福树带给你满满的幸福 贺九儿芳辰