嫦娥奔月

起个网名好难

廖若晨星 发表于 2022-9-10 06:27
欣赏起个网名好难老师美图,歌曲: 嫦娥奔月

起个网名好难

沧海笑 发表于 2022-9-10 07:34
欣赏老师佳作！

起个网名好难

秋思梦景 发表于 2022-9-10 07:37
精彩音画，嫦娥奔月，为老师点赞！祝您中秋节快乐！

潇湘翁

欣赏老师佳作！遥祝双节快乐！

起个网名好难

潇湘翁 发表于 2022-9-10 07:58
欣赏老师佳作！遥祝双节快乐！

阿强

起个网名好难 发表于 2022-9-10 07:42

          祝起个网各好难老师中秋节快乐！

起个网名好难

阿强 发表于 2022-9-10 09:56
祝起个网各好难老师中秋节快乐！

彩色风筝

嫦娥奔月，百看不腻~

沪上人

谢谢介绍分享 ！欣赏学习！

海儿心

起个网名好难 发表于 2022-9-10 07:43

好难老师，你的代码很简洁。我看了有地方不懂，想请教你。

1. <style type="text/css">
   
2. <font color="#ff0000">            #chae img</font>{
   
3.                 width:360px;
   
4.                 height: 640px;
   
5.                 position: absolute;
   
6.                                 overflow:hidden;
   
7.                                 border-radius:16px;
   
8.                                 border:thin red dotted;
   
9.             }
   
10.             #chae img:nth-child(1){
    
11.                 transform: translateZ(510px);
    
12.             }
    
13.             #chae img:nth-child(2){
    
14.                 transform: rotateY(40deg) translateZ(510px);
    
15.             }
    
16.             #chae img:nth-child(3){
    
17.                 transform: rotateY(80deg) translateZ(510px);
    
18.             }
    
19.             #chae img:nth-child(4){
    
20.                 transform: rotateY(120deg) translateZ(510px);
    
21.             }
    
22.             #chae img:nth-child(5){
    
23.                 transform: rotateY(160deg) translateZ(510px);
    
24.             }
    
25.             #chae img:nth-child(6){
    
26.                 transform: rotateY(200deg) translateZ(510px);
    
27.             }
    
28.             #chae img:nth-child(7){
    
29.                 transform: rotateY(240deg) translateZ(510px);
    
30.             }
    
31.             #chae img:nth-child(8){
    
32.                 transform: rotateY(280deg) translateZ(510px);
    
33.             }
    
34.             #chae img:nth-child(9){
    
35.                 transform: rotateY(320deg) translateZ(510px);
    
36.             }
    
37.             
    
38.             /*<font color="#ff0000"># id选择器</font>   id不能重复命名*/
    
39. <font color="#ff0000">            #chae</font>{
    
40.                 margin: 0px auto;/*让父元素居中*/
    
41.                 width: 360px;
    
42.                 height: 640px;
    
43.                 /*声明一个3D空间*/
    
44.                 transform-style: preserve-3d;
    
45.                 animation: animate 90s linear infinite;
    
46.                 position: relative;
    
47.             }
    
48.             
    
49.             /*定义一个动画*/
    
50.             @keyframes animate {
    
51.                 from {
    
52.                     transform: rotateX(-1deg) rotateY(360deg);
    
53.                 }
    
54.                 to {
    
55.                     transform: rotateX(-1deg) rotateY(0deg);
    
56.                 }
    
57.             }
    
58.                         
    
59. <font color="#ff0000">                        #outf</font>        {
    
60.                                 width:1100px;height:720px;padding:36px;
    
61.                                 background:#ccf;margin:100px 24px 36px -200px;
    
62.                                 position:relative;overflow:hidden;border-radius:24px;
    
63.                         }
    
64. </style>
    
65. <div id="outf">
    
66. <div id="chae">
    
67. <img src="data/attachment/forum/202209/09/204213td7p0e0xpmx7obke.jpg" />
    
68. <img src="data/attachment/forum/202209/09/204213p3zkez91vot63vex.jpg" />
    
69. <img src="data/attachment/forum/202209/09/204212he6sn6rdzn6rseek.jpg" />
    
70. <img src="data/attachment/forum/202209/09/204212csfm10wj8fnsg1ss.jpg" />
    
71. <img src="data/attachment/forum/202209/09/204212qvmt4msqtb4444et.jpg" />
    
72. <img src="data/attachment/forum/202209/09/204211qgfgu1388ycb3uv8.jpg" />
    
73. <img src="data/attachment/forum/202209/09/204211cw1iljwqyu1xiimx.jpg" />
    
74. <img src="data/attachment/forum/202209/09/204210okkwkkyj3g3bjdmy.jpg" />
    
75. <img src="data/attachment/forum/202209/09/204210oeezktkp1xgcp8mt.jpg" />
    
76. </div>
    
77. <div id="layer" style="width:90%;position:absolute;bottom:10px;left:5%;"></div>
    
78. </div>
    
79. 
    
80. <textarea style="visibility:hidden;" id="lrcContent">
    
81. [00:00.00]嫦娥奔月 - 李玉刚
    
82. [00:17.35]驾东风 揉碎了 几丝云影
    
83. [00:31.45]嫦娥女 轻飘飘 奔向月宫
    
84. [01:08.08]见广寒宫阙 雕描画栋
    
85. [01:24.50]玉兔金蟾 桂花酒香浓
    
86. [01:37.03]看吴刚 伐木已成断肠声
    
87. [01:45.02]尽心几多桂香浓
    
88. [01:49.26]怎忍这依稀相思 寂寞清冷
    
89. [01:58.22]无奈何碧海青天 依依心情
    
90. [02:22.54]闻广寒宫阕 暮鼓晨钟
    
91. [02:38.85]玉兔金蟾 泪眼也朦胧
    
92. [02:51.33]叹深秋 遍地金黄叶飘零
    
93. [02:59.20]落红纷纷花成冢
    
94. [03:03.63]望断了长亭古道
    
95. [03:09.68]水复山重
    
96. [03:12.56]只盼那亲人故乡
    
97. [03:20.66]飞天梦成
    
98. [03:39.43]舞长空 舒广袖
    
99. [03:47.29]云涛翻涌
    
100. [03:53.78]嫦娥女 迎情人
     
101. [04:01.45]携手在苍穹
     
102. [05:18.81]舞长空 舒广袖
     
103. [05:26.63]云涛翻涌
     
104. [05:32.82]嫦娥女 迎情人
     
105. [05:40.80]携手在苍穹
     
106. </textarea>

复制代码

#chae img     我理解彩色旋转小图
#outf            这代表底图
# id选择器
这三个单词前面都有#      这#是什么意思？又麻烦老师了。不胜感谢。