红影 发表于 2022-7-29 00:30

【中伏消暑】第三天 宇


<style>
.diban {
      left: -302px;top:100px;
      width: 1200px;
      height: 675px;
      background: url('https://pic.imgdb.cn/item/62e2b8f6f54cd3f9378ab755.jpg') no-repeat;
      position: relative;
      box-shadow:00 8px #333;
      border-radius:12px;
      overflow: hidden;
}
.diban::before {
      content: '';
      position: absolute;
      width: 860px;
      height: 360px;
      background: url('https://pic.imgdb.cn/item/629aec090947543129e4726d.gif') no-repeat center/cover;
      opacity: .45;
      transform: rotate(-7deg);
      left:-10px; top: 430px;
}
.diban meter {
      position: absolute;
      width: 420px;
      left: 562px; bottom: 300px;
      transform: rotate(-98deg);
      cursor: pointer;
}
.btn {
      position: absolute;
      left: 683px; top: 150px;
      width: 120px; height: 15px;
      background: #334177;
      border-radius: 0 100%;
      cursor: pointer;
      animation: btn_rot 1s linear infinite; }
.btn::before {
      position: absolute; content: '';
      left: calc(50% - 7.5px);
      top: calc(50% - 60px);
      width: 15px; height: 120px;
      background: #334177; border-radius: 0 100%; }

@keyframes btn_rot { to { transform: rotate(1turn); } }

.upDiv {
      position: absolute;
      left: 120px; top: 160px;
      width: 380px;
      height: 400px;
      overflow: hidden;
}
.upDiv div {
      position: absolute;
      width: 100%;
      height: 380px;
      font-size:22px;
      text-align: center;
      top: 100%;
      color: #3A1BB1;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, .55);
      animation: fly 50s linear infinite;
}
@keyframes fly { to { top: -500px; } }
</style>

<div class="diban">
<div class="upDiv">
      <div id="txt">
离骚- 于文华<br>
词：屈原 曲：伍林发<br><br>
朝饮木兰之坠露兮 夕餐秋菊之落英<br><br>
苟余情其信姱以练要兮 长顑颔亦何伤<br><br>
擥木根以结茝兮 贯薜荔之落蕊<br><br>
矫菌桂以纫蕙兮 索胡绳之纚纚<br><br>
朝发轫于苍梧兮 夕余至乎县圃<br><br>
欲少留此灵琐兮 日忽忽其将暮<br><br>
吾令羲和弭节兮 望崦嵫而勿迫<br><br>
路曼曼其修远兮 吾将上下而求索<br><br>
朝发轫于天津兮 夕余至乎西极<br><br>
忽吾行此流沙兮 遵赤水而容与<br><br>
仆夫悲余马怀兮 蜷局顾而不行<br><br>
既莫足与为美政兮 吾将从彭咸之所居<br><br>
吾令羲和弭节兮 望崦嵫而勿迫<br><br>
路曼曼其修远兮 吾将上下而求索<br><br>
仆夫悲余马怀兮 蜷局顾而不行<br><br>
既莫足与为美政兮 吾将从彭咸之所居<br><br>
      </div>
</div>
        <meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
        <div class="btn"></div>
</div><br><br><br><br><br><br>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1842753637.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let meter = document.querySelector('#meter'), aud = document.querySelector('#aud'), btn = document.querySelector('.btn');

aud.addEventListener('timeupdate', () => {
        meter.value = aud.currentTime / aud.duration * 100;
});

btn.onclick = meter.onclick = () => aud.paused ? (aud.play(), btn.style.animationPlayState = 'running') :

(aud.pause(), btn.style.animationPlayState = 'paused');

</script>

樵歌 发表于 2022-7-29 07:12

这个图图选得好，唱腔在古色古香中无限余伤感，叹世道何不争。{:4_187:}

樵歌 发表于 2022-7-29 07:13

师妹半夜还在做贴，不要太累了哇{:4_190:}

浣溪沙 发表于 2022-7-29 07:28

古色古香,高端大气,赞{:4_178:}

马黑黑 发表于 2022-7-29 07:51

欣赏美帖。赞个。

小星世龙 发表于 2022-7-29 10:01

好图，图声融为一体，精彩！

红影 发表于 2022-7-29 22:53

樵歌 发表于 2022-7-29 07:13
师妹半夜还在做贴，不要太累了哇

还真有点累，而且觉得有点压力，觉得人都上火了。嗯，心理修炼还不够强大{:4_173:}

红影 发表于 2022-7-29 22:53

浣溪沙 发表于 2022-7-29 07:28
古色古香,高端大气,赞

谢谢沙沙鼓励，混作业呢{:4_173:}

红影 发表于 2022-7-29 22:54

马黑黑 发表于 2022-7-29 07:51
欣赏美帖。赞个。

用了黑黑之前的代码，谢了{:4_187:}

红影 发表于 2022-7-29 22:54

小星世龙 发表于 2022-7-29 10:01
好图，图声融为一体，精彩！

问好小星，多谢鼓励{:4_187:}

马黑黑 发表于 2022-7-29 23:02

红影 发表于 2022-7-29 22:54
用了黑黑之前的代码，谢了

又来

樵歌 发表于 2022-7-30 19:41

红影 发表于 2022-7-29 22:53
还真有点累，而且觉得有点压力，觉得人都上火了。嗯，心理修炼还不够强大

惹忙，随便找首歌贴上呗，犯不着没消暑反把自己搭进去中暑就不好了{:4_173:}

红影 发表于 2022-7-30 22:42

樵歌 发表于 2022-7-30 19:41
惹忙，随便找首歌贴上呗，犯不着没消暑反把自己搭进去中暑就不好了

消暑不累，我是说前面在忙的事情，晚上玩到凌晨不累的，但做PPT到那么晚，觉得真的累。

樵歌 发表于 2022-8-1 07:19

红影 发表于 2022-7-29 22:53
还真有点累，而且觉得有点压力，觉得人都上火了。嗯，心理修炼还不够强大

不是心理问题，是身体能否承受得这高强度作业。
我呆在家还整重感冒了呢

红影 发表于 2022-8-1 16:05

樵歌 发表于 2022-8-1 07:19
不是心理问题，是身体能否承受得这高强度作业。
我呆在家还整重感冒了呢

师兄可能空调吹多了吧。我现在还好，毕竟眼前的事应付完了。

樵歌 发表于 2022-8-2 20:42

红影 发表于 2022-8-1 16:05
师兄可能空调吹多了吧。我现在还好，毕竟眼前的事应付完了。

就是，三天前早上走汗了，冼澡后又吹空调，，，，
页: [1]
查看完整版本: 【中伏消暑】第三天 宇