红楼十二钗

起个网名好难

筱亭 发表于 2024-10-24 03:11
好美呀，可惜歌曲重了

到https://music.163.com/#/song?id=1312850912比较着听下， 我感觉没差别。

武朝歌

精彩。下午好。欣赏，学习了。赞！

起个网名好难

武朝歌 发表于 2024-10-24 16:04
精彩。下午好。欣赏，学习了。赞！

谢谢支持欣赏！下午好！

筱亭

起个网名好难 发表于 2024-10-24 07:43
到https://music.163.com/#/song?id=1312850912比较着听下， 我感觉没差别。

昨天听确实有重音的，今天听没有了

起个网名好难

筱亭 发表于 2024-10-25 03:35
昨天听确实有重音的，今天听没有了

谢谢信息反馈

筱亭

起个网名好难 发表于 2024-10-25 06:34
谢谢信息反馈

不客气的

水墨含香

欣赏了，美极了，
请问您是用的那个代码

起个网名好难

水墨含香 发表于 2024-10-29 17:06
欣赏了，美极了，
请问您是用的那个代码

谢谢支持欣赏，晚上好！

1. 改编自网友帖
   
2. <style type="text/css">
   
3. @import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
   
4.                 /**        不满意一般设置也可以调整下                */
   
5.         .lrcShow {
   
6.                         font:normal 40px 微软雅黑;
   
7.                         pointer-events:none;
   
8.                         left:35%;bottom:50px;
   
9.         }
   
10.         .lrcShow::before {
    
11.                         color:transparent;
    
12.         }
    
13. 
    
14.         #outframe        {
    
15.                 perspective: 8250px;        /**        数值越大变形越小        **/
    
16.                 width:1650px;height:900px;
    
17.                 position:absolute;overflow:hidden;
    
18.                 left:50%; transform:translate(-50%);
    
19.                 margin-top:100px;
    
20.                 border-top-left-radius:64px;
    
21.                 border-top-right-radius:64px;
    
22.                 background-image:url(https://pic.imgdb.cn/item/60a4b3006ae4f77d3544b65d.jpg);
    
23.         }
    
24.         #picHolder        {
    
25.                 width:250px;height:400px;
    
26.                 position:absolute;top:320px;left:700px;
    
27.                 /*声明一个3D空间*/
    
28.                 transform-style: preserve-3d;
    
29.                 transform: rotateX(-0.5deg);
    
30.                 animation: animateP 50s linear infinite;
    
31.         }
    
32.         #picHolder img        {
    
33.                 width:250px;height:400px;
    
34.                 position: absolute;
    
35.                 overflow:hidden;
    
36.                 border-radius:8px;
    
37.                 border:thin blue inset;
    
38.         }
    
39.         :root {
    
40.                   --turn: 360deg / 13;
    
41.         }
    
42.        
    
43.         #picHolder img:nth-child(1){
    
44.                 transform: translateZ(525px);
    
45.         }
    
46.         #picHolder img:nth-child(2){
    
47.                 transform: rotateY(calc(var(--turn) * 1)) translateZ(525px);
    
48.         }
    
49.         #picHolder img:nth-child(3){
    
50.                 transform: rotateY(calc(var(--turn) * 2)) translateZ(525px);
    
51.         }
    
52.         #picHolder img:nth-child(4){
    
53.                 transform: rotateY(calc(var(--turn) * 3)) translateZ(525px);
    
54.         }
    
55.         #picHolder img:nth-child(5){
    
56.                 transform: rotateY(calc(var(--turn) * 4)) translateZ(525px);
    
57.         }
    
58.         #picHolder img:nth-child(6){
    
59.                 transform: rotateY(calc(var(--turn) * 5)) translateZ(525px);
    
60.         }
    
61.         #picHolder img:nth-child(7){
    
62.                 transform: rotateY(calc(var(--turn) * 6)) translateZ(525px);
    
63.         }
    
64.         #picHolder img:nth-child(8){
    
65.                 transform: rotateY(calc(var(--turn) * 7)) translateZ(525px);
    
66.         }
    
67.         #picHolder img:nth-child(9){
    
68.                 transform: rotateY(calc(var(--turn) * 8)) translateZ(525px);
    
69.         }
    
70.         #picHolder img:nth-child(10){
    
71.                 transform: rotateY(calc(var(--turn) * 9)) translateZ(525px);
    
72.         }
    
73.         #picHolder img:nth-child(11){
    
74.                 transform: rotateY(calc(var(--turn) * 10)) translateZ(525px);
    
75.         }
    
76.         #picHolder img:nth-child(12){
    
77.                 transform: rotateY(calc(var(--turn) * 11)) translateZ(525px);
    
78.         }
    
79.         #picHolder img:nth-child(13){
    
80.                 transform: rotateY(calc(var(--turn) * 12)) translateZ(525px);
    
81.         }
    
82. 
    
83.         /*定义一个动画*/
    
84. 
    
85.         @keyframes animateP {
    
86.                 0% {
    
87.                         transform: rotateX(-1.5deg) rotateY(360deg) ;
    
88.                 }
    
89.                 100%{
    
90.                         transform: rotateX(1.5deg) rotateY(0deg) ;
    
91.                 }
    
92.         }
    
93.        
    
94. #heart {
    
95.         position: absolute;
    
96.         bottom: -75px;
    
97.         left: calc(50% - 20px);
    
98.         margin:80px auto;
    
99.         width: 45px;
    
100.         height: 45px;
     
101.         background: #E94142;
     
102.         transform: rotate(-45deg);
     
