红枫 发表于 2021-5-20 12:40

金 陵 十 二 钗

本帖最后由 红枫 于 2021-7-31 13:32 编辑 <br /><br /><br><br><br><div class="blockcode"><blockquote><HTML>
<BODY>
<style type="text/css">



#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>











<divstyle="POSITION:absolute;TOP:150px;left:0px;width:1650px;height:900px; background-image:url( https://pic.imgdb.cn/item/60a4b3006ae4f77d3544b65d.jpg);">
<br><br><br><br><br><br><br><br>


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



<div style="POSITION:absolute;TOP:200px;width:1620px;height:750px;">













<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:relative;TOP:0px;"><img src="https://pic.imgdb.cn/item/60a4b2586ae4f77d353f5ab0.gif" style="POSITION:relative;TOP:-15px;width:50px;" title="点击图标,播放歌曲"></div>

<script type="text/javascript" >
!window.procLRC && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/processLRC1.js" charset="utf-8"><\/script>');
</script>
<!-- <script type="text/javascript" src="processLRC1.js" ></script -->
<script type="text/javascript">
var opts = {
        //        下面3个参数是必须的!
        lrcTxtID:'lrc_content',
        lrcShowID:"lyricShow",
        audioURL:"https://www.joy127.com/url/85451.mp3",
        gczh:'23px',
        gczt:'楷体',
        gcct:true,
        dqfs:'center',
        gcys:'red',
        gcys1:'#ccf',
        //-------------------------------------------------------
        showMode:0,
        gchs: 2
};

setTimeout(function(){
                procLRC(opts);
        }, 2000);
</script>


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





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

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


未经许可,不得翻唱或使用
</textarea>
</div>
</div>
</BODY>
</HTML></blockquote></div><br><br><br>

红枫 发表于 2021-5-20 13:01

终于定位好了

终于定位好了

中画网 发表于 2021-5-20 13:05

你的编辑被挡住了


http://www.yinhuabbs.cn/forum.php?mod=post&action=edit&fid=100&tid=234973&pid=1912055&page=1

点开这个地址,你可以直接进入编辑这个帖子

香染 发表于 2021-5-20 15:40

欣赏啦

红枫 发表于 2021-5-20 15:46

香染 发表于 2021-5-20 15:40
欣赏啦

谢谢!

请教:若自己对所发帖子不满意,如何自己删帖?一直没找到删帖按钮。

香染 发表于 2021-5-20 16:06

红枫 发表于 2021-5-20 15:46
谢谢!

请教:若自己对所发帖子不满意,如何自己删帖?一直没找到删帖按钮。

可以发帖让管理删除,自己应该删除不了的

伊人。 发表于 2021-5-20 16:26

这个歌曲还真没听过,欣赏{:1_292:}

巫荣云师 发表于 2021-5-20 16:26

问好老师,好气派的代码特效,底图也大气,美中不足,底图还是遮住编辑。

黔中一叟 发表于 2021-5-20 20:49

怎么听不到音乐?

黔中一叟 发表于 2021-5-20 20:50

怎么听不到音乐?
页: [1] 2
查看完整版本: 金 陵 十 二 钗