论坛 › 『唯美音画』 › 谁能禁止我的爱

宁静 发表于 2023-5-6 23:26

谁能禁止我的爱

本帖最后由 宁静 于 2023-5-7 14:12 编辑 <br /><br /><style>

.outer { left:-220px; width: 1300px; height: 750px; top: 150px; background: darkred url('https://111t.net/assets/file/zp/20230507141043.gif') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
.sky { position: absolute; width:1300px; inherit; height: 200px;left: 0px;top: 10px; background: url('https://pic.imgdb.cn/item/6422d696a682492fccd82792.png'); animation: cloud_fly 40s linear infinite;}
.outer meter { position: absolute; width: 100px; left: 50px; left: 280px;top: 410px;bottom: 60px; transform: rotate(-90deg); cursor: pointer; }
.btn { position: absolute; left: 290px; bottom: 110px; width: 80px; height: 10px; top: 360px;background: green; border-radius: 0 100%;cursor: pointer; animation: btn_rot 1s linear infinite; }
.btn::before { position: absolute; content: ''; left:calc(50% - 5px); top: calc(50% - 40px); width: 10px; height: 80px;background: darkgreen; border-radius: 0 100%; }

@keyframes cloud_fly { from { background-position: 0 0; } to { background-position: -799px 0; } }
@keyframes btn_rot { to { transform: rotate(1turn); } }

.txtBg {
      position: absolute;
      left: 640px;
       top: 90px;
      font-size: 3.5rem;
      color: transparent;
      width: 600px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background-image: linear-gradient(90deg,green, olive, tomato, green);
      background-size: 600px 100px;
      background-position: 600px 0;
      border: 1px solid;
      background-clip: text;
      -webkit-background-clip: text;
      animation: chgc 2s linear infinite;
}

</style>
<div class="outer">
<div class="txtBg">谁能禁止我的爱</div>
<img src=" " alt="" style="position: absolute; left: 750px; top:130px;mix-blend-mode: multiply; transform: translate(30px, 40px) rotate(360deg); " />
                        
      <div class="sky"></div>
      <meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
      <div class="btn"></div>
</div>
<audio id="aud" src="https://wx.ttt.dj/data/nfs/mp3/snjz.mp3" autoplay="autoplay" loop="loop"></audio></div>
<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>      </div>
      </div>
<br><br><br><br><br><br><br><br><br><br>

宁静 发表于 2023-5-6 23:28

手机欣赏点击小山上的风车杆

宁静 发表于 2023-5-6 23:28

最喜欢的一首双吉他演奏

宁静 发表于 2023-5-6 23:30

本帖最后由 宁静 于 2023-5-6 23:40 编辑

播放器--（风车杆）随音乐会变换音乐

沉默 发表于 2023-5-6 23:44

冲进来。。

沉默 发表于 2023-5-6 23:47

回2个就可以了

墨羽 发表于 2023-5-7 10:52

哼唱版，白云朵朵飘，很漂亮!

一抹微蓝 发表于 2023-5-7 19:59

谁也不能禁止，好看好听{:10_402:}

撒哈拉的雨 发表于 2023-5-8 09:58

减压的轻音乐{:9_399:}

撒哈拉的雨 发表于 2023-5-8 09:59

宁静 发表于 2023-5-6 23:30
播放器--（风车杆）随音乐会变换音乐

我怎么变换不了

查看完整版本: 谁能禁止我的爱