论坛 › 欢乐水吧 › html5电波测试

亚伦影音工作室 发表于 2024-10-13 08:44

html5电波测试

本帖最后由 亚伦影音工作室 于 2024-10-13 09:09 编辑 <br /><br /><style>

      
   #papa{
        position: relative;
        width: 1164px;
        height: 640px;
      margin-left:-300px;
        margin-top:160px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:#000 url(https://pic.imgdb.cn/item/66fb8410f21886ccc0a62100.webp)no-repeat center/cover;
        overflow: hidden;
}

#cop{position: absolute; width: 360px;
            height: 360px;cursor: pointer;
            left: 40px;z-index: 20;
            top: 140px;}
      /* 保持大小不变的小圆圈*/
      .dot {
            position: absolute;
            width: 60px;
            height: 60px;
            left: 134px;
            top: 134px;
         opacity: 0.5;
            border: 3px solid #00ff00;
            border-radius: 50%;
            z-index: 2;
      }
      /* 产生动画（向外扩散变大）的圆圈*/
      .pulse {
            position: absolute;
            width: 320px;
            height: 320px;
            left: 2px;
            top: 2px;
            border: 6px solid #00ff00;
         
border-radius: 50%;
                z-index: 1;
            opacity: 0;
      
            animation: warn 2s ease-out;
         
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 20px #00ff00;
}

.stop .pulse{animation-play-state: paused;}
      .pulse1 {
            position: absolute;
            width: 320px;
            height: 320px;
            left: 2px;
            top: 2px;
            border: 6px solid #00ff00;
            
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
         animation: warn1 2s ease-out;
      
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 20px #00ff00;
      }
.stop .pulse1{animation-play-state: paused;}
      .pulse2 {
            position: absolute;
            width: 320px;
            height: 320px;
            left: 2px;
            top: 2px;
            border: 6px solid #00ff00;
            
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
         animation: warn2 2s ease-out;
      
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 20px #00ff00;
      }
.stop .pulse2{animation-play-state: paused;}

      @keyframes warn {0% {transform: scale(0.3);opacity: 0.3;}
            25% {transform: scale(0.1);opacity: 0.4;}
            50% {transform: scale(0.5);opacity: 0.5;filter: hue-rotate(160deg); }
            75% {transform: scale(0.8);opacity: 0.6;}
            100% {transform: scale(1);opacity: 0.0;}
      }
      @keyframes warn1 {
            0% {transform: scale(0.3);opacity: 0.3;}
            25% {transform: scale(0.3);opacity: 0.4;}
            50% {transform: scale(0.3);opacity: 0.5;filter: hue-rotate(180deg); }
            75% { transform: scale(0.5);opacity: 0.6;}
            100% {transform: scale(0.8); opacity: 0.0}
      }
      @keyframes warn2 {
            0% {transform: scale(0.4);opacity: 0.3;}
            25% {transform: scale(0.5);opacity: 0.4;}
            50% {transform: scale(0.8);opacity: 0.5;filter: hue-rotate(360deg); }
            75% { transform: scale(1);opacity: 0.6;}
            100% {transform: scale(1.2); opacity: 0.0}
      }
.zt{list-style: none; left: 300px;top: 100px;width:600px;height:500px;position:absolute;z-index: 4;overflow:hidden;}
.zt e{width: 100%;height: 600px;top: 20px;position:relative;animation: myfirst 100s 1 ;opacity: 0.0;line-height: 600px;text-align: center;font: normal 3em/1.5em 华文行楷;color: #000;transition: all .5s;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);}
@keyframes myfirst {0% {opacity: 0;transform:scale(0)}10% {opacity: 1;transform:scale(1)}15% {opacity: 1;transform:scale(1)}50%{opacity: 0;transform:scale(1) }}
    </style>
<div id="papa">
<div id="cop"><divid="testImg">
    <div class="dot"></div>
    <div class="pulse"></div>
    <div class="pulse1"></div>
<div class="pulse2"></div>
</div>
</div>
<ul class="zt">
<e><div style="transform: scale(2)" >情人 </div> <br><div style="transform: scale(1)" > 作词：刀郎<br>作曲：刀郎<br>演唱：刀郎</div></e>
</ul>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/a7/5b/79/3fe65c10759fbb9de352d8b4b16ed72c/audio.mp3" loop autoplay>
</audio>
</div>

<script>
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
testImg.onclick = () => aud.paused ? aud.play(): aud.pause();
</script>

梦油 发表于 2024-10-13 09:13

图美、曲美、播放器也美。

红影 发表于 2024-10-13 09:21

这电波扩散漂亮，而且节奏和歌曲很相符。这个制作漂亮{:4_199:}

红影 发表于 2024-10-13 09:25

字体设计也漂亮，到了时间还能隐去。
欣赏亚伦老师好帖{:4_199:}

查看完整版本: html5电波测试