亚伦影音工作室 发表于 2025-2-14 16:42

还没有完成[电脑欣赏最佳]

本帖最后由 亚伦影音工作室 于 2025-2-21 06:05 编辑 <br /><br /><style type="text/css">
#papa{left: -42%; top: 30%; width:1186px;position: relative; height:720px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:linear-gradient(0deg, #800 2%,#ddd    8%,rgba(2, 2, 2, 0) 10%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%),url('https://file.moyublog.com/d/file/2022-01-10/2gjjv1wfsfw.jpg') no-repeat center/cover;position: relative;}
#ppm{position: absolute; width: 100%; height: 100%; opacity:1; z-index: 1;
background:url(https://pic1.imgdb.cn/item/67aefe6cd0e0a243d4ff228d.png)no-repeat center/100% 100%; border-radius: 0px;
bottom: 0; left:0px;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 1;bottom: 0;background:url(https://pic1.imgdb.cn/item/67aefd3fd0e0a243d4ff2222.png)no-repeat center/100% 100%;}
#bnt{left: 0px;bottom: 6px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;height: 50px;border-radius: 0%;cursor: pointer;}

#pic{position:absolute;top:25px; left:28px;background:#ccc;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:25px;
      height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px;}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom:14px; cursor: pointer;right:1%;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }


#sjd {left: 4%;z-index: 8;width: 70%; height: 25px; transform:scale(1);bottom: 12px;
             position: absolute; align-items: center;}
#percentage{margin:0px 35px;
            position: relative;border-radius: 20px;
         width: 85%; height: 5px;border-radius: 20px;

             }
#duration{margin: 0px 0px;color: #eee;font: 400 14px sans-serif;position: absolute;
             }
#currentTime{margin: 0px -20px;color: #eee;font: 400 14px sans-serif;position: absolute;
            }
#yink {left: 70%;bottom: 4px;width: 40%;height: 50px;z-index: 8; transform:scale(.8);
             position: absolute;overflow: hidden; align-items: center; background:#0000; border-radius: 10px;}

#volumeSlider{margin: 20px 42px;
             position: absolute;z-index: 40;
         width: 55%; height: 5px;border-radius: 20px;

}
input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #eee;
}
::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f44336;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 5 10 5 0 / 0px 0px 0 2000px;
}
#loopbnt{   z-index: 91;
      position:absolute;
      width: 25px;
      height: 20px;background:#0000;
      bottom: 18px;border-radius: 0px;
   left: 71%;filter:invert(100%)hue-rotate(180deg);
      cursor: pointer;
    }

#swithimg{margin: 12px 10px;filter:invert(90%)hue-rotate(0deg);z-index: 41;
             position: absolute;}

</style>
<div id="papa">
<div id="ppm"></div>
<div id="ppcm" ></div>
<div id="bnt"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="sjd">
    <span id="duration"></span> <input type="range" min="0" max6="100" step="0.01" value="0" onchange="seek(this.value)"id="percentage"><span id="currentTime"></span>
</div>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
<div id="yink">
<img src="https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png" height="30" width="30" id="swithimg">
<inputtype="range" min="0" max="1" step="0.1" value="0.9" id="volumeSlider">
</div>

<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
</div>

<audio src="https://img2.oldkids.cn/upload/2025/02/06/blog_260848378_20250206101955994.mp3" id="aud"autoplay ></audio>

<script>
var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
    aud.volume =volumeSlider.value;
});
var aud= document.getElementById("aud");
   function muteAudio() {
            aud.muted= true;
      }
   function unmuteAudio() {
            aud.muted= false;
      }
   window.onload = function(){
      var swithimg = document.getElementById("swithimg");
      var mm = true;
      swithimg.onclick= function(){
            if (mm == true) { muteAudio();volumeSlider.value=0;
                swithimg.src="https://pic1.imgdb.cn/item/67a8b6afd0e0a243d4fd95f3.png";
                return mm=false;
            }else{unmuteAudio(); volumeSlider.value=0.8;
                swithimg.src="https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png";
                return mm=true;
            }   
      };      
    };
class AudioPlayer {
      constructor(audioElement) {
      this.audio = audioElement;
      }
   getTime() {
      const currentTime = this.audio.currentTime; // 当前时长
      const duration = this.audio.duration; // 总时长
      const percentage = duration ? (currentTime / duration) * 100 : 0;
      return {
          currentTime: currentTime,
          duration: duration,
          percentage: percentage
      };
      }
    }
let audio = document.getElementById('aud');
    let player = new AudioPlayer(audio);
// 回显播放时间
    function updateTime() {
      const time = player.getTime();
      document.getElementById('currentTime').innerHTML = formatTime(time.currentTime);
      document.getElementById('duration').innerHTML = formatTime(time.duration);
      document.querySelector('input').value = time.percentage;
    }
// 格式化播放时间
    function formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }
// 步进器控制播放进度
    function seek(percentage) {
      const duration = player.getTime().duration;
      player.audio.currentTime = duration * (percentage / 100);
    }
   setInterval(updateTime, 1000);
// 按钮全控
bnt.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',ppcm.style.opacity= '0',ppm.style.opacity = '1') : (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',ppcm.style.opacity= '1',ppm.style.opacity = '0');
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
//全屏
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}
function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}

</script>

红影 发表于 2025-2-14 16:44

漂亮的变色音画，欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-2-14 17:56

谢谢精彩分享，祝老师节日快乐{:4_191:}

亚伦影音工作室 发表于 2025-2-14 18:33

本帖最后由 亚伦影音工作室 于 2025-2-15 15:05 编辑 <br /><br /><div style="text-align:center;left: 5%;position: relative;">
       
        <button onclick="makeBig()">60%</button>
        <button onclick="makeSmall()">40%</button>
        <button onclick="makeNormal()">100%</button>
        <br>
       


<div style="width: 100%;position: absolute;MARGIN-LEFT:-320px;MARGIN-top:150px;">


<iframe    id="guoke" frameborder="0" height="750" marginheight="0" marginwidth="0" scrolling="no" src="https://bbs.cnzv.cc/mpv.php/up-3852-1739530226.html" width="1286"></iframe>
</div>
        </div>

<script>
        var guoke=document.getElementById("guoke");
       
        function makeBig(){ guoke.style.WebkitTransform="scale(0.6)";
               
        }
        function makeSmall(){
                guoke.style.WebkitTransform="scale(0.4)";
        }
        function makeNormal(){
      guoke.style.WebkitTransform="scale(0.6,1.2)";
         
        }

</script>


<div style="height: 1680px;">&nbsp;</div>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>





<p>&nbsp;</p>

<p>&nbsp;</p

梦油 发表于 2025-2-14 21:11

欣赏佳作，问候亚伦。

小辣椒 发表于 2025-2-14 21:42

还没有完成，是亚纶的半成品啊{:4_199:}

小辣椒 发表于 2025-2-14 21:43

准备做变色效果的背景{:4_178:}
页: [1]
查看完整版本: 还没有完成[电脑欣赏最佳]