荷塘月色

起个网名好难 发表于 2024-7-30 15:24

本帖最后由起个网名好难于 2024-7-30 15:03 编辑 <br /><br /><meta name="referrer" content="never" />
<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
#oBlk {
--w:1280px;--h:720px;
--state:running;
width:var(--w);height:var(--h);
position:relative;margin:80px 0 40px calc(50% - 0.5 * var(--w) - 81px);
overflow:hidden;
border-radius:32px;
box-shadow:4px 4px 10px black;
pointer-events: none;

}
#oBlk::after {
position: absolute;
content: '';
bottom: 10px;right:10%;
width: 50px;
height: 50px;
background: repeating-conic-gradient(rgba(255, 192, 203, 0.747) 12%, rgba(61, 184, 61, 0.61) 24%, rgba(241, 241, 98, 0.63) 36%);
box-shadow: inset 0 0 10px red;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
animation: rot 4s linear infinite var(--state);
z-index:66;
}

.vid {width:110%;position:absolute;left:0px;bottom:0px;z-index:10;}
.vid:nth-of-type(2) { mix-blend-mode: darken; opacity:0.75;}
#aniImg{
width:482px; height:641px;
position:absolute; top:5px; left:200px; animation-duration: 8s;
overflow:hidden;border-radius:24px;z-index:99;
-webkit-mask-image: radial-gradient(black 40%, transparent 70%, transparent);
-webkit-mask-size: cover;
}
.lrcShow{pointer-events: none; font:normal 32px sans-serif;position:absolute;top:20px;left:30%;color:transparent;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;z-index:99;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;background-image:linear-gradient(45deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));-webkit-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:white;font-size:smaller;z-index:99;}

@keyframes rot {to { transform: rotate(1turn); }}
@keyframes bgMove1{from{width:0;}to{width:100%;}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}
</style>
<div id="oBlk">
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/20/24/5f22a1a3a22d0.mp4" loop autoplay muted ></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/10/5b50a5c287cf9.mp4" loop autoplay muted ></video>
<img id="aniImg" class="animate__animated" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0q1h4DJhkzObiaRtsA4khjIenNdFA7LBJGAyndDqvHRJNvFsOpvtmgNw/640">
<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>
var imgs=[
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWgXMFr0Dmlg7aEfT2Rn4dmV1YtGRqEv1ouxBa0889UDRrxESmIhUdkNnW5gwUicvwG2H6hzN9KRXTQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWgXMFr0Dmlg7aEfT2Rn4dmVVeqVYDPYtggIYkXmcSD78X25okdqO2xcq6CCa0pEVfSAX1P6SC5qhg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWgXMFr0Dmlg7aEfT2Rn4dmV0G0icuo9ic8twYgaIWHCWwQBBcUVia2ZiaREHE7tick7O6pM3xyB4cAbefA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWgXMFr0Dmlg7aEfT2Rn4dmV2ISy8ibYYjZb8yq1Sc8tcjcWaUKPjcy3equNJGjTThOvaLrfqgd2Czw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWgXMFr0Dmlg7aEfT2Rn4dmVxvhdmicBFv4ogYiaJF2PibtrcTv8vzAP92J4dTP0zRefQSFiaqDdtVBygQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWgXMFr0Dmlg7aEfT2Rn4dmVMmibkTnlicyFR0qgnG5alAVvJkZ5zf6puy2N0vuoHiaiaictucNHV6MZh3g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWgXMFr0Dmlg7aEfT2Rn4dmVykCvKFa6GFZWrrTnJE0sLUUBt0q9HtwTw52dFtQZykibj6AtnWkmKXw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWgXMFr0Dmlg7aEfT2Rn4dmVpYm6Dzb9X1grPh1RHantfrpdGWmV76vicee4BMicjrohbwbchMu7OY6g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWhQf3msrHA9eGCq3t8mzhYt4qyaBvnxFOb02Nc6bTTzJqMrDBAnbFa08Mx1NjD7nqFIWJMvxkr6aA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWhQf3msrHA9eGCq3t8mzhYtPSRxGQyUVd7qZpzNM8T46s0CTr7ZhCIPJSGnPicyFfxUJucsPlp7Qcg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWhQf3msrHA9eGCq3t8mzhYtq0micyJ7dbROkaUPPWnufPd91PKaYSS4HJw5GicpeicGDXQ9a2qvpbPrQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWhQf3msrHA9eGCq3t8mzhYtlfpPoemsbo5oM77PCgY8njZO6vFxZRAIDhiabaYxeQ83OcgG1llhKFg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWhQf3msrHA9eGCq3t8mzhYtibwC4NUhREhy4liaORjoVRn5bEibl6ceibvruicWk3ZJxAfoFUSFyhtl2fg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWhQf3msrHA9eGCq3t8mzhYtcmTGf8bzvp90wWq0ENk6qHFAjnQhnic4fYEtkXJSSyCdSfx4RVlwVibA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWhQf3msrHA9eGCq3t8mzhYtSRR9vx5Fd7HvlHOibXxbXXeS5IFLiaqSZicEraJArJqZic3Rql4UxzyUfA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWhQf3msrHA9eGCq3t8mzhYtMslEvojBjfGHcSpsqLsQJfhtGMRXeAX9FGD1w0C0HGI1XQKXic3yHvQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWhQf3msrHA9eGCq3t8mzhYtugTo02q1RlenRxdvgFeo050fvhl0SEaqp35X4KeDF3wKbEvWFiaTL1w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWhQf3msrHA9eGCq3t8mzhYtWehpagPCiaUPoudKvovVBeHnbVBhhuN0icM1EfWaa20pI4mUqUPsOGlg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWhQf3msrHA9eGCq3t8mzhYto78aJ0c7Lgvb7RR63juUbq6eSJAoFoJpalVVLPyhGpzP5ZNSIMIsdA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/Tcs549yOCWhQf3msrHA9eGCq3t8mzhYtgMevpIyoerHhnHr5vRDQM4NSs1TvlsGbDplsMzAHaic5gCFg2Hic4xRg/640"
];

