论坛 › H码表格 › 音乐贴H码表格

悸动， 发表于 2023-7-5 10:07:22

音乐贴H码表格

本帖最后由 悸动， 于 2023-7-5 10:55 编辑 <br /><br /><div class="qqmcc-music-box">
        <div class="music-box-cover">
                <img src="https://www.qqmcc.net/data/attachment/album/202307/03/100215q88ctcy88hvgovvq.jpg" />
        </div>
        <div class="music-box-cd">
                <span class="img">
                        <img src="https://www.qqmcc.net/data/attachment/album/202307/03/100215q88ctcy88hvgovvq.jpg" />
                </span>
        </div>
</div>
<style>
        .qqmcc-music-box {
                width: 600px;
                margin: 100px auto;
                display: flex;
                position: relative;
        }
        .qqmcc-music-box:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: -50px;
                width: 100%;
                height: 43px;
                background-image: url(//www.qqmcc.net/data/attachment/album/202307/05/101940ub3y2ohgggz79cay.png);
                background-repeat: no-repeat;
        }
        .qqmcc-music-box .music-box-cover {
                width: 305px;
                height: 315px;
                background-image: url(//www.qqmcc.net/data/attachment/album/202307/05/101940oeyc0gydrbysacgr.png);
                background-repeat: no-repeat;
                padding: 5px;
                overflow: hidden;
                position: relative;
                z-index: 10;
        }
        .qqmcc-music-box .music-box-cover img {
          width: 297px;
          height: 299px;
          margin: 6px -2px;
          border-radius: 4px;
        }
        .qqmcc-music-box .music-box-cd {
          margin-top: 15px;
          margin-left: -170px;
          height: 290px;
          width: 290px;
                background-image: url(//www.qqmcc.net/data/attachment/album/202307/05/104859e1zwr1vz4towl0r4.png);
                background-repeat: no-repeat;
                background-size: 100%;
                position: relative;
                animation-name: loopRoll;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          animation-duration: 5s;
        }
        @keyframes loopRoll{
                from{
                        transform:rotate(0deg);
                }
                to{
                        transform:rotate(360deg);
                }
        }
        .qqmcc-music-box .music-box-cd .img {
                border: 2px solid #111;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          display: block;
          width: 120px;
          height: 120px;
          overflow: hidden;
          border-radius: 50%;
       
        }
        .qqmcc-music-box .music-box-cd .img img {
                width: 100%;
                height: 100%;
        }
</style>

悸动， 发表于 2023-7-5 10:39:38

本帖最后由 悸动， 于 2023-7-5 10:56 编辑

<div class="qqmcc-music-box">
        <div class="music-box-cover">
                <img src="https://www.qqmcc.net/data/attachment/album/202307/03/100215q88ctcy88hvgovvq.jpg" />
        </div>
        <div class="music-box-cd">
                <span class="img">
                        <img src="https://www.qqmcc.net/data/attachment/album/202307/03/100215q88ctcy88hvgovvq.jpg" />
                </span>
        </div>
</div>
                       
<style>
        .qqmcc-music-box {
                width: 600px;
                margin: 100px auto;
                display: flex;
                position: relative;
        }
        .qqmcc-music-box:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: -50px;
                width: 100%;
                height: 43px;
                background-image: url(https://www.qqmcc.net/data/attachment/album/202307/05/101940ub3y2ohgggz79cay.png);
                background-repeat: no-repeat;
        }
        .qqmcc-music-box .music-box-cover {
                width: 305px;
                height: 315px;
                background-image: url(https://www.qqmcc.net/data/attachment/album/202307/05/101940oeyc0gydrbysacgr.png);
                background-repeat: no-repeat;
                padding: 5px;
                overflow: hidden;
                position: relative;
                z-index: 10;
        }
        .qqmcc-music-box .music-box-cover img {
          width: 297px;
          height: 299px;
          margin: 6px -2px;
          border-radius: 4px;
        }
        .qqmcc-music-box .music-box-cd {
          margin-top: 15px;
          margin-left: -170px;
          height: 290px;
          width: 290px;
                background-image: url(https://www.qqmcc.net/data/attachment/album/202307/05/104859e1zwr1vz4towl0r4.png);
                background-repeat: no-repeat;
                background-size: 100%;
                position: relative;
                animation-name: loopRoll;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          animation-duration: 5s;
        }
        @keyframes loopRoll{
                from{
                        transform:rotate(0deg);
                }
                to{
                        transform:rotate(360deg);
                }
        }
        .qqmcc-music-box .music-box-cd .img {
                border: 2px solid #111;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          display: block;
          width: 120px;
          height: 120px;
          overflow: hidden;
          border-radius: 50%;
       
        }
        .qqmcc-music-box .music-box-cd .img img {
                width: 100%;
                height: 100%;
        }
</style>

迷失 发表于 2023-7-5 10:44:44

怎么不会动啊？腊鸡

迷失 发表于 2023-7-5 10:45:12

这个素材的啊？

悸动， 发表于 2023-7-5 10:56:17

腿毛幽幽 发表于 2023-7-5 10:44
怎么不会动啊？腊鸡

这不就会动了

迷失 发表于 2023-7-5 10:57:01

换个大胸妹纸

靥柳婉 发表于 2023-7-5 11:03:13

这个不错，晚点试试。

居山杀鹤 发表于 2023-7-5 11:17:23

以为是专属，结果人人都可以~

告白 发表于 2023-7-5 14:54:51

居山杀鹤 发表于 2023-7-5 11:17
以为是专属，结果人人都可以~

那我可不客气了

悸动， 发表于 2023-7-6 15:57:32

居山杀鹤 发表于 2023-7-5 11:17
以为是专属，结果人人都可以~

不知道怎么设置哈哈哈哈。。

查看完整版本: 音乐贴H码表格