QQ音乐页面效果模仿制作

最新推荐文章于 2025-05-16 21:57:27 发布
最新推荐文章于 2025-05-16 21:57:27 发布
阅读量4.2k 收藏 36
点赞数 35
CC 4.0 BY-SA版权
分类专栏： css实践项目 文章标签： html css 腾讯 javascript 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Eternity_matt/article/details/108139921

初学模仿QQ音乐界面

大概功能效果实现，css/html 部分代码集合,图片是本地图片需要的话可以在后置文件中提取

 
        <head>
         <style>
  body {}

        header {
            width: 100%;
            height: 80px;
            background: rgba(0, 0, 0, .3);
            position: absolute;
            z-index: 33;
            line-height: 80px;
            position: fixed;
        }

        .head-wrapper {
            width: 996px;
            height: 46px;

        }

        /* .head-logo {
            width: 600px;
            height: 100%;
        } */

        .head-jieshao {
            /* width: 300px; */
            height: 100%;
        }

        .head-qq {
            width: 159px;
            height: 100%;
            margin-right: 80px;
            margin-top: 15px;
            background-image: url('./image/logo.png');
        }

        .head-nav {
            width: 280px;
            height: 40px;
        }

        .head-nav li {
            font-size: 20px;
            margin-right: 80px;
            color: #fff;

        }

        .head-nav li:nth-of-type(1) {
            color: #31c27c;
        }

        .head-jieshao li {
            font-size: 20px;
            margin-left: 30px;
            color: #fff;
        }




        .first_container {
            height: calc(100vh + 80px);
            height: 110vh;
            background-image: url('./image/banner_pc.jpg');
            position: relative;
            top: -80px;
            z-index: 1;
            overflow: hidden;
            background-size: 100vw calc(100vh + 80px);
        }


        .download-title {
            width: 595px;
            height: 153px;
            position: absolute;
            top: 255px;
            left: 50%;
            transform: translateX(-50%);
            background-image: url('./image/img_index_6bc275f9.png');
            background-position: 0 -312px;
            z-index: 2;
        }

        .download-btn {
            width: 293px;
            height: 69px;
            position: absolute;
            top: 470px;
            left: 50%;
            transform: translateX(-50%);
            background-image: url('./image/img_index_6bc275f9.png');
            background-position: -416px -859px;
        }

        .download-bottom {
            height: 190px;
            position: absolute;
            bottom: 0;

            width: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-top: 1px solid rgba(255, 255, 255, .12);
        }

        .download-bottom ul {
            width: 1000px;
            margin: 0 auto;
        }

        .download-bottom li {
            width: 110px;
            height: 170px;
            background-image: url('./image/img_index_6bc275f9.png');
            background-position: -366px -940px;
            opacity: .4;
            cursor: pointer;
            margin-right: 170px;
            box-sizing: border-box;
        }

        .download-bottom li:last-of-type {
            margin-right: 0px;
        }

        .download-bottom li:first-of-type {
            border-top: 1px solid #fff;
            opacity: 1;
        }

        .download-bottom li:hover {
            opacity: 1;
            border-top: 1px solid #fff;
        }

        .download-jiantou {
            width: 36px;
            height: 20px;
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            animation: move 2s linear infinite;
            background-image: url('./image/img_index_6bc275f9.png');
            background-position: -1091px -161px;
            cursor: pointer;
        }

        @keyframes move {
            0% {
                bottom: 50px;
                opacity: 0;
            }

            50% {
                bottom: 45px;
                opacity: 1;
            }

            100% {
                bottom: 30px;
                opacity: 0;
            }
        }

        .star {
            width: 108px;
            height: 152px;
            display: block;
            position: absolute;
            right: -200px;
            top: -200px;
            animation: star 5s infinite;
            background-image: url('./image/star.png');
        }

        .star1 {
            width: 108px;
            height: 152px;
            display: block;
            position: absolute;
            right: 800px;
            top: -200px;
            animation: star1 11s infinite 1s;
            background-image: url('./image/star.png');
        }

        .star2 {
            width: 108px;
            height: 152px;
            display: block;
            position: absolute;
            right: 300px;
            top: -200px;
            animation: star2 6s infinite 3s;
            background-image: url('./image/star.png');
        }

        .star3 {
            width: 108px;
            height: 152px;
            display: block;
            position: absolute;
            right: 940px;
            top: -200px;
            animation: star3 6s infinite 1s;
            background-image: url('./image/star.png');
        }

        .star4 {
            width: 108px;
            height: 152px;
            display: block;
            position: absolute;
            right: 300px;
            top: -200px;
            animation: star4 12s infinite 0s;
            background-image: url('./image/star.png');
        }

        @keyframes star4 {
            0% {
                right: 300px;
                top: -200px;
                opacity: .8;
            }

            100% {
                right: 1300px;
                top: 700px;
                opacity: 0;
            }
        }

        @keyframes star2 {
            0% {
                right: 940px;
                top: -200px;
                opacity: .8;
            }

            100% {
                right: 1600px;
                top: 700px;
                opacity: 0;
            }
        }

        @keyframes star3 {
            0% {
                right: 300px;
                top: -200px;
                opacity: .8;
            }

            100% {
                right: 1000px;
                top: 700px;
                opacity: 0;
            }
        }


        @keyframes star1 {
            0% {
                right: 800px;
                top: -200px;
                opacity: .8;
            }

            100% {
                right: 1800px;
                top: 500px;
                opacity: 0;
            }
        }

        @keyframes star {
            0% {
                right: -200px;
                top: -200px;
                opacity: .8;
            }

            100% {
                right: 500px;
                top: 500px;
                opacity: 0;
            }
        }


        /* letter-spacing:20px    改变字间距 */

        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

        .second_container {
            height: 100vh;
            overflow: hidden;
            position: relative;
            top: -80px;
            z-index: 1;
            background-color: rgb(0, 0, 0);
            width: 100vw;
            /* overflow: hidden; */
        }

        .second_container:hover li {
            animation: blink1 1.2s both;
            display: block;
        }


        .pic_list1 li {
            height: 211px;
            width: 211px;
            background-image: url('./image/sprite1.jpg');
            background-repeat: no-repeat;
            /* animation: blink1 1.2s both; */
            display: none;
        }

        .second_little ul {
            height: 211PX;
            width: 100%;
        }

        .second_little {
            position: absolute;
            top: -90px;
            right: 0px;
            float: left;
            /* overflow: hidden; */
        }

        @keyframes blink1 {
            0% {
                opacity: 0;
                transform: scale(1.2);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }


        .second_container h2 {
            position: absolute;
            top: 450px;
            left: 660px;
            width: 587px;
            height: 145px;
            text-indent: -99em;
            overflow: hidden;
            background-image: url(./image/img_index_6bc275f9.png);
            background-position: -556px -630px;
            z-index: 100;
        }

        .second_container h3 {
            position: absolute;
            top: 550px;
            left: 750px;
            width: 404px;
            height: 69px;
            background-image: url(./image/img_index_6bc275f9.png);
            background-position: 0 -859px;
            z-index: 100;
        }


        /* ------—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */
        /* ------—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */
        /* ------—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */
        /* ------—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

        .third_container {
            height: 100vh;
            width: 100vw;
            background-color: rgb(0, 0, 0);
            position: relative;
            top: -80px;
            z-index: 1;
            background-image: url('./image/banner2.jpg');
            background-size: 100vw calc(100vh + 80px);

            overflow: hidden;

        }

        .third_container h2 {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -504px;
            margin-top: -130px;
            width: 554px;
            height: 149px;
            background-image: url('./image/img_index_6bc275f9.png');
            background-position: 0 -469px;
            z-index: 2;
        }

        .third_container h3 {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -504px;
            margin-top: 50px;
            width: 468px;
            height: 69px;
            background-image: url('./image/img_index_6bc275f9.png');
            background-position: -636px -493px;
            z-index: 2;
        }

        .tel {
            position: absolute;
            right: 0;
            top: 0%;
            width: 580px;
            height: 892px;
            right: 100px;
            background-image: url('./image/lyric_phonebox.png');
            /* animation: move1 3s; */
        }

        .tel1,
        .tel2 {
            width: 338px;
            height: 598px;
            position: absolute;
            transform: rotate(7.6deg);
            left: 102px;
            top: 137px;
            background-image: url('./image/lyric_phone1.jpg');
        }

        .tel2 {
            background-image: url('./image/lyric_phone2.jpg');
            /* animation: chuxian1 2s 3s forwards; */
            opacity: 0;
        }

        .third_container:hover .tel2 {
            animation: chuxian1 2s 3s forwards;
        }

        .third_container:hover .tel {
            animation: move1 3s;
        }

        @keyframes move1 {
            0% {
                right: 0px;
                opacity: 0;
            }

            100% {
                right: 100px;
                opacity: 1;
            }
        }

        @keyframes chuxian1 {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .fourth_banner {
            height:100vh;
            width: 100vw;
            background-color: rgb(0, 0, 0);
            position: relative;
            top: -80px;
            z-index: 1;
            background-image: url('./image/banner3.jpg');
            background-size: 100vw calc(100vh + 80px);
            overflow: hidden;
        }

        .fourth_banner:hover .like_pic {
            animation: move2 3s forwards;
        }

        .fourth_banner:hover .like_phonein {
            animation: goon 3s linear forwards 4.5s;

        }

        .fourth_banner h2 {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -113px;
            width: 615px;
            height: 143px;
            background-image: url('./image/img_index_6bc275f9.png');
            background-position: 0 -157px;
            z-index: 2;
        }

        .fourth_banner h3 {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: 68px;
            width: 550px;
            height: 69px;
            background-image: url('./image/img_index_6bc275f9.png');
            background-position: 0 -778px;
            z-index: 2;
        }


        .like_phone {
            position: absolute;
            top: 36px;
            left: 0px;
            width: 450px;
            height: 778px;
            background: url('./image/like_phonebox.png') no-repeat;
            background-position-y: 0px;

        }

        @keyframes move2 {
            0% {
                left: 350px;
                opacity: 0;
            }

            100% {
                left: 450px;
                opacity: 1;
            }
        }

        @keyframes goon {
            0% {
                background-position-y: 0;
            }

            100% {
                background-position-y: -210px;
            }
        }


        .like_phonein {
            position: absolute;
            top: 208px;
            left: 57px;
            width: 316px;

            height: 430px;
            background-position-y: 0;
            background: url('./image/like_phone.jpg') no-repeat;
            transform: rotate(-5.7deg);
            /* animation: goon 3s linear forwards 5.5s; */
            overflow: hidden;
        }


        .like_pic {
            /* animation: move2 3s forwards; */
            position: absolute;
            top: 36px;
            left: 350px;
        }

        .fiveth_banner {
            height: 110VH;
            width: 100vw;
            background-color: rgb(0, 0, 0);
            position: relative;
            top: -80px;
            z-index: 1;
            background-image: url('./image/banner4.jpg');
            background-size: 100vw calc(100vh + 80px);
            overflow: hidden;
        }

        .fiveth_banner h2 {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -580px;
            margin-top: -270px;
            width: 544px;
            height: 136px;
            background-image: url('./image/img_index_6bc275f9.png');
            background-position: 0 -630px;
            z-index: 2;
        }

        .fiveth_banner h3 {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -580px;
            margin-top: -108px;
            width: 454px;
            height: 63px;
            background-image: url('./image/img_index_6bc275f9.png');
            background-position: -562px -778px;
            z-index: 2;
        }

        .five_phone {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -400px;
            margin-top: 0;
            width: 255px;
            height: 329px;
            transform-origin: 90% 50%;
            background-image: url('./image/synchro_phone.png');
        }

        .fiveth_banner:hover .five_phone {
            animation: move3 3s forwards .5s;
        }

        @keyframes move3 {
            0% {
                opacity: 0;
                transform: translateX(-60px);
            }

            80% {
                opacity: 1;
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes move4 {
            0% {
                opacity: 0;
                transform: translateX(60px);
            }

            80% {
                opacity: 1;
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .fiveth_banner:hover .five_mac1 {
            animation: move4 2s forwards;
        }

        .five_mac1 {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -392px;
            width: 620px;
            height: 784px;
            background: url('./image/synchro_mac1.png') 0 0 no-repeat;
            z-index: 2;

        }

        .five_mac2 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 620px;
            height: 376px;

            background: url('./image/synchro_mac2.png') 0 0 no-repeat;
        }

        footer {
            position: absolute;
            bottom: 0px;
            height: 44px;
            background: rgba(0, 0, 0, .3);
            z-index: 999;
            color: #fff;
            padding: 14px 0;
            font-size: 12px;
            font-family: Tahoma, Arial;
            width: 100%;
            clear: both;
            text-align: center;
            line-height: 25px;
        }

        footer a{
            color: #fff;
        }

        footer a:hover{
            text-decoration: underline;
        }
        </style>
        </head>


<body>
    <header class=" flex a_c j_c ">
        <div class="head-wrapper  flex j_s_a">
            <div class="head-logo  flex a_c">
                <div class="head-qq ">

                </div>
                <ul class="head-nav  flex a_c">
                    <li>产品动态</li>
                    <li>下载</li>
                </ul>

            </div>
            <ul class="head-jieshao  flex a_c">
                <li>PC版介绍</li>
                <li>MAC版介绍</li>
                <li>轻听介绍</li>
            </ul>
        </div>
    </header>
    <div class="first_container">
        <div class="download-title ">

        </div>
        <div class="download-btn ">

        </div>
        <div class="download-bottom">
            <ul class="flex j-s">
                <li class=""></li>
                <li style="background-position: -244px -940px"></li>
                <li style="background-position: -122px -940px" class=""></li>
                <li style="background-position: 0px -940px" class=""></li>
            </ul>
        </div>
        <div>
            <span class="star"></span>
            <span class="star1"></span>
            <span class="star2"></span>
            <span class="star3"></span>
            <span class="star4"></span>


        </div>
        <div class="download-jiantou ">

        </div>
    </div>


    <div class="second_container">
        <div class="second_title">

        </div>
        <div class="second_little  ">
            <ul class="pic_list1 flex f_s">
                <li style="    animation-delay: .9s;"></li>
                <li style="background-position: 0 -212px;    animation-delay: 2.7s; "></li>
                <li style="background-position: 0 -424px;    animation-delay: 1.5s;"></li>
                <li style="background-position: 0 -636px;    animation-delay: 2.4s;"></li>
                <li style="background-position: 0 -848px;    animation-delay: 2.5s;"></li>
                <li style="background-position: 0 -1060px;    animation-delay: 2s;"></li>
                <li style="background-position: 0 -1272px;    animation-delay: 1.5s;"></li>
                <li style="background-position: 0 -1482px;    animation-delay: 1.2s;"></li>
                <li style="background-position: 0 -1696px;    animation-delay: 3.1s;"></li>
            </ul>
            <ul class="pic_list1 flex f_s">
                <li style="background-position: 0 -1908px; "></li>
                <li style="background-position: 0 -2120px;    animation-delay: 2s;"></li>
                <li style="    animation-delay: 3s;"><img src="./image/singer1-1.jpg" alt=""></li>
                <li style="    animation-delay: 2.4s;"><img src="./image/singer1-3.jpg" alt=""></li>
                <li style="background-position: 0 -2332px;    animation-delay: 2.4s;"></li>
                <li style="background-position: 0 -2544px; "></li>
                <li style="background-position: 0 -2756px;    animation-delay: .3s;"></li>
                <li style="    animation-delay: 2.7s;"><img src="./image/singer1-2.jpg" alt=""></li>
                <li style="background-position: 0 -2968px;    animation-delay: 1.5s;"></li>
            </ul>
            <ul class="pic_list1 flex f_s">
                <li style="    animation-delay: 2.4s;"><img src="./image/singer2-1.jpg" alt=""></li>
                <li style="    animation-delay: 0.6s;"><img src="./image/singer2-2.jpg" alt=""></li>
                <li style="    animation-delay: .3s;"><img src="./image/singer2-3.jpg" alt=""></li>
                <li style="background-position: 0 -3180px;    animation-delay: 2.4s;"></li>
                <li style="background-image: url('./image/sprite2.jpg');    animation-delay: 1.2s;"></li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -212px;    animation-delay: 2.3s;">
                </li>
                <li style="    animation-delay: 3s;"><img src="./image/singer2-4.jpg" alt=""></li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -424px;    animation-delay: .3s;">
                </li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -636px;    animation-delay: 2s;">
                </li>


            </ul>
            <ul class="pic_list1 flex f_s">
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -848px;    animation-delay: 1.8s;">
                </li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -1060px;    animation-delay: 1.3s;">
                </li>
                <li style="    animation-delay: 0.6s;"><img src="./image/singer3-1.jpg" alt=""> </li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -1272px;    animation-delay: .5s;">
                </li>
                <li style="    animation-delay: 3.1s;"><img src="./image/singer3-2.jpg" alt=""></li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -1482px;    animation-delay: 1.5s;">
                </li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -1694px;    animation-delay: 2.4s;">
                </li>
                <li style="    animation-delay: .9s;"><img src="./image/singer3-3.jpg"> </li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -1908px;    animation-delay: 1.4s;">
                </li>
            </ul>
            <ul class="pic_list1 flex f_s">
                <li style="background-image: url('./image/sprite2.jpg');background-position: 0 -2120px; "></li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -2332px;    animation-delay: .9s;">
                </li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -2544px;    animation-delay: .6s;">
                </li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -2756px;    animation-delay: 2.4s;">
                </li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -2968px;    animation-delay: .5s;">
                </li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -3180px;    animation-delay: 1.8s;">
                </li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -3392px;    animation-delay: 1.2s;">
                </li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -3604px;    animation-delay: 2.5s;">
                </li>
                <li
                    style="background-image: url('./image/sprite2.jpg');background-position: 0 -3816px;    animation-delay: 1.8s;">
                </li>
            </ul>


            <h2>

            </h2>
            <h3></h3>

            <div class="download-jiantou ">

            </div>

        </div>
    </div>

    <div class="third_container">

        <h2></h2>
        <h3></h3>

        <div class="tel absolute">
            <div class="tel1">

            </div>
            <div class="tel2">

            </div>
        </div>

        <div class="download-jiantou ">

        </div>
    </div>

    <div class="fourth_banner">
        <h2></h2>
        <h3></h3>
        <div class="like_pic">
            <div class="like_phone">

            </div>
            <div class="like_phonein">

            </div>
        </div>
        <div class="download-jiantou ">

        </div>
    </div>

    <div class="fiveth_banner">
        <h2></h2>
        <h3></h3>

        <div class="five_phone">

        </div>

        <div class="five_mac1">
            <div class="five_mac2"></div>
        </div>
        <footer>
            <p>Copyright © 1998 - 2020 </p>
            <p>腾讯公司 <a href="">版权所有 </a> <a href="">腾讯网络文化经营许可证 </a> </p>
        </footer>

    </div>

    
</body>


图片集，也可以去官网提取：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257440.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0ZXJuaXR5X21hdHQ=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257388.jpg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257489.jpg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257452.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0ZXJuaXR5X21hdHQ=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257445.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0ZXJuaXR5X21hdHQ=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257443.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0ZXJuaXR5X21hdHQ=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257437.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0ZXJuaXR5X21hdHQ=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0ZXJuaXR5X21hdHQ=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257425.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0ZXJuaXR5X21hdHQ=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257424.jpg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257406.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257409.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0ZXJuaXR5X21hdHQ=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257408.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0ZXJuaXR5X21hdHQ=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257387.jpg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257380.jpg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257391.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257387.jpg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257388.jpg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257392.jpg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257383.jpg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257380.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0ZXJuaXR5X21hdHQ=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257393.jpg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257384.jpg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257373.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0ZXJuaXR5X21hdHQ=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257383.jpg#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257352.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200821090257327.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0ZXJuaXR5X21hdHQ=,size_16,color_FFFFFF,t_70#pic_center)
仿 qq音乐播放器 html代码,仿QQ音乐播放器
weixin_33603405的博客
06-09 1668
效果图：可实现左右点击下一个播放3.jpg仿QQ音乐播放器Ajax方式请求后端数据 播放器制作滚动歌词制作切换音乐audio 音频标签媒体属性：controls：是否显示播放控件，默认不显示 falseautoplay：是否自动播放，默认不自动播放 falseloop：是否循环播放，默认不循环 falsecurrentTime：当前播放的位置，赋值可改变位置duration：当前资源长度 流返回无...
【web课程设计】HTML+CSS仿QQ音乐网站
qq_365392777
10-31 516
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 ???? 关于作者: ????历任研发工程师，技术组长，教学总监。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 ????坚持原创，热衷分享，初心未改，继往开来！????文章目录​​一、????‍????网站题目​​​​二、✍️网站描述​​​​三、????网站介...
仿QQ音乐HTML静态网页
10-07
布局复用性高
仿QQ音乐(HTML+CSS)
dreamweaver网页设计
11-03 5723
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结
前端HTML+CSS仿QQ音乐网页设计（作业）
最新发布
zhangke2024的博客
05-16 1072
本项目是一个类似QQ音乐的音乐网站，包含音乐推荐、新歌展示、排行榜和MV展示等功能。项目采用HTML5、CSS和少量JavaScript实现，结构清晰，功能模块划分明确。HTML部分通过语义化标签（如<header>、<div>等）构建页面结构，包括头部导航、轮播图、新歌列表、排行榜和MV列表等模块。CSS部分使用base.css定义通用样式，确保跨浏览器一致性，并通过Flexbox布局、绝对定位和动画效果增强用户体验。响应式设计采用vw单位，使页面在不同设备上自适应。
Qt仿QQ音乐界面，扁平化界面，C++实现
05-17
代码来源https://github.com/LeviInfinity/QQ-Music-With-Qt 本代码在Qt-v5.10+VS2017环境下测试编译通过。 修复了原代码的编译问题、中文显示问题、OpenCV路径问题，更新OpenCV到v3.4.1。 复制目录下的OpenCV的动态链接库DLL文件到生成目标目录即可正常运行。 Qt Creator下测试可用。
jQuery仿QQ音乐播放器网页版代码
04-02
【jQuery仿QQ音乐播放器网页版代码】是一个利用jQuery库实现的、具有黑色主题风格的在线音乐播放器。这个项目旨在提供与QQ音乐相似的用户体验，让用户在网页上也能享受到流畅且功能丰富的音乐播放功能。以下将详细...
web课程设计之qq音乐界面
07-07
QQ音乐界面模仿 web课程设计作业，主要是html+css，含有部分js 主要利用HBuilder X编写，主要用于学习 主要有四个界面，分别是首页、排行榜、登录、听歌报告 界面实现有2D动态轮播图，3D动态轮播图，时间倒计时，...
微信小程序_模仿QQ音乐源代码
11-16
这个项目"微信小程序_模仿QQ音乐源代码"显然旨在教你如何构建一个类似QQ音乐的小程序，涵盖了一系列音乐播放器的关键功能。让我们深入探讨一下其中涉及的IT知识点： 1. **微信小程序框架**：首先，你需要熟悉微信小...
QQ音乐首页
03-02
这个项目的目标是复制QQ音乐官方网站的首页布局和功能，通过这种方式，开发者可以深入理解网页制作的基本原理，并熟悉实际开发流程。 首先，我们要关注的是HTML部分。HTML（HyperText Markup Language）是构建网页...
qqMusic:一个仿QQ音乐的首页布局
04-29
QQ音乐是广受欢迎的在线音乐服务，而"qqMusic:一个仿QQ音乐的首页布局"是一个项目，旨在模仿QQ音乐官网的首页设计，但仅限于静态布局，不涉及实际的数据交互。这个项目的主要目标是展示如何使用HTML、CSS以及...
qq音乐项目html静态页面
11-25
QQ音乐静态页面设计 布局思路 一、 顶部导航栏设计< Header > 二、内容版块设计< content >
（高仿QQ音乐播放界面）QQMusic-master.zip
12-20
（高仿QQ音乐播放界面）QQMusic-master.zip
VC_制作不规则窗口界面——桌面上显示文字字幕，类似QQ音乐效果.zip
12-27
VC_制作不规则窗口界面——桌面上显示文字字幕，类似QQ音乐效果.zip visual C++制作不规则窗口界面——桌面上显示文字字幕，类似QQ音乐效果.zip
HTML仿QQ音乐页面附源码（无框架）
qq_45566354的博客
06-21 6219
大概的仿了一下，没有仿上面的导航栏部分 效果展示 qq官网姐妹界面 我仿照写的页面 hover效果 源码 1.html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>梦不落雨林</title> <link href="css/zhuanji.css" type="text/css" rel="stylesheet" /> &lt
Vue仿制移动端QQ音乐（可预览）
张致豪
06-05 9159
ES6提供了class，但它还是没有类，它只是一个基于原型对象的语法糖（本质上还是通过原型对象来实现类，只不过写法变了） //定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ...
模仿QQ音乐wap端
千里马的专栏
03-30 805
Net Music https://github.com/ITch8/NetMusic 模仿QQ音乐wap端 实践中来学习Vue技术栈开发 效果图 效果图 开发 模块化开发 技术栈 Vue + VueRouter + vuex + webpack + stylus + VueLazyload views 首页推荐 歌手列表 歌曲排行榜 搜索页面 歌手详情页 电台详情页 排行榜详情页 音乐播放器 ...
仿qq音乐官网部分静态页面
七一
08-23 2817
简介： 这是我在刚学html和css的时候看着qq音乐官网自己敲的部分静态页面， 一共有五个静态页面，如下图 首页部分： 歌手部分： 新碟部分： 排行榜部分（可播放音乐）： 分类歌单部分： .........
评论 65
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值