195400 发表于 2021-5-20 09:28

仿红枫网友《金陵十二钗》帖

在原帖中怎么折腾也得不到满意的效果，另开一帖试试。<br>

<style type="text/css">
#outframe        {
        width:1650px;height:900px;
        position:absolute;margin-top:-880px;
}
#picHolder      {
      width:250px;height:400px;
      position:relative;margin:300px auto;
      /*声明一个3D空间*/
      transform-style: preserve-3d;
      transform: rotateX(-0.5deg);
      animation: animateP 50s linear infinite;
}
#picHolder img      {
      width:250px;height:400px;
      position: absolute;
      overflow:hidden;
      border-radius:8px;
      border:thin blue inset;
}
      #picHolder img:nth-child(1){
                transform: translateZ(525px);
      }
      #picHolder img:nth-child(2){
                transform: rotateY(27.7deg) translateZ(525px);
      }
      #picHolder img:nth-child(3){
                transform: rotateY(55.4deg) translateZ(525px);
      }
      #picHolder img:nth-child(4){
                transform: rotateY(83.1deg) translateZ(525px);
      }
      #picHolder img:nth-child(5){
                transform: rotateY(110.8deg) translateZ(525px);
      }
      #picHolder img:nth-child(6){
                transform: rotateY(138.5deg) translateZ(525px);
      }
      #picHolder img:nth-child(7){
                transform: rotateY(166.2deg) translateZ(525px);
      }
      #picHolder img:nth-child(8){
                transform: rotateY(193.9deg) translateZ(525px);
      }
      #picHolder img:nth-child(9){
                transform: rotateY(221.6deg) translateZ(525px);
      }
      #picHolder img:nth-child(10){
                transform: rotateY(249.3deg) translateZ(525px);
      }
      #picHolder img:nth-child(11){
                transform: rotateY(277deg) translateZ(525px);
      }
      #picHolder img:nth-child(12){
                transform: rotateY(304.7deg) translateZ(525px);
      }
      #picHolder img:nth-child(13){
                transform: rotateY(332.3deg) translateZ(525px);
      }
      
      /*定义一个动画*/

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

</style>
<div style="width:1650px;height:900px; position:relative;margin:100px 0 32px -200px;overflow:hidden;border-top-left-radius:64px;border-top-right-radius:64px;" >
<img src="https://pic.imgdb.cn/item/60a4b3006ae4f77d3544b65d.jpg">
<div id="outframe">
<div id="picHolder">
<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>

<div id="LRC歌词显示" style="position:absolute;width:80%;left:10%;bottom:80px;">
<img src="https://pic.imgdb.cn/item/60a4b2586ae4f77d353f5ab0.gif" style="width:60px;overflow:hidden;border-radius:50%;" title="点击图标，播放歌曲">
</div>
<div style="color:red;font:bold 3em 微软雅黑;position:absolute;top:200px;left:640px;">
金&#x3000;陵&#x3000;十&#x3000;二&#x3000;钗</div>
</div>

<textarea id='LRC歌词' style="display:none;">
《金陵十二钗》
作词 : 孙红英
作曲 : 栾 凯
演唱 : 孔子雯
LRC歌词编辑:深秋红枫
谁的金钗 风霜中掩埋
仙株寂寞 飘玉带
满园芳菲 金陵烟花醉
洁来洁去 只留那片白
谁的金钗 繁花开不败
太虚幻境 情天恨海
心比天高 辗转化尘埃
香消玉断 宛如笑颜在
水做女儿心 往事有谁听
一片痴心只为君
花做女儿身 春梦了无痕
化作春泥也多情
金陵十二钗 道尽千古爱
隔世相闻泪满襟
辗转在红尘 繁华终散尽
幽思淡淡花袭人

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

<script type="text/javascript" >
!window.procLRC && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/processLRC.js" charset="utf-8"><\/script>');
</script>
<script type="text/javascript" >
var gopts = {
        //        下面3个参数是必须的！
        lrcTxtID:"LRC歌词",
        lrcShowID:"LRC歌词显示",
        audioURL:"http://music.163.com/song/media/outer/url?id=1312850912.mp3",
        //        可选的参数
        gczh:'28px',
        gczt:'楷体',
        gcct:true,
        dqfs:'center',
        gchs:2,
        gcys:'red',
        gcys1:'skyblue',
        //-------------------------------------------------------
        showMode:0, playLoop: true
};

setTimeout(function(){
                procLRC(gopts);
        }, 1000);
</script>

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

问好，欣赏您的精美佳作，赞一个！

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

问好老师，特效满意，但底图不显，美中不足。

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

欣赏学习

195400 发表于 2021-5-20 19:53

巫荣云师 发表于 2021-5-20 16:18
问好老师，特效满意，但底图不显，美中不足。
http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif



195400 发表于 2021-5-20 19:58

伊人。 发表于 2021-5-20 16:29
欣赏学习

http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123001hstspbnsskb1sb2s.gif

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

拜访朋友，欣赏你的精采制作。遥祝夏安！

195400 发表于 2021-5-20 21:23

黔中一叟 发表于 2021-5-20 21:03
拜访朋友，欣赏你的精采制作。遥祝夏安！

http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123059ffon6y9p6tnedvne.gif

静思的 发表于 2021-5-21 19:49

欣赏，支撑，

195400 发表于 2021-5-21 22:37

静思的 发表于 2021-5-21 19:49
欣赏，支撑，

http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084305tld7qqre89lhihhh.gif

195400 发表于 2021-5-21 23:50

<iframe src='http://cesholl.cn3v.net/src/网友帖---花鸟画.html' style="width:810px;height:610px;margin:32px auto;" frameborder='0' scrolling='no'></iframe>
页: [1] 2
查看完整版本: 仿红枫网友《金陵十二钗》帖