音乐播放器 CSS模板

最新推荐文章于 2024-09-09 06:59:41 发布
TG科技社
最新推荐文章于 2024-09-09 06:59:41 发布
阅读量215
点赞数
文章标签： css 前端
本文链接：https://blog.youkuaiyun.com/m0_55699924/article/details/134488915
版权
效果预览（挺多功能没做）
请添加图片描述
<!DOCTYPE html>
<html>
    <head>
        <title>音乐播放器</title>
        <meta charset="UTF-8" />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,body {
                width: 100%;
                height: 100%;
            }
            body {
                background: url(./background/miku.jpg);
                /* backdrop-filter: blur(20px); */
                background-repeat: no-repeat;
                background-size: cover;
            }

            #settingBackground {
                position: fixed;
                top: 5%;
                left: 5%;
                width: 90%;
                height: 90%;
                border-top: 1px solid rgba(255,255,255,0.5);
                border-left: 1px solid rgba(255,255,255,0.5);
                background: rgba(127,127,127,0.75);
                backdrop-filter: blur(100px);
                border-radius: 15px;
                z-index: 999;
                display: none;
            }
            #setting {
                position: fixed;
                top: 10%;
                left: 10%;
                width: 85%;
                height: 72%;
                color: white;
                overflow-x: hidden;
                overflow-y: auto;
                z-index: 1000;
                display: none;
            }
            #setting::-webkit-scrollbar{
                width: 4px;
            }
            #setting::-webkit-scrollbar-thumb {
                background: white;
                opacity: 0.5;
                border-radius: 2px;
            }
            #closeSetting {
                height: 5%;
                padding: 0.5% 1% 1.5% 1%;
                position: absolute;
                bottom: 5%;
                right: 6%;
                background: none;
                color: #FFF;
                border: 1px solid #FFF;
                border-radius: 2px;
            }
            #closeSetting:active {
                color: #BBB;
                border: 1px solid #BBB;
            }
            #openSetting {
                position: fixed;
                top: 5%;
                left: 5%;
            }
            #demo {
                width: 100%;
                height: 100%;
            }
            .addonButton {
                position: fixed;
                bottom: 5%;
            }
            #progress {
                color: white;
                position: fixed;
                bottom: 6%;
                left: 20%;
                width: 50%;
            }
            #meter {
                width: 75%;
            }
        </style>
    </head>
    <body>
        <div id="demo"><svg class="addonButton" style="left: 5%;transform: rotateY(180deg);" viewBox="0 0 1024 1024"><path d="M832 160.128c0-17.664-14.336-32-32-32S768 142.464 768 160.128l0 282.88L214.592 134.592c-18.176-10.112-39.936-10.048-58.112 0C138.24 144.768 127.424 162.88 127.424 183.168l0 656.64c0 20.224 10.816 38.464 29.056 48.576C165.568 893.44 175.488 896 185.472 896s19.968-2.56 29.056-7.616L768 579.968l0 284.096c0 17.664 14.336 32 32 32s32-14.336 32-32L832 160.128zM191.808 829.248 188.672 192l573.312 319.488L191.808 829.248z" fill="#FFF"></path></svg>
            <svg id="openSetting" onclick="showSetting()" viewBox="0 0 1024 1024"><path d="M439.264 208a16 16 0 0 0-16 16v67.968a239.744 239.744 0 0 0-46.496 26.896l-58.912-34a16 16 0 0 0-21.856 5.856l-80 138.56a16 16 0 0 0 5.856 21.856l58.896 34a242.624 242.624 0 0 0 0 53.728l-58.88 34a16 16 0 0 0-6.72 20.176l0.848 1.68 80 138.56a16 16 0 0 0 21.856 5.856l58.912-34a239.744 239.744 0 0 0 46.496 26.88V800a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16v-67.968a239.744 239.744 0 0 0 46.512-26.896l58.912 34a16 16 0 0 0 21.856-5.856l80-138.56a16 16 0 0 0-4.288-20.832l-1.568-1.024-58.896-34a242.624 242.624 0 0 0 0-53.728l58.88-34a16 16 0 0 0 6.72-20.176l-0.848-1.68-80-138.56a16 16 0 0 0-21.856-5.856l-58.912 34a239.744 239.744 0 0 0-46.496-26.88V224a16 16 0 0 0-16-16h-160z m32 48h96v67.376l28.8 12.576c13.152 5.76 25.632 12.976 37.184 21.52l25.28 18.688 58.448-33.728 48 83.136-58.368 33.68 3.472 31.2a194.624 194.624 0 0 1 0 43.104l-3.472 31.2 58.368 33.68-48 83.136-58.432-33.728-25.296 18.688c-11.552 8.544-24.032 15.76-37.184 21.52l-28.8 12.576V768h-96v-67.376l-28.784-12.576c-13.152-5.76-25.632-12.976-37.184-21.52l-25.28-18.688-58.448 33.728-48-83.136 58.368-33.68-3.472-31.2a194.624 194.624 0 0 1 0-43.104l3.472-31.2-58.368-33.68 48-83.136 58.432 33.728 25.296-18.688a191.744 191.744 0 0 1 37.184-21.52l28.8-12.576V256z m47.28 144a112 112 0 1 0 0 224 112 112 0 0 0 0-224z m0 48a64 64 0 1 1 0 128 64 64 0 0 1 0-128z" fill="#FFF"></path></svg>
            <svg class="addonButton" style="left: 10%;display: none" viewBox="0 0 1024 1024"><path d="M803.84 492.032 213.056 135.04C195.392 124.288 174.208 124.288 156.352 134.976 138.624 145.728 128 164.928 128 186.368l0 714.176c0 21.44 10.624 40.704 28.352 51.392C165.248 957.312 174.976 960 184.704 960c9.728 0 19.52-2.688 28.352-8.064l590.72-356.992c17.728-10.752 28.288-30.016 28.288-51.456C832.128 521.984 821.568 502.72 803.84 492.032zM189.568 891.712 187.136 193.792l578.624 349.696L189.568 891.712z" fill="#FFF"></path></svg>
            <svg class="addonButton" style="left: 10%;" viewBox="0 0 1024 1024"><path d="M288 128C270.336 128 256 142.336 256 160l0 768C256 945.664 270.336 960 288 960S320 945.664 320 928l0-768C320 142.336 305.664 128 288 128zM672 128C654.336 128 640 142.336 640 160l0 768c0 17.664 14.336 32 32 32s32-14.336 32-32l0-768C704 142.336 689.664 128 672 128z" fill="#FFF"></path></svg>
            <svg class="addonButton" style="left: 15%;" viewBox="0 0 1024 1024"><path d="M832 160.128c0-17.664-14.336-32-32-32S768 142.464 768 160.128l0 282.88L214.592 134.592c-18.176-10.112-39.936-10.048-58.112 0C138.24 144.768 127.424 162.88 127.424 183.168l0 656.64c0 20.224 10.816 38.464 29.056 48.576C165.568 893.44 175.488 896 185.472 896s19.968-2.56 29.056-7.616L768 579.968l0 284.096c0 17.664 14.336 32 32 32s32-14.336 32-32L832 160.128zM191.808 829.248 188.672 192l573.312 319.488L191.808 829.248z" fill="#FFF"></path></svg>
            <div id="progress">
                <span class="cTime time" id="cTime">00:00</span> <!-- 当前时间 -->
                <meter value="0" max="100" id="meter" ></meter><!-- 进度条 -->
                <span class="tTime time" id="tTime">00:00</span> <!-- 总的时间 -->
            </div>
        </div>
        <div id="settingBackground">
            <button id="closeSetting" onclick="hideSetting()">Close</button>
        </div>
        <div id="setting">
            <p style="font-size: 2em;color: cyan;">设置</p><br/>
            <p style="font-size: 1.5em;">背景</p>
            虚化程度
            <input 
            type="range"
            value="20"
            max="50"
            style="width: 50%" 
            id="Setting_backgroundBlur_set"
            onmousemove="Setting_backgroundBlur_set()"
            onclick="Setting_backgroundBlur_set()"
            />
            <span id="Setting_backgroundBlur_show"></span>
        </div>
        <script>
            var w = window.innerWidth;
            var h = window.innerHeight;
            document.getElementById("openSetting").style.height = h / 10 + "px";
            document.getElementById("openSetting").style.width = h / 10 + "px";
            var addonButton = document.getElementsByClassName("addonButton");
            for(var i = 0;i<addonButton.length;i++){
                addonButton[i].style.height = h / 20 + "px";
                addonButton[i].style.width = h / 20 + "px";
            }
            hideSetting = () => {
                document.getElementById("settingBackground").style.display = "none";
                document.getElementById("setting").style.display = "none"
                document.getElementById("demo").style.display = "block";
                document.getElementById("demo").style.display = "block"
            }
            showSetting = () => {
                document.getElementById("settingBackground").style.display = "block";
                document.getElementById("setting").style.display = "block"
                document.getElementById("demo").style.display = "none";
                document.getElementById("demo").style.display = "none"
            }
            addEventListener("keydown",(e)=>{
                if(e.key == "Enter"){
                    showSetting();
                }
            })
            Setting_backgroundBlur_set = () => {
                document.getElementById("Setting_backgroundBlur_show").innerHTML = 
                document.getElementById("Setting_backgroundBlur_set").value + "Px"

                document.body.style["backdrop-filter"] = 
                `blur(${document.getElementById("Setting_backgroundBlur_set").value}px)`
            }
            Setting_backgroundBlur_set()
        </script>
    </body>
</html>