红枫 发表于 2021-5-19 16:41

金 陵 十 二 钗

<style type="text/css">
body{ margin-top:-300px; margin-right:auto;text-align:center;background-image:url( <img src="https://pic.imgdb.cn/item/60a4b3006ae4f77d3544b65d.jpg" border="0" alt="" style="max-width:400px" />);}
#fReason      {
      width:220px;height:400px;
      margin: 100px auto 24px auto;/*让父元素居中*/
      position:relative;
      /*声明一个3D空间*/
      transform-style: preserve-3d;
      transform: rotateX(-0.5deg);
      animation: animateB 50s linear infinite;
}
#fReason img      {
      width:250px;height:400px;/*320px;height:500px;*/
      position: absolute;
      overflow:hidden;
      border-radius:8px;
      border:thin blue inset;
}
      #fReason img:nth-child(1){
                transform: translateZ(525px);
      }
      #fReason img:nth-child(2){
                transform: rotateY(27.7deg) translateZ(525px);
      }
      #fReason img:nth-child(3){
                transform: rotateY(55.4deg) translateZ(525px);
      }
      #fReason img:nth-child(4){
                transform: rotateY(83.1deg) translateZ(525px);
      }
      #fReason img:nth-child(5){
                transform: rotateY(110.8deg) translateZ(525px);
      }
      #fReason img:nth-child(6){
                transform: rotateY(138.5deg) translateZ(525px);
      }
      #fReason img:nth-child(7){
                transform: rotateY(166.2deg) translateZ(525px);
      }
      #fReason img:nth-child(8){
                transform: rotateY(193.9deg) translateZ(525px);
      }
      #fReason img:nth-child(9){
                transform: rotateY(221.6deg) translateZ(525px);
      }
      #fReason img:nth-child(10){
                transform: rotateY(249.3deg) translateZ(525px);
      }
      #fReason img:nth-child(11){
                transform: rotateY(277deg) translateZ(525px);
      }
      #fReason img:nth-child(12){
                transform: rotateY(304.7deg) translateZ(525px);
      }
      #fReason img:nth-child(13){
                transform: rotateY(332.3deg) translateZ(525px);
      }
      
      /*定义一个动画*/

      @keyframes animateB {
                from {
                        transform: rotateX(0deg) rotateY(360deg);
                }
                to {
                        transform: rotateX(0deg) rotateY(0deg);
                }
      }



      
      #lyricShow      {height:48px;}
</style>



<br><br><br><br><br><br><br><br>

   <p align="center"><strong><font size="7" color="#ff6600"><b>金 陵 十 二 钗</b></font></strong></p><strong>
   </strong><p align="center"><strong><font size="5" color="#ff32ac"><b>词：孙红英 &nbsp;&nbsp;曲：栾 凯 &nbsp;&nbsp;演唱：孔子雯 &nbsp; &nbsp; &nbsp;网页编制：深秋红枫</b></font></strong></p>


<div style="POSITION:absolute;LEFT:-200px;TOP: 215px;">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="t_f" id="postmessage_1857581">

<div id="fReason">
<img src="https://pic.imgdb.cn/item/60a4af8b6ae4f77d35289495.jpg">
<img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d35274689.gif">
<img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746a8.gif">
<img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746c7.gif">
<img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746e5.gif">
<img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746f9.gif">
<img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fc9b.gif">
<img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fcb0.gif">
<img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fcc5.gif">
<img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fce5.gif">
<img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fd03.gif">
<img src="https://pic.imgdb.cn/item/60a4af8b6ae4f77d35289465.gif">
<img src="https://pic.imgdb.cn/item/60a4af8b6ae4f77d3528948c.gif">

</div>
<div id="lyricShow" style="POSITION:absolute;TOP: 520px;"><img src="https://pic.imgdb.cn/item/60a4b2586ae4f77d353f5ab0.gif" style="POSITION:absolute;left:0px;TOP:0px;width:50px;" title="点击图标，播放歌曲"></div>


<!--


<textarea id='lrc_content' style="display:none;">





《金陵十二钗》
作词 : 孙红英
作曲 : 栾 凯
演唱 : 孔子雯
LRC歌词编辑:
深秋红枫
谁的金钗风霜中掩埋
仙株寂寞飘玉带
满园芳菲金陵烟花醉
洁来洁去只留那片白
谁的金钗繁花开不败
太虚幻境情天恨海
心比天高辗转化尘埃
香消玉断宛如笑颜在
水做女儿心往事有谁听

一片痴心只为君
花做女儿身春梦了无痕
化作春泥也多情
金陵十二钗道尽千古爱
隔世相闻泪满襟
辗转在红尘繁华终散尽
幽思淡淡花袭人
水做女儿心往事有谁听
一片痴心只为君
花做女儿身春梦了无痕
化作春泥也多情
金陵十二钗道尽千古爱
隔世相闻泪满襟
辗转在红尘繁华终散尽
幽思淡淡花袭人
金陵十二钗道尽千古爱
隔世相闻泪满襟
辗转在红尘繁华终散尽
幽思淡淡花袭人
辗转在红尘繁华终散尽
幽思淡淡花袭人


未经许可,不得翻唱或使用
</textarea>
</td></tr></table></td></tr></table></div>

</body>
<html>--></td></tr></tbody></table></div></div>
<br><br><br><br><br>

红枫 发表于 2021-5-19 16:46

第一次展示作品，却不知如何发代码音画。

醉心笑 发表于 2021-5-19 17:04

右上角的文本打钩，左下角HTML打钩，再复制代码进来，我编辑了一下，其他的我也弄不太明白

红枫 发表于 2021-5-19 17:14

谢谢，我再试试！

黔中一叟 发表于 2021-5-19 17:17

问好红枫朋友，初夏时节，走进你的帖中，除了欣赏你的佳作，更轻轻地一声祝愿：开心每一天！

195400 发表于 2021-5-20 07:51

http://www.yinhuabbs.cn/data/attachment/forum/202010/12/173753i8k72r7yy032r8tk.gif

画面位置没固定住

雄鹰翱翔 发表于 2021-5-22 19:25

问好，欣赏您的精美佳作，赞一个！
页: [1]
查看完整版本: 金 陵 十 二 钗