var dhlm= ["bounce","flash","pulse","rubberBand","shakeX","shakeY","headShake","swing","tada","wobble","jello","heartBeat","backInDown","backInLeft","backInRight","backInUp","backOutDown","backOutLeft","backOutRight","backOutUp","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeInTopLeft","fadeInTopRight","fadeInBottomLeft","fadeInBottomRight","fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","fadeOutTopLeft","fadeOutTopRight","fadeOutBottomRight","fadeOutBottomLeft","flip","flipInX","flipInY","flipOutX","flipOutY","lightSpeedInRight","lightSpeedInLeft","lightSpeedOutRight","lightSpeedOutLeft","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","hinge","jackInTheBox","rollIn","rollOut","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","slideInDown","slideInLeft","slideInRight","slideInUp","slideOutDown","slideOutLeft","slideOutRight","slideOutUp"];
var aniIdx = 0, imgIdx = 0;
(function() {
var aniImg = document.getElementById('aniImg');
aniImg.src = imgs;
aniImg.classList.add('animate__'+dhlm);
imgIdx++; imgIdx %= imgs.length;

aniImg.addEventListener('animationend', function () {
aniImg.src = imgs;
aniImg.className = 'animate__animated animate__'+dhlm;
imgIdx++; imgIdx %= imgs.length;
});
})();
//-----------------------------------------------------------------
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;}('G S=o(){B 4.U.1l(4,1i)};S.1j={1k:S,U:o(P){z=P.T.H(/(^\\s*)|(\\s*$)/g,\'\');4.6=y.R(\'.1f\');4.i=y.R(\'.1g\');4.E=y.R(\'.E\');4.7=4.14(z);4.15(P.1h);4.A=p},14:o(z){G q=z.H(/(^\\s*)|(\\s*$)/g,"").10(/\\r|\\n|\\r\\n/);G 9=1p 1q();D(12 l=0;l<q.h;l++){12 w=q.1r(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);f(w){J=q.1m(\']\');f(J>0)T=q.Z(J+1);D(m=0;m<w.h;m++){I=w.Z(1).H(\']\',\'\').10(/:/);L=(+I)*1n+(+I);f(9.h==0&&L!=0){9.V({8:0,M:\'\\1o\\Y\\Y\\1e\\1a\\1c\\1d\'})}9.V({8:+L.C(2),M:T})}}}9.1b(o(a,b){B(a.8-b.8)});D(k=0;k<9.h-1;k++){9.Q=+(9.8-9.8).C(2)}B 9},17:o(F){4.6.13=4.6.1W.1V=4.7.M;4.6.j.t(\'--1K\',\'1P\'+(4.c%2));4.6.j.t(\'--F\',F+\'s\');4.6.j.t(\'--K\',\'W\');4.c++},15:o(X){4.5=y.1Q("16");4.5.1N=p;4.5.1T=p;4.5.1L=18;4.5.1M=X;4.6.1U(4.5);4.c=0;4.5.e(\'1R\',()=>{4.c=0;4.5.u()});4.5.e(\'1S\',()=>{4.7.Q=+(4.5.O-4.7.8).C(2)});4.5.e(\'u\',()=>{4.6.j.t(\'--K\',\'W\')});4.5.e(\'19\',()=>{f(4.c==1&&4.5.v<1){4.5.u();B p}4.6.j.t(\'--K\',\'11\')});4.5.e(\'1J\',()=>{1x.1w("16 1z, 1O u 1t 1s");4.6.j.1v=\'1u\';4.6.1A(4)});4.5.e(\'1G\',()=>{f(!4.A){4.i.N=4.5.v/4.5.O*1F;4.E.13=4.i.N+\'%\'}f(4.c<4.7.h){f(4.5.v>=4.7.8){4.17(4.7.Q)}}});4.6.e(\'1I\',()=>{f(4.5.11){4.5.u()}1H{4.5.19()}});4.i.e(\'1C\',()=>4.A=18);4.i.e(\'1B\',()=>4.A=p);4.i.e(\'1E\',()=>{x=(4.i.N/4.i.1D*4.5.O).C(2);D(n=0;n<4.7.h-1;n++){f(x>=4.7.8&&x<4.7.8){4.5.v=x;4.c=n;1y}}})}}',62,121,'||||this|mObj|lrcShowObj|lrcVec|seconds|lrcs|||idx||addEventListener|if||length|indicator|style||index|||function|false|parts|||setProperty|play|currentTime|chkTime|seekTime|document|lyricTxt|mseek|return|toFixed|for|progMeter|durTime|var|replace|ta|tIdx|aniPlayState|_0|words|value|duration|opts|dur|querySelector|lrcPlayerY|lrcTxt|init|push|running|mUrl|u0020|substr|split|paused|let|innerHTML|handleLrc|genPlayer|audio|showLrc|true|pause|u66fe|sort|u5e74|u8f7b|u4e5f|lrcShow|slider|audioURL|arguments|prototype|constructor|apply|lastIndexOf|60|u00A9|new|Array|match|event|start|none|display|log|console|break|wrong|removeChild|mouseup|mousedown|max|change|100|timeupdate|else|click|error|aniName|autoplay|src|loop|remove|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 `;

let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=5235635.mp3",
}
let player = new lrcPlayerY(opts);
let vids = oBlk.querySelectorAll('.vid');
let rState = (bool) => {
bool ? (
player.mObj.play(),
vids.forEach(vid => vid. play()),
aniImg.style.animationPlayState = 'running',
oBlk.style.setProperty('--state', 'running')
)
: (
player.mObj.pause(),
vids.forEach(vid => vid.pause()),
aniImg.style.animationPlayState = 'paused',
oBlk.style.setProperty('--state', 'paused')
)
}
oBlk.onclick = () => rState(player.mObj.paused);
}
</script>

