195400 发表于 2021-8-27 01:04

美丽中国 --- 向《红枫》网友学习蜂巢图片

<style type="text/css">
@import "http://cesholl.cn3v.work/sstyle/lrcPlayerY.min.css";

        .level1        {
                width:200px;overflow:hidden;transform: rotate(120deg);position:absolute;
        }
        .level2        {
                width:200px;overflow:hidden;transform: rotate(-60deg);
        }
        .level3        {
                width:200px;height:346.4px;
                background-size:125% auto;
                background-repeat:no-repeat;
                background-position:50% center;
                transform: rotate(-60deg);
        }
       
        .row1        {top:-50px;}
        .row2        {top:130px;}
        .row3        {top:310px;}
        .row4        {top:490px;}
        .row5        {top:670px;}
       
        .oddcol1        {left:0px;}
        .oddcol2        {left:210px;}
        .oddcol3        {left:420px;}
        .oddcol4        {left:630px;}
        .oddcol5        {left:840px;}
       
        .evencol1        {left:105px;}
        .evencol2        {left:315px;}
        .evencol3        {left:525px;}
        .evencol4        {left:735px;}
       
        #mtitle        {
                -webkit-background-clip:text;
                -webkit-text-fill-color:transparent;
                -webkit-text-stroke:1px rgb(0,71,171); background-image:url(https://z3.ax1x.com/2021/07/10/WSvNo4.gif);line-height:180%;
                font:bold 4em 华文彩云;
        }
        #outblk        {
                width:1038px;position:relative; margin:100px 0px 32px -100px;height:1150px;
                background-image: linear-gradient(to right bottom, #dbb 0%, #dbd 40%, #bbd 75%);
                padding:16px;
                text-align:center;
                overflow:hidden;
                border-radius:36px;
                border:thick pink groove;
        }
</style>
<div id="outblk">
<span id="mtitle" title='点击启动播放音乐'>美丽中国</span>
<div style="width:1038px; height:960px;position:relative;overflow:hidden;">
<!--       1st row   -->
<div class='level1 row1 oddcol2'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRwNj.gif) ;">
</div></div></div>

<div class='level1 row1 oddcol3'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRdEQ.gif) ;">
</div></div></div>

<div class='level1 row1 oddcol4'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRUHg.gif) ;">
</div></div></div>
<!--       2nd row   -->
<div class='level1 row2 evencol1'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRNDS.gif) ;">
</div></div></div>

<div class='level1 row2 evencol2'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRtu8.gif) ;">
</div></div></div>

<div class='level1 row2 evencol3'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRJjf.gif) ;">
</div></div></div>

<div class='level1 row2 evencol4'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRGgP.gif) ;">
</div></div></div>
<!--       3rd row   -->
<div class='level1 row3 oddcol1'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlR83t.gif) ;">
</div></div></div>

<div class='level1 row3 oddcol2'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/Rli3b8.gif) ;">
</div></div></div>

<div class='level1 row3 oddcol3'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/Rlia2n.gif) ;">
</div></div></div>

<div class='level1 row3 oddcol4'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RliU8s.gif) ;">
</div></div></div>

<div class='level1 row3 oddcol5'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlR04s.gif);">
</div></div></div>
<!--       4th row   -->
<div class='level1 row4 evencol1'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RliNCj.gif) ;">
</div></div></div>

<div class='level1 row4 evencol2'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RliY5Q.gif) ;">
</div></div></div>

<div class='level1 row4 evencol3'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RliJUg.gif) ;">
</div></div></div>

<div class='level1 row4 evencol4'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RliGVS.gif) ;">
</div></div></div>

<!--       5th row   -->
<div class='level1 row5 oddcol2'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/Rli1Df.gif) ;">
</div></div></div>

<div class='level1 row5 oddcol3'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlilKP.gif) ;">
</div></div></div>

<div class='level1 row5 oddcol4'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RliMvt.gif) ;">
</div></div></div>


</div>
<!-- audio id="pSound" src="https://link.hhtjim.com/163/1298528307.mp3" loop style="margin-top:12px;"/ -->

        <divclass="lrcShow" data-lrc=''></div>
        <divid="mDisk" class='mCtrl'></div>
</div>
<script type="text/javascript">
document.write('<script src="http://cesholl.cn3v.work/scripts/lrcPlayerY.packed.js" ><\/script>');
</script>

<script type="text/javascript">
var lrc =`
美丽中国 - 于文华
词：牧冬秀美
曲：林发贺磊
美丽中国
美丽中国
美丽中国
美丽是春雨轻声敲打的新绿
美丽是深秋幸福收获的金黄
美丽是流淌快乐甜蜜的江河
美丽是闪烁璀璨梦想的星光
美丽是山水相依的温暖
美丽是日月辉映的悠长
美丽的山哟美丽的水
江山如画国色天香国色天香
美丽是柔和目光流露的自信
美丽是铁骨脊梁挺起的坚强
美丽是驰骋五洲大洋的远航
美丽是遨游宇宙太空的飞翔
美丽是五谷丰登的欢畅
美丽是家和业兴的向往
美丽的你哟美丽的他
爱的热土我的家乡我的家乡
美丽中国山欢水笑
美丽中国凤舞龙翔
美丽中国源远流长
美丽中国撒满阳光
美丽中国撒满阳光撒满阳光
美丽中国中国
`;

var opts = {
        lrcTxt:lrc,
        //lrcShowID:'sLRC',
        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里
        audioURL:'https://link.hhtjim.com/163/1298528307.mp3'
};
new lrcPlayerY(opts);
/**
        var mtitle = document.querySelector('#mtitle');
        var pSound = document.querySelector('#pSound');
       
        mtitle.onclick = function()        { if(pSound.paused)pSound.play(); }
**/
</script>

宇神无敌 发表于 2021-8-27 21:05

制作精美，欣赏问好。

195400 发表于 2021-8-27 21:25

宇神无敌 发表于 2021-8-27 21:05
制作精美，欣赏问好。

http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif

雄鹰翱翔 发表于 2021-8-28 09:28

欣赏精美佳作，赞一个！

195400 发表于 2021-8-28 09:55

雄鹰翱翔 发表于 2021-8-28 09:28
欣赏精美佳作，赞一个！

http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif

红枫 发表于 2021-8-28 14:01

&nbsp; &nbsp;<p></p><div>&nbsp; &nbsp; &nbsp; 为您点赞，欣赏学习了！！</div><div><br></div><div>&nbsp; &nbsp; &nbsp; &nbsp;</div>

195400 发表于 2021-8-28 16:52

红枫 发表于 2021-8-28 14:01
&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; 为您点赞，欣赏学习了！！&nbsp; &nbsp; &nbsp; &nbsp;

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

页: [1]
查看完整版本: 美丽中国 --- 向《红枫》网友学习蜂巢图片