俯瞰中国之美
本帖最后由 起个网名好难 于 2024-8-15 08:27 编辑 <br /><br /><meta name="referrer" content="never" /><style>
#oBlk {
--w:1400px;--h:800px;
width:var(--w);height:var(--h);
margin:32px 0 32px calc(50% - 781px);
overflow:hidden;border-radius:32px;
box-shadow:3px 3px 10px black;
position:relative;
}
.picbox {
width:200px;height:360px;
offset-path: path("M 1520 320 C 1000 0 400 1000 -200 120 h -4200");
offset-rotate: 0deg;
background-color:hsla(240, 50%, 80%, 0.7);
overflow:hidden; border-radius:32px;
box-shadow:3px 3px 6px black;
animation:sp 125s linear infinite forwards;
position:absolute; left:0px;top:0px;
transition: 1.2s;
}
.picbox img {width:200px; height:300px;border-radius:24px;}
.picbox p {width:200px; height:60px; text-align:center;font-size:8px;color:black;}
.picbox p span{font-size:10px;color:brown;}
.picbox:hover {transform:scale(2);z-index:99;}
@keyframes sp {from{offset-distance:0%} to{offset-distance:100%}}
#vid { width:110%; position:absolute; left:0px; bottom:0px;}
#splay {width:120px;height:120px;position:absolute; right:30px;bottom:20px;overflow:hidden;border-radius:50%;box-shadow: inset 0 0 30px gray;
background:url(http://p2.music.126.net/QWJs01aox-9V_YJO0tBdRA==/3249056860423886.jpg) no-repeat center/cover;
animation:rot 10s linear infinite ;}
@keyframes rot {to {transform:rotate(360deg);}}
.lrcShow{font:normal 30px sans-serif;position:absolute;left:30%;top:20px;z-index:9;color:rgb(173, 216, 230);filter:drop-shadow(1px 1px 1px black);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;
background-image: url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);
-webkit-background-clip: text;
background-clip: text;
overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
/*----------------------------------------------------------------------------------------*/
.slider {
-webkit-appearance: none;
/* 覆盖默认外观 */
width: 60%;
/* 宽度 */
height: 8px;
/* 高度 */
background: pink;
/* 背景颜色 */
outline: none;
/* 去掉轮廓线 */
opacity: 0.5;
/* 透明度 */
-webkit-transition: .2s;
/* 过渡动画 */
transition: opacity .2s;
/* */
border-radius:5px;
position:absolute; left:20%; bottom:16px;
z-index:100;
}
.slider:hover {
opacity: 1;
/* 悬停时不透明 */
}
/* 滑块样式 */
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
/* 覆盖默认外观 */
appearance: none;
width: 12px;
/* 滑块宽度 */
height: 12px;
/* 滑块高度 */
background: #4CAF50;
/* 滑块颜色 */
cursor: pointer;
/* 鼠标样式变为指针 */
border-radius:50%;
}
.progMeter {position:absolute; bottom:30px; left:50%;color:hsl(240, 80%, 40%);font-size:smaller;font-weight:600;}
@keyframes bgMove0 { from { width: 0%; } to { width: 100%; } }
@keyframes bgMove1 { from { width: 0%; } to { width: 100%; } }
</style>
<div id="oBlk">
<video id="vid" src="https://img.tukuppt.com/video_show/4026668/00/02/95/5b9de3b1caaa1.mp4" loop autoplay muted></video>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRP1ntqELzXOOvyM8px57wADpdQZ8feQLGlWoZJjicUXbGvpzMTjosjxA/640" title=""/>
<p><span>浙江杭州桃花坞茶田</span><br>点线之间<br>泛著淡淡的碧绿<br>空中弥漫着淡淡的花香</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRSeknoKqlmNwUkNuve0dHBOonmSQGq2T8CH0Z2rXCEETNx3FMlVvlkQ/640" />
<p><span>上海东方明珠</span><br>云端俯瞰楼林立<br>浦江龙戏飘游熠</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRMvFwluiafH1zRTIRuBtW1wEgWNH1Xy4bh14wIaichUGvJapLPXibCpkYg/640" />
<p><span>山东济南立交</span><br>一条蜿蜒盘旋的巨龙<br>延伸到四面八方<br>发射出灿烂夺目的光芒</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRF32sULUlXnEobqUoxvjoPZLNVCpvfG0cicfK07pB9gheGA8Em2qntAQ/640" />
<p><span>江苏兴化水上油菜花</span><br>风从身旁掠过<br>花从水上飘过<br>水从指尖划过<br>你在远方笑过</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSR9YdLsksVDGr7fRZCU2ypH44O9CyfNGM36fwwTybUfzqmrlrJZooiaXQ/640" />
<p><span>安徽合肥中心广场</span><br>航拍中国到底花了多少钱？<br>吕凤霄自己也没个准数，<br>“大概一辆高级轿车吧！”</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSROMOTMLFmz9vrXicRk6P83tw5icFJhRNhmWjxxicibasYfPyPe5Fsm9kibbg/640" />
<p><span>海南文昌银沙滩</span><br>扁舟泊银滩<br>绿丝迎朝阳</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRoHPwyd63El32HbbdP74s8teEN0rIlycs8bwDPiaLKnPNlm3BnSHUic0A/640" />
<p><span>广西龙胜龙脊梯田</span><br>层层叠叠上远山<br>蜿蜒逶迤绕云间</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRiaue4G7rTTgicnaLqrKJsWTFTxbmicEo1EBR2blTTrxKDr418YNdeUFSg/640" />
<p><span>广东广州中山一立交</span><br>因为有了不同的目的地<br>才会有千差万别的归宿<br>才会有千姿百态的人生</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRS7XgMMfdu0aF2LOd7Z4wOiaefRbGkJB25Bu5uBOWwuVVicHcrJliaxhFQ/640" />
<p><span>福建某基地</span></p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRYjQtWtWYGbF2nODHLTCh90wvLApibz7fxLicSkZerWuUXfibey9l38kPQ/640" />
<p><span>福建某海岛尖兵连</span><br>不管翻山还是越岭<br>紧跟军旗,是一腔热血<br>是一种担当,更是男儿本色</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRCv7o9XgZlaGOic4W0TkX68oXqPFdQdaBW5JLr1C6vcC2b6lSoRSCwgQ/640" />
<p><span>江西龙南小武当</span><br>奇石纵横高入云<br>群芳吐翠齐参天</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSR214kdk8CYNqTiaOqQez1LOzBVASdtibhBX3PFo4h2YVBXHUOFseeugbA/640" />
<p><span>湖南郴州高椅岭</span><br>层层叠叠上远山<br>蜿蜒逶迤绕云间</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRlBb4mBJ0OYib1pZINXnfiaXS29kTKGHO2eSlKicJaGia9PIzxF6uljuKpw/640" />
<p><span>湖北</span><br>鸡犬远相闻<br>不见人家住<br>世守一方天<br>堪比神仙府</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSR0g0gdbGzVZCd0zBm5A1ibDUgxZ160ufKNtUIhOV1hJrSkabdryN1e3w/640" />
<p><span>河南三门峡地坑院</span></p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRYdaUSDONhWuWR8M5GIRt03ofHrb4jPCDpFYbvMeFFfCUWZStmAtUJg/640" />
<p><span>新疆南山草原</span><br>绿毯悄然换黄坪<br>牛蹄踏得夕阳碎</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRrVNNKvicpWUIZgOdFibsqicQ5UAvZqibkRh6ib2PV6pN19mdsrRX5vPmyTQ/640" />
<p><span>陕西延安壶口瀑布</span><br>万里洪流声怒号<br>天开一堑势雄豪</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRK6iaEIeak3ZAoom8UxEVATZ4RpiaGZzHiczoXUDAEWfg85iak4icQcDEHQA/640" />
<p><span>青海茶卡盐湖</span><br>天空之城<br>抽象而深邃</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRsibZq41Du9s11oCW5fticOyeL3uYPwdEsLmicllJ9gZxUCicervhibsldBA/640" />
<p><span>宁夏沙坡头</span><br>光阴的长度不是日月移动的影子<br>是天人合一的归途</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRQMjy82XHCWholN17AU8pEP01P9RLMTQ4Qg0DxtmicDqU1JWBT5u4D5Q/640" />
<p><span>甘肃白银梯田</span><br>冬日梯田<br>虽没夏日那般青葱<br>也没秋天那样金黄<br>却高冷而不失韵味</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSR7HzmEpskQSNbyGQCoYcY6iaOhFEJ98Cqa5QibU9iaQsOdibKsh1Ig9PQjQ/640" />
<p><span>重庆华严寺</span><br>寺庵鼎盛立观音<br>默祷年来有契心</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRICMz6OECqtfLP1K5MsXwodsicQPJIhHkLe8vKlegCr1rXd4FtavmW2A/640" />
<p><span>云南普者黑三生三世十里桃花</span><br>灼灼桃花六株<br>取一朵放在心上<br>足矣</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRfz7NIMEWlsKvYxbUmE6mbXu6ucicI9TjpuK0EjYAwaxJoiaicQQicicjpbg/640" />
<p><span>云南丽江四方街</span><br>暮色初临华彩上<br>丽江方街风飞扬</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRYseJh7ytN95icekn4DqEaKdOeg1EvokjF8KPh791Kv51iaicXIGia2NKRQ/640" />
<p><span>西藏公路</span><br>灵魂和身体<br>必须有一个在路上</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRbn4oEZHuoXDYuR8znDMbUOVUgsWd3b1r5YJstFBOzcwwaFuX4bwrTA/640" />
<p><span>贵州从江岜沙苗寨</span><br>吊楼幽雅宾朋密<br>树木参天斗志昂</p>
</div>
<div class="picbox">
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/Pem71TyDMoG2fTjgPDXvprOJuibwvRzSRVsAWWIia2uRLaic0UrCteT6wticPWe6c1nHY9dOx7fe6xn8LTIhWM9b2w/640" />
<p><span>峨眉山</span><br>金顶铜殿</p>
</div>
<div id="splay"></div>
<!-- audio id="aud" src="https://music.163.com/song/media/outer/url?id=29312960.mp3" loop autoplay ></audio -->
<div class="lrcShow" data-lrc="美丽中国" >美丽中国</div>
<label class="progMeter">0%</label>
<input type="range" min="0" max="100" value="0" class="slider" id="myRange">
</div>
<script>
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('F L=j(){C 4.V.1j(4,1g)};L.1h={1i:L,V:j(R){u=R.P.E(/(^\\s*)|(\\s*$)/g,\'\');4.7=x.S(\'.1d\');4.i=x.S(\'.1e\');4.T=x.S(\'.T\');4.6=4.16(u);4.17(R.1f);4.v=q},16:j(u){F p=u.E(/(^\\s*)|(\\s*$)/g,"").W(/\\r|\\n|\\r\\n/);F 9=1n 1o();z(10 o=0;o<p.h;o++){10 A=p.1p(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);f(A){I=p.1k(\']\');f(I>0)P=p.Z(I+1);z(m=0;m<A.h;m++){J=A.Z(1).E(\']\',\'\').W(/:/);K=(+J)*1l+(+J);f(9.h==0&&K!=0){9.15({c:0,Q:\'\\1m\\X\\X\\1c\\1a\\1b\\19\'})}9.15({c:+K.B(2),Q:P})}}}9.18(j(a,b){C(a.c-b.c)});z(k=0;k<9.h-1;k++){9.O=+(9.c-9.c).B(2)}C 9},13:j(G){4.7.12=4.7.1U.1T=4.6.Q;4.7.l.t(\'--1I\',\'1N\'+(4.8%2));4.7.l.t(\'--G\',G+\'s\');4.7.l.t(\'--H\',\'Y\');4.8++},17:j(U){4.5=x.1O("11");4.5.1L=q;4.5.1R=q;4.5.1J=14;4.5.1K=U;4.7.1S(4.5);4.8=0;4.5.e(\'1P\',()=>{4.8=0;4.5.w()});4.5.e(\'1Q\',()=>{4.6.O=+(4.5.M-4.6.c).B(2)});4.5.e(\'w\',()=>{4.7.l.t(\'--H\',\'Y\')});4.5.e(\'1H\',()=>{f(4.8==1&&4.5.D<1){4.5.w();C q}4.7.l.t(\'--H\',\'1v\')});4.5.e(\'1u\',()=>{1x.1M("11 1r, 1q w 1t 1s");4.7.l.1y=\'1E\';4.7.1D(4)});4.5.e(\'1G\',()=>{f(!4.v){4.i.N=4.5.D/4.5.M*1F;4.T.12=4.i.N+\'%\'}f(4.8<4.6.h){f(4.5.D>=4.6.c){4.13(4.6.O)}}});4.i.e(\'1A\',()=>4.v=14);4.i.e(\'1z\',()=>4.v=q);4.i.e(\'1C\',()=>{y=(4.i.N/4.i.1B*4.5.M).B(2);z(n=0;n<4.6.h-1;n++){f(y>=4.6.c&&y<4.6.c){4.5.D=y;4.8=n;1w}}})}}',62,119,'||||this|mObj|lrcVec|lrcShowObj|idx|lrcs|||seconds||addEventListener|if||length|indicator|function||style|||index|parts|false|||setProperty|lyricTxt|mseek|play|document|seekTime|for|chkTime|toFixed|return|currentTime|replace|var|durTime|aniPlayState|tIdx|ta|_0|lrcPlayerY|duration|value|dur|lrcTxt|words|opts|querySelector|progMeter|mUrl|init|split|u0020|running|substr|let|audio|innerHTML|showLrc|true|push|handleLrc|genPlayer|sort|u8f7b|u66fe|u5e74|u4e5f|lrcShow|slider|audioURL|arguments|prototype|constructor|apply|lastIndexOf|60|u00A9|new|Array|match|remove|wrong|event|start|error|paused|break|console|display|mouseup|mousedown|max|change|removeChild|none|100|timeupdate|pause|aniName|autoplay|src|loop|log|bgMove|createElement|ended|canplay|muted|appendChild|lrc|dataset'.split('|'),0,{}))
let lrctxt = `
作词 : 王平久\n 作曲 : 丁于\n 编曲 : 丁于\n美丽中国\n\n山绿起来人富起来\n面朝大海中国春暖花开\n一个梦用五千年文明的承载\n美丽中国世世代代\n目光里有些迫不及待\n一个声音打开我们的心海\n美丽中国昂首阔步走来\n是今天也是未来的中国精彩\n内心里说不完的感慨\n万水千山传递民族的情怀\n美丽中国美在山水之外\n有前辈也有我们对祖国的爱\n山绿起来人富起来\n天地间回荡着中国节拍\n我们的笑脸映辉风景的色彩\n中国又一个新时代\n山绿起来人富起来\n面朝大海中国春暖花开\n一个梦用五千年文明的承载\n美丽中国世世代代\n内心里说不完的感慨\n万水千山传递民族的情怀\n美丽中国美在山水之外\n有前辈也有我们对祖国的爱\n山绿起来人富起来\n天地间回荡着中国节拍\n我们的笑脸映辉风景的色彩\n中国又一个新时代\n山绿起来人富起来\n面朝大海中国春暖花开\n一个梦用五千年文明的承载\n美丽中国世世代代\n山绿起来人富起来\n天地间回荡着中国节拍\n我们的笑脸映辉风景的色彩\n中国又一个新时代\n山绿起来人富起来\n面朝大海中国春暖花开\n一个梦用五千年文明的承载\n美丽中国世世代代\n美丽中国\n`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=29312960.mp3"
}
let yP = new lrcPlayerY(opts);
let pboxes = oBlk.querySelectorAll('.picbox');
pboxes.forEach((item, idx) => {
item.style.animationDelay = (idx * 5) + 's';
item.onmouseover = () => {
pboxes.forEach(ele => ele.style.animationPlayState = 'paused');
item.style.transform = 'scale(1.5)';
}
item.onmouseout = () => {
pboxes.forEach(ele => ele.style.animationPlayState = 'running');
item.style.transform = 'scale(1)';
}
})
splay.onclick = () => {
yP.mObj.paused ? (yP.mObj.play(), vid.play(), splay.style.animationPlayState = 'running',pboxes.forEach(ele => ele.style.animationPlayState = 'running')) :
(yP.mObj.pause(), vid.pause(), splay.style.animationPlayState = 'paused', pboxes.forEach(ele => ele.style.animationPlayState = 'paused'));
}
</script> 这帖看到了。非常棒！{:4_187:} 视频上一些美丽风景曲线移动着，还会放大。 老师的帖子每次有很多图片。 梦江南 发表于 2024-8-14 08:49
这帖看到了。非常棒！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 梦江南 发表于 2024-8-14 08:50
视频上一些美丽风景曲线移动着，还会放大。
图片不放大些看不清细节和文字 梦江南 发表于 2024-8-14 08:52
老师的帖子每次有很多图片。
图片少了就要另外加些动态元素。 起个网名好难 发表于 2024-8-14 10:00
这3D字是老师做的？ 梦江南 发表于 2024-8-14 10:05
这3D字是老师做的？
网上找的， 不会做图{:5_102:} 让这么多各地美景在屏幕前一一展示，难难辛苦了{:4_199:} 所有图图沿着固定曲线路径前行，鼠标上去，还能放大。
一张张看着各地风景，真好{:4_199:} 所有背景还能一键暂停。欣赏难难好帖{:4_199:} 这个帖子很正能量，看看我们伟大的国的美丽，更加热爱这片生我养我的土地{:4_187:} 锦绣大地、美不胜收。难难朋友辛苦啦！ 红影 发表于 2024-8-14 10:57
让这么多各地美景在屏幕前一一展示，难难辛苦了
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 红影 发表于 2024-8-14 11:00
所有图图沿着固定曲线路径前行，鼠标上去，还能放大。
一张张看着各地风景，真好
不同的视角看美景{:5_106:} 红影 发表于 2024-8-14 11:00
所有背景还能一键暂停。欣赏难难好帖
移动的图片不停下来看不清楚 梦油 发表于 2024-8-14 11:08
锦绣大地、美不胜收。难难朋友辛苦啦！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 起个网名好难 发表于 2024-8-14 12:16
别客气，别客气。 起个网名好难 发表于 2024-8-14 12:08
一个个看过劳，都很美呢{:4_187:}