西湖十二景
本帖最后由 夕阳黄昏 于 2024-11-30 12:26 编辑 <br /><br /><meta name="referrer" content="never" /><meta charset="utf-8">
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
:root{--rState:running;--w:1032px;--h:908px;}
#outBlk{position:relative;width:var(--w);height:var(--h);background-color:#000000 ;overflow:hidden;90px;margin:90px auto 40px calc(50% - 597px); box-shadow:4px 4px 10px #000;}
zxx-slide{width:var(--w);height:var(--h);position:absolute;}
.zxx-slide-a{position:absolute;cursor:default;pointer-events:none;z-index:0; animation-duration:2s;animation-name: ;transition:1s;animation-play-state:paused;}
.zxx-slide-img{width:var(--w);height:var(--h);}
#player{position:absolute;left:12px;bottom:12px;width:80px;height:80px;cursor:pointer;z-index:100;animation: pRot 8s linear infinite var(--rState);}
@keyframes pRot { to { transform: rotate(360deg); } }
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2.5em 微软雅黑;
pointer-events:none;
filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
bottom: 0px; left:30%;z-index:2;
}
.lrcShow::before {
color:hsl(0, 50%, 50%);
}
</style>
<div id="outBlk">
<zxx-slide></zxx-slide>
<svg viewbox="0 0 300 300" id="player">
<radialGradient id="rg" r="0.8">
<stop offset="0" stop-color="pink"></stop>
<stop offset=".3" stop-color="AquaMarine"></stop>
<stop offset="1" stop-color="blue"></stop>
</radialGradient>
<path d="M150 150
A 60 30 0 0 0 295 150
A 60 30 0 1 0 150 150
A 60 30 40 0 0 261.08 243.20
A 60 30 40 1 0 150 150
A 60 30 80 0 0 175.18 292.80
A 60 30 80 1 0 150 150
A 60 30 120 0 0 77.50 275.57
A 60 30 120 1 0 150 150
A 60 30 160 0 0 13.74 199.59
A 60 30 160 1 0 150 150
A 60 30 200 0 0 13.74 100.41
A 60 30 200 1 0 150 150
A 60 30 240 0 0 77.50 24.43
A 60 30 240 1 0 150 150
A 60 30 280 0 0 175.18 7.20
A 60 30 280 1 0 150 150
A 60 30 320 0 0 261.08 56.80
A 60 30 320 1 0 150 150" fill="url(#rg)" fill-rule="evenodd"></path>
</svg>
<!-- audio src="https://music.163.com/song/media/outer/url?id=29898161.mp3" loop autoplay id="mObj" / -->
<div class="lrcShow" data-lrc="人间西湖" >人间西湖</div>
</div>
<script>
// 载入歌词同步代码
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);
sf0.onload = () => {
// 同步歌词
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
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=29898161.mp3",
}
let mPlayer = new lrcPlayerY(opts);
let aniActNames = ["bounce","flash","pulse","rubberBand","shakeX","shakeY","headShake","swing","tada","wobble","jello","heartBeat","backInDown","backInLeft","backInRight","backInUp","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeInTopLeft","fadeInTopRight","fadeInBottomLeft","fadeInBottomRight","flip","flipInX","flipInY","lightSpeedInRight","lightSpeedInLeft","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","hinge","jackInTheBox","rollIn","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","slideInDown","slideInLeft","slideInRight","slideInUp"];
let pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/HCvnc8HRrKRYLrR3ibHcN2y6qDW5e0lXJWkbwUx2R54PRKgmVecLHM44wiaZibvwVsJYkx4ibWjzSHOCan41BMawww/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/HCvnc8HRrKRYLrR3ibHcN2y6qDW5e0lXJtmc1ha6Gf4fA0P4D4GV3TCPiciaZCpFzqPWFXnQcgdS0u7T0AOvfdPOg/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/HCvnc8HRrKRYLrR3ibHcN2y6qDW5e0lXJ7WkWPll8bhibOn0gxRdWtm7Peraqp2nTYkQlibtBISt0tBfktzpW3WHg/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/HCvnc8HRrKRYLrR3ibHcN2y6qDW5e0lXJazL76ZYybdyue9iaHjCIS8zT099568wiaAMQtk9ibZjVgWwSRq7icurFFQ/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/HCvnc8HRrKRYLrR3ibHcN2y6qDW5e0lXJhibL2S1XR2DwDcYZiaV3c2KoHySldde0l3MKVxUfpicmDzXicueIxwVUhA/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/HCvnc8HRrKRYLrR3ibHcN2y6qDW5e0lXJI8mT0kZaOprAQqd1h4NcMGsmXQL2KrQegfGxf500t7TsMOjIJPZP0g/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/HCvnc8HRrKRYLrR3ibHcN2y6qDW5e0lXJzLafArYn8Shl233z4uE2glcHQ29bZ3mQuMDNla47z0OqibEbGiapbZeQ/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/HCvnc8HRrKRYLrR3ibHcN2y6qDW5e0lXJ8EyHm3dUArmS7DKqeR3ZHKaU0h1YCicb2MfJSNZeoxRgmhu5DDmx7BQ/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/HCvnc8HRrKRYLrR3ibHcN2y6qDW5e0lXJLWgrEBPWmbD6XDFb0iaqhLSX7w1V7IxWEgRu0IBNHChSGhUnWXvkkOg/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/HCvnc8HRrKRYLrR3ibHcN2y6qDW5e0lXJxPNRTK32392vlib9kcmggKmKaJcOdxZlXKZhD7LhUIYvibl1Q7Esy4wg/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/HCvnc8HRrKRYLrR3ibHcN2y6qDW5e0lXJAYRiaHA1g7uJsuREqK3xrjYyahNovH7hAGwWbv3FrGBOPFFQbOmaXuw/0",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/HCvnc8HRrKRYLrR3ibHcN2y6qDW5e0lXJEtzdMjdNRtsmGpgybcgdTib3A09ft3ePD2lpMYcCnkDgTlhuyzBicoSQ/0"
];
let eleZxxSlides = document.querySelectorAll('zxx-slide');
pics.forEach(pic => {
let aObj = document.createElement('a');
aObj.className = 'zxx-slide-a';
let imgObj = document.createElement('img');
imgObj.src = pic;
imgObj.className = 'zxx-slide-img';
aObj.appendChild(imgObj);
eleZxxSlides.appendChild(aObj);
});
[].slice.call(eleZxxSlides).forEach(function(container) {
let timerSlide = null;
let indexSlide = 0;
// 对应的元素
let eleSlides = [].slice.call(container.querySelectorAll('a'));
let eleButtons = [].slice.call(container.querySelectorAll('button'));
let funSlide = function() {
eleSlides.forEach(function(slide, index) {
if (!mPlayer.mObj.paused) {
if (indexSlide == index) {
let aniIdx = parseInt(Math.random() * aniActNames.length);
slide.style.zIndex = 1;
slide.style.animationName = aniActNames;
slide.style.animationPlayState = 'running'
} else {
slide.style.zIndex = 0;
slide.style.animationName = '';
slide.style.animationPlayState = 'paused'
}
}
});
timerSlide = setTimeout(function() {
indexSlide++;
if (indexSlide == eleSlides.length) {
indexSlide = 0;
}
funSlide();
}, 12000);
}
indexSlide++;
setTimeout(funSlide, 12000);
});
let runState = () => {
mPlayer.mObj.paused
? (mPlayer.mObj.pause(), player.style.setProperty('--rState','paused'))
: (mPlayer.mObj.play(), player.style.setProperty('--rState','running'));
}
mPlayer.mObj.onplaying = mPlayer.mObj.onpause = () => runState();
player.onclick = () => {mPlayer.mObj.paused ? mPlayer.mObj.play() : mPlayer.mObj.pause();}
mPlayer.mObj.play().catch(_ => runState());
}
</script>
西湖有十二景？ 给老师鼓掌，做的太美了{:4_199:} 感谢佳作分享{:4_187:} 世外桃源 发表于 2024-11-30 15:36
西湖有十二景？
现在的说法是西湖十景，这组画片是清代画家杨伯润的一组画作，包括十景和钱塘观潮和孤山探梅。 世外桃源 发表于 2024-11-30 15:37
给老师鼓掌，做的太美了
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 世外桃源 发表于 2024-11-30 15:39
感谢佳作分享
感谢支持！ 夕阳黄昏 发表于 2024-11-30 16:17
现在的说法是西湖十景，这组画片是清代画家杨伯润的一组画作，包括十景和钱塘观潮和孤山探梅。
谢谢老师，涨知识了{:4_187:} 好漂亮的图片轮播效果，有一种格式还会抖动的呢。
欣赏夕老师好帖{:4_199:} 夕阳黄昏 发表于 2024-11-30 16:17
现在的说法是西湖十景，这组画片是清代画家杨伯润的一组画作，包括十景和钱塘观潮和孤山探梅。
能在坛子里欣赏到清代画家的一组画作，真的太幸运了，自己肯定想不起来去搜的，在您的帖子里却能逐张欣赏画家对西湖美景的展示，真的太好了。{:4_187:} 红影 发表于 2024-11-30 20:31
好漂亮的图片轮播效果，有一种格式还会抖动的呢。
欣赏夕老师好帖
谢谢支持欣赏！ 红影 发表于 2024-11-30 20:34
能在坛子里欣赏到清代画家的一组画作，真的太幸运了，自己肯定想不起来去搜的，在您的帖子里却能逐张欣赏 ...
微信公众号里一篇贴文就收集全了。 夕阳黄昏 发表于 2024-11-30 21:21
谢谢支持欣赏！
谢谢带来的好享受{:4_187:} 夕阳黄昏 发表于 2024-11-30 21:22
微信公众号里一篇贴文就收集全了。
那也需要关注了才可能看到呢。 红影 发表于 2024-11-30 22:52
那也需要关注了才可能看到呢。
类似公众号会带出同类的公众号， 不一定是关注过的。 西湖十二景在家里就看到了。谢谢老师精彩分享{:4_191:} 杨帆 发表于 2024-12-1 10:58
西湖十二景在家里就看到了。谢谢老师精彩分享
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 夕阳黄昏 发表于 2024-12-1 06:31
类似公众号会带出同类的公众号， 不一定是关注过的。
有您的分享，不去看公众号也能看到这样的美图了{:4_187:} 红影 发表于 2024-12-1 22:28
有您的分享，不去看公众号也能看到这样的美图了
只是把感兴趣的图搬来赏评文字介绍就漏掉了。
夕阳黄昏 发表于 2024-12-2 06:36
只是把感兴趣的图搬来赏评文字介绍就漏掉了。
大家也可以边看边自己体会，感受画中之美。{:4_187:}
页:
[1]
2