东篱闲人 发表于 2023-2-10 20:28

一曲红尘一场梦

本帖最后由 东篱闲人 于 2023-2-10 20:30 编辑 <br /><br /><style type="text/css">
/* 父框盒子 */
#xq { position: relative; left:-300px; top:120px; width: 1200px; height:800px; background-image: url('https://s1.ax1x.com/2023/02/10/pShMeYR.jpg'); box-shadow: 4px 4px 5px #888; background-size: 1400px 800px; 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: 1.5rem;
      font-weight: bold;
      color:#DF7401;
      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: 100px;
      height: 100px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('http://image.hnol.net/c/2022-02/24/15/202202241559481151-5087368.gif') no-repeat;
      cursor: pointer;
}
/* 轱辘诗 */
.hxBox { position: absolute; left:220px; top:150px; width: 160px; height: 160px; font-family: '楷体','微软雅黑'; font-size: 24px;transform-origin: 50 50; animation: go 24s linear infinite;}
@keyframes go { to { transform: rotate(-360deg);} }
.hxBox path { fill: none; }
.hxBox svg { display: block; overflow: visible; }
</style>

<div id="xq" >
      <div id="baiBox" style="position: absolute; left:680px; top: 80px; ">▓□〓≡╝烟雨草堂▓□〓≡╝</div>

<div class="hxBox">
      <svg viewBox="0 0 100 100">
                <path d="M 0, 50 a 50, 50 0 1, 1 0, 1 z" id="yuan" />
                <text stroke="#B40431">
                        <textPath xlink:href="#yuan">
                              
                        </textPath>
                </text>
      </svg>
</div>
      

      <!-- 控制按钮应是父盒子的第一代子元素 -->
      <div style="position:absolute; width:50px; left: 600px; top:calc(100% - 140px); 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=1912648839.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('http://image.hnol.net/c/2022-02/24/15/202202241559481151-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-02/24/16/20220224160408591-5087368.gif')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('http://image.hnol.net/c/2022-02/24/16/20220224160408591-5087368.gif')";
});
</script>
<style>

.mvBox {

        position: relative;

        width: 1000px;

        height: 100px;
      left:1px;
      top:-80px;
      color:#DF7401;

        line-height: 40px;

        font-size: 15px;

        animation: mq linear 10s infinite;

}

@keyframes mq {

        from { transform: translateX(200px); }

        to { transform: translateX(0); }

}

</style>



<div class="mvBox">我的痴情错付无情的人，我的天真换来了悔恨。从此走不出你给的回忆，往事悠悠空余恨.......</div>
<br><br><br><br><br><br><br><br>

红影 发表于 2023-2-10 21:15

摆动字加滚动图片，这个帖子做得真漂亮，东篱大哥真棒{:4_199:}

东篱闲人 发表于 2023-2-10 21:52

红影 发表于 2023-2-10 21:15
摆动字加滚动图片，这个帖子做得真漂亮，东篱大哥真棒

喝水。。。。{:4_180:}{:4_180:}{:4_180:}

马黑黑 发表于 2023-2-10 22:19

一曲红，尘一场，梦

马黑黑 发表于 2023-2-10 22:19

好帖。赞。

小辣椒 发表于 2023-2-10 22:23

老头，也是开始复习了，前面玩过的播放器重新出来了，还加了这么漂亮的移动图图效果{:4_178:}

庶民 发表于 2023-2-11 04:59

我们在欣赏的同时得到一种享受。

东篱闲人 发表于 2023-2-11 10:46

马黑黑 发表于 2023-2-10 22:19
好帖。赞。

{:4_176:}

东篱闲人 发表于 2023-2-11 10:47

小辣椒 发表于 2023-2-10 22:23
老头，也是开始复习了，前面玩过的播放器重新出来了，还加了这么漂亮的移动图图效果

嗯嗯，温故知新。。。{:5_117:}

东篱闲人 发表于 2023-2-11 10:47

庶民 发表于 2023-2-11 04:59
我们在欣赏的同时得到一种享受。

{:4_180:}

海笑 发表于 2023-2-11 10:54

欣赏老师佳作！

马黑黑 发表于 2023-2-11 11:19

东篱闲人 发表于 2023-2-11 10:46


周末来点狠的
{:4_191:}

东篱闲人 发表于 2023-2-11 11:28

海笑 发表于 2023-2-11 10:54
欣赏老师佳作！

问好海笑，来，喝点。。。{:4_176:}

东篱闲人 发表于 2023-2-11 11:29

马黑黑 发表于 2023-2-11 11:19
周末来点狠的

三盅全会。。。。{:4_170:}

馨雨萦儿 发表于 2023-2-11 11:45

东篱闲人 发表于 2023-2-11 11:29
三盅全会。。。。

你也知道这个说法？

馨雨萦儿 发表于 2023-2-11 11:45

{:4_190:}我自带

马黑黑 发表于 2023-2-11 12:06

东篱闲人 发表于 2023-2-11 11:29
三盅全会。。。。

哎呀，你会的还真多{:4_172:}

东篱闲人 发表于 2023-2-11 19:14

馨雨萦儿 发表于 2023-2-11 11:45
你也知道这个说法？

不太清楚，瞎说的。。。{:5_117:}

东篱闲人 发表于 2023-2-11 19:14

马黑黑 发表于 2023-2-11 12:06
哎呀，你会的还真多

马马虎虎。。。。{:5_117:}

马黑黑 发表于 2023-2-11 19:15

东篱闲人 发表于 2023-2-11 19:14
马马虎虎。。。。

不马虎了
页: [1] 2
查看完整版本: 一曲红尘一场梦