音乐贴H码表格

悸动，

悸动，

1. <div class="qqmcc-music-box">
   
2.         <div class="music-box-cover">
   
3.                 <img src="https://www.qqmcc.net/data/attachment/album/202307/03/100215q88ctcy88hvgovvq.jpg" />
   
4.         </div>
   
5.         <div class="music-box-cd">
   
6.                 <span class="img">
   
7.                         <img src="https://www.qqmcc.net/data/attachment/album/202307/03/100215q88ctcy88hvgovvq.jpg" />
   
8.                 </span>
   
9.         </div>
   
10. </div>
    
11.                        
    
12. <style>
    
13.         .qqmcc-music-box {
    
14.                 width: 600px;
    
15.                 margin: 100px auto;
    
16.                 display: flex;
    
17.                 position: relative;
    
18.         }
    
19.         .qqmcc-music-box:after {
    
20.                 content: '';
    
21.                 position: absolute;
    
22.                 bottom: 0;
    
23.                 left: -50px;
    
24.                 width: 100%;
    
25.                 height: 43px;
    
26.                 background-image: url(https://www.qqmcc.net/data/attachment/album/202307/05/101940ub3y2ohgggz79cay.png);
    
27.                 background-repeat: no-repeat;
    
28.         }
    
29.         .qqmcc-music-box .music-box-cover {
    
30.                 width: 305px;
    
31.                 height: 315px;
    
32.                 background-image: url(https://www.qqmcc.net/data/attachment/album/202307/05/101940oeyc0gydrbysacgr.png);
    
33.                 background-repeat: no-repeat;
    
34.                 padding: 5px;
    
35.                 overflow: hidden;
    
36.                 position: relative;
    
37.                 z-index: 10;
    
38.         }
    
39.         .qqmcc-music-box .music-box-cover img {
    
40.             width: 297px;
    
41.             height: 299px;
    
42.             margin: 6px -2px;
    
43.             border-radius: 4px;
    
44.         }
    
45.         .qqmcc-music-box .music-box-cd {
    
46.             margin-top: 15px;
    
47.             margin-left: -170px;
    
48.             height: 290px;
    
49.             width: 290px;
    
50.                 background-image: url(https://www.qqmcc.net/data/attachment/album/202307/05/104859e1zwr1vz4towl0r4.png);
    
51.                 background-repeat: no-repeat;
    
52.                 background-size: 100%;
    
53.                 position: relative;
    
54.                 animation-name: loopRoll;
    
55.             animation-timing-function: linear;
    
56.             animation-iteration-count: infinite;
    
57.             animation-duration: 5s;
    
58.         }
    
59.         @keyframes loopRoll{
    
60.                 from{
    
61.                         transform:rotate(0deg);
    
62.                 }
    
63.                 to{
    
64.                         transform:rotate(360deg);
    
65.                 }
    
66.         }
    
67.         .qqmcc-music-box .music-box-cd .img {
    
68.                 border: 2px solid #111;
    
69.             position: absolute;
    
70.             top: 50%;
    
71.             left: 50%;
    
72.             transform: translate(-50%,-50%);
    
73.             display: block;
    
74.             width: 120px;
    
75.             height: 120px;
    
76.             overflow: hidden;
    
77.             border-radius: 50%;
    
78.          
    
79.         }
    
80.         .qqmcc-music-box .music-box-cd .img img {
    
81.                 width: 100%;
    
82.                 height: 100%;
    
83.         }
    
84. </style>

复制代码

迷失

怎么不会动啊？腊鸡

迷失

这个素材的啊？

悸动，

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

这不就会动了

迷失

换个大胸妹纸

靥柳婉

这个不错，晚点试试。

居山杀鹤

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

告白

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

那我可不客气了

悸动，

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

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