醉美水芙蓉 发表于 2024-7-30 16:52

红影发表于 2024-7-30 17:18

这月亮好大好圆，这轮播的荷花也好美，难难找了这么多漂亮的素材呢{:4_199:}

红影发表于 2024-7-30 17:22

盛夏时候在荷塘边感觉真好，月光明亮，晚风清凉，如此美好夏夜，美好的荷塘{:4_187:}

红影发表于 2024-7-30 17:22

欣赏难难好帖{:4_199:}

梦江南 发表于 2024-7-30 17:49

这帖就看到了。梦幻般的插图漂亮哦！给老师点大大赞！{:4_187:}

起个网名好难 发表于 2024-7-30 17:57

醉美水芙蓉发表于 2024-7-30 16:52
欣赏老师带来的精彩！

谢谢支持欣赏，傍晚好！

起个网名好难 发表于 2024-7-30 17:58

红影发表于 2024-7-30 17:18
这月亮好大好圆，这轮播的荷花也好美，难难找了这么多漂亮的素材呢

谢谢支持欣赏，傍晚好！

起个网名好难 发表于 2024-7-30 17:58

梦江南发表于 2024-7-30 17:49
这帖就看到了。梦幻般的插图漂亮哦！给老师点大大赞！

谢谢支持欣赏，傍晚好！

红影发表于 2024-7-30 20:39

起个网名好难发表于 2024-7-30 17:58
谢谢支持欣赏，傍晚好！

这个帖子真漂亮，在这个帖子里能得到美好的视听享受{:4_199:}

樵歌发表于 2024-7-30 21:34

非常漂亮的帖子！{:4_199:}

起个网名好难 发表于 2024-7-30 23:35

红影发表于 2024-7-30 20:39
这个帖子真漂亮，在这个帖子里能得到美好的视听享受

这帖里两个视频仿你那帖做的。

起个网名好难 发表于 2024-7-30 23:36

樵歌发表于 2024-7-30 21:34
非常漂亮的帖子！

谢谢支持欣赏！

红影发表于 2024-7-31 00:04

起个网名好难发表于 2024-7-30 23:35
这帖里两个视频仿你那帖做的。

哪里，我的帖子都是抄黑黑的啊{:4_173:}

起个网名好难 发表于 2024-7-31 06:14

红影发表于 2024-7-31 00:04
哪里，我的帖子都是抄黑黑的啊

转抄，借鉴{:5_106:}

竹溪发表于 2024-7-31 07:40

那个移动的荷花更漂亮。欣赏老师好帖{:4_204:}

起个网名好难 发表于 2024-7-31 08:29

竹溪发表于 2024-7-31 07:40
那个移动的荷花更漂亮。欣赏老师好帖

谢谢支持欣赏，上午好！

红影发表于 2024-7-31 09:28

起个网名好难发表于 2024-7-31 06:14
转抄，借鉴

嗯嗯，玩得快乐就好{:4_187:}

起个网名好难 发表于 2024-7-31 10:26

红影发表于 2024-7-31 09:28
嗯嗯，玩得快乐就好

打发无聊的时间{:5_102:}

海笑发表于 2024-7-31 14:20

欣赏老师佳作！

页: [1] 2

花潮论坛's Archiver

荷塘月色