103.         opacity: .8;
     
104.         filter: drop-shadow(0px 0px 10px gray);
     
105.         animation: heartbeat .8s infinite alternate var(--state);
     
106.         cursor: pointer;
     
107.         --state: running;
     
108. }
     
109. #heart::before, #heart::after {
     
110.         position: absolute;
     
111.         content: '';
     
112.         width: 100%;
     
113.         height: 100%;
     
114.         border-radius: 50%;
     
115.         background: inherit;
     
116. }
     
117. #heart::before { top: -30px; }
     
118. #heart::after { left: 30px; }
     
119. ###heart:hover { background: orange; }
     
120. @keyframes heartbeat { to { transform: rotate(-45deg) scale(0.9); } }
     
121. </style>
     
122. 
     
123. <div id="outframe">
     
124.         <div id="picHolder">
     
125.                 <img src="https://pic.imgdb.cn/item/60a4af8b6ae4f77d35289495.jpg">
     
126.                 <img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d35274689.gif">
     
127.                 <img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746a8.gif">
     
128.                 <img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746c7.gif">
     
129.                 <img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746e5.gif">
     
130.                 <img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746f9.gif">
     
131.                 <img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fc9b.gif">
     
132.                 <img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fcb0.gif">
     
133.                 <img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fcc5.gif">
     
134.                 <img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fce5.gif">
     
135.                 <img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fd03.gif">
     
136.                 <img src="https://pic.imgdb.cn/item/60a4af8b6ae4f77d35289465.gif">
     
137.                 <img src="https://pic.imgdb.cn/item/60a4af8b6ae4f77d3528948c.gif">
     
138.         </div>
     
139. 
     
140.         <div class="lrcShow" data-lrc="金陵十二钗" >金陵十二钗</div>
     
141.         <div id="heart"></div>
     
142.         <div style="color:red;font:bold 3em 微软雅黑;position:absolute;top:200px;left:600px;">
     
143.         金&#x3000;陵&#x3000;十&#x3000;二&#x3000;钗</div>
     
144. </div><div style="height:1080px;"></div>
     
145. 
     
146. <script type="text/javascript" >
     
147. var sf0 = document.createElement('script');
     
148. sf0.type = 'text/javascript';
     
149. sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
     
150. sf0.charset = "utf-8";
     
151. document.body.appendChild(sf0);
     
152. 
     
153. sf0.onload = () => {
     
154. 
     
155.         let lrctxt = `
     
156. [ti: ]
     
157. [ar:]
     
158. [al:]
     
159. [by:]
     
160. [offset:0]
     
161. [00:00.30]《金陵十二钗》
     
162. [00:05.00]作词 : 孙红英
     
163. [00:09.00]作曲 : 栾 凯
     
164. [00:13.00]演唱 : 孔子雯
     
165. [00:30.97]谁的金钗风霜中掩埋
     
166. [00:42.31]仙株寂寞飘玉带
     
167. [00:47.79]满园芳菲金陵烟花醉
     
168. [00:55.10]洁来洁去只留那片白
     
169. [01:01.63]谁的金钗繁花开不败
     
170. [01:08.74]太虚幻境情天恨海
     
171. [01:14.35]心比天高辗转化尘埃
     
172. [01:21.84]香消玉断宛如笑颜在
     
173. [01:27.45]水做女儿心往事有谁听
     
174. [01:35.98]一片痴心只为君
     
175. [01:41.25]花做女儿身春梦了无痕
     
176. [01:48.84]化作春泥也多情
     
177. [01:54.15]金陵十二钗道尽千古爱
     
178. [02:01.84]隔世相闻泪满襟
     
179. [02:07.40]辗转在红尘繁华终散尽
     
180. [02:14.95]幽思淡淡花袭人
     
181. [02:47.77]水做女儿心往事有谁听
     
182. [02:55.78]一片痴心只为君
     
183. [03:01.97]花做女儿身春梦了无痕
     
184. [03:08.18]化作春泥也多情
     
185. [03:14.29]金陵十二钗道尽千古爱
     
186. [03:21.94]隔世相闻泪满襟
     
187. [03:27.60]辗转在红尘繁华终散尽
     
188. [03:34.63]幽思淡淡花袭人
     
189. [03:40.66]金陵十二钗道尽千古爱
     
190. [03:48.10]隔世相闻泪满襟
     
191. [03:54.16]辗转在红尘繁华终散尽
     
192. [04:01.45]幽思淡淡花袭人
     
193. [04:07.47]辗转在红尘繁华终散尽
     
194. [04:14.90]幽思淡淡花袭人
     
195.         `;
     
196.         let opts = {
     
197.                 lrcTxt:lrctxt,
     
198.                 audioURL:"http://music.163.com/song/media/outer/url?id=1312850912.mp3",
     
199.         }
     
200.         let player = new lrcPlayerY(opts);
     
201.        
     
202.         heart.onclick = () => {player.mObj.paused ? (player.mObj.play(), heart.style.animationPlayState="running", picHolder.style.animationPlayState="running") :
     
203.                                                         (player.mObj.pause(), heart.style.animationPlayState="paused", picHolder.style.animationPlayState="paused")}
     
204.         mState = () => {
     
205.                 player.mObj.paused ? (heart.style.animationPlayState="paused", picHolder.style.animationPlayState="paused") :
     
206.                                                                 (heart.style.animationPlayState="running", picHolder.style.animationPlayState="running")
     
207.         }       
     
208.         player.mObj.onplay = player.mObj.onpause = () => mState();
     
209. }
     
210. </script>
     

复制代码