荷花美

起个网名好难 发表于 2024-6-22 12:26

本帖最后由起个网名好难于 2024-6-30 17:23 编辑 <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:1200px; --h:800px;
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: 3px 3px 10px #000;

   &::before,&::after {
position: absolute;
content: '';
left: var(--curX0);
top: 0px;
width: 100%;
height: 100%;
background: url('https://www.xinshandong.cn/d/file/yishu/wenxue/20160329/1a86490e6f44389d5293863048e18c9f.jpg') no-repeat center / cover;
   }

   &::after {
left: var(--curX1);
transform: scaleX(-1);
   }

#aniImg{
width:408px; height:728px;
position:absolute; top:36px; left:386px; animation-duration: 8s;
overflow:hidden;border-radius:24px;z-index:99;
-webkit-mask-image: radial-gradient(black 35%, transparent 80%);
-webkit-mask-size: cover;
}
.lrcShow{font:normal 32px sans-serif;position:absolute;bottom:100px;left:10%;color:transparent;filter:drop-shadow(1px 1px 1px white);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: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);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
.lrcShow {left:5%;top:50px;writing-mode: vertical-rl;z-index:99;}
.lrcShow::before {writing-mode: vertical-rl;}
}
@keyframes bgMove0 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
@keyframes bgMove1 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
</style>
<div id="oBlk">
<img id="aniImg" class="animate__animated" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6uKmvO2x0HMwrBsajMb7xYSXfp6uDbCe5kEDS8rficdDGIdIluFsOjrg/640">
<div class="lrcShow" data-lrc="荷花美">荷花美</div>
</div>

<script>
{
let blkWidth = oBlk.offsetWidth;
let step = 1.0, tune = 0,
curX0 = 0,
curX1 = blkWidth,
raf;

let moving = () => {
//自左向右
curX0 += step;
curX1 += step;
if(curX0 >= blkWidth) curX0 = -blkWidth;
if(curX1 >= blkWidth) curX1 = -blkWidth;
/*
//自右向左
curX0 -= step;
curX1 -= step;
if(curX0 <= -blkWidth) curX0 = blkWidth;
if(curX1 <= -blkWidth) curX1 = blkWidth;
*/

tune = curX1 + (curX0 >= 0 ? 1 : -1);
oBlk.style.setProperty('--curX0', curX0 + 'px');
oBlk.style.setProperty('--curX1', tune + 'px');
raf = requestAnimationFrame(moving);
};
moving();
//-------------------------------------------------------------------------------
var imgs=[
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6S1H3CVfblehtFiaEOqac8TelRfGcAflkODCWb7d6xyUDNVdQShM1Hbg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN698Tsg0BM69YPEUDXqibwsINHospfHtAkkn9ibpcDmxOGQcLQ8RfkXEXA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6a479qSFjL5XvKzXzXUGwhclJO1AaX2ibLZGoaJKfOEHJUCGzUUK867g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6iaicy1XricwkTAUpuAD5Bn2GQYpK5Ao0T2KZMzNxtLbfgFt1rnjuV5EjA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6JtbIujNRIIaVeibnuWicMfh9wib5aa5szic2M7giawVVbDO0jvhorWqpzIw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6mmq6FLklFthWEXbROvMkIF2axWU8fJ0TDjBGaoib4HghJrz10bVm4KQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6eGnBE065OyHx1aItqW3cIJvXVbLrwTjDoicwAqsiaJTZOsNV3so0Z89Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6Eph31nmbu5jqyLRtINtjnZEOWu12eBFYTZfc59bhg64oUBbGR0pqXQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6YxpxuqoEvBkOvUSROU3HOHJerE06u5xZpicLtF9ROLoEChW9GjibV57Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6uKmvO2x0HMwrBsajMb7xYSXfp6uDbCe5kEDS8rficdDGIdIluFsOjrg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6zNIibPKFfbHztb9V2TzQUB7L4rkMOlRfITKOvQfUeVE3RqchzHFoD9g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6EDDgSA6VROuZfTQ89Z21mMOWpQMia7IB9mwMDccOU3k6PZhibvfrjtmg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6U6eFfUe8FZlF91iadmeWibfFzFKRFOtsjaZzSjvOMm6zJRK6rKWicFx9Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6SicUbyibNMy8yUtCREwQmYrmDVAT1M3kMjXeo8qYZc2W3YFDvzu6BSPA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6d2FN3Fky5EmjJjJr5uzqvNLrEBWANPByyCe7XFVKyJriafQqp9VNwBQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6Xxia8OzeVRAQk8c8AtPL76FRAiaJQAJThicicLSjxHAtngn63vd3RfH5WQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6IffVUZOEvOhiaLZqibDdCvia3ucz2dga7TWeCcIEHpXCicTXgzz0m1ytFw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6H8WJlbKDgr5A2icC8icJ0SoAianTxudbA4m7oAGOia7Oj7hVrXdHr3hBRg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SQX2gL3b7yydYWibZVc2lN6X8rzaA5fVib6I29KpV7KUOqpKLjQuHOJD8rncMeOC4eCd89pVDeYh7A/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 initAni() {
var aniImg = document.getElementById('aniImg');
aniImg.src = imgs;
aniImg.classList.add('animate__'+dhlm);

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

let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=1998951811.mp3",
}
let player = new lrcPlayerY(opts);
oBlk.onclick = () => {
player.mObj.paused ? (player.mObj.play(), aniImg.style.animationPlayState = 'running', raf = requestAnimationFrame(moving)) :
(player.mObj.pause(), aniImg.style.animationPlayState = 'paused', cancelAnimationFrame(raf));
}
}

</script>

梦江南 发表于 2024-6-22 13:01

清纯多姿的荷花，美极了！{:4_187:}

梦江南 发表于 2024-6-22 13:02

多变的图片转换，漂亮！为老师点赞！{:4_199:}

起个网名好难 发表于 2024-6-22 13:04

梦江南发表于 2024-6-22 13:01
清纯多姿的荷花，美极了！

谢谢支持欣赏！

起个网名好难 发表于 2024-6-22 13:04

梦江南发表于 2024-6-22 13:02
多变的图片转换，漂亮！为老师点赞！

https://n.sinaimg.cn/sinacn10/405/w277h128/20180325/6690-fysnevm8574879.gif

梦江南 发表于 2024-6-22 13:15

起个网名好难发表于 2024-6-22 13:04

https://pic.imgdb.cn/item/66765df2d9c307b7e9174021.gif

梦江南 发表于 2024-6-22 13:23

起个网名好难发表于 2024-6-22 13:04

https://pic.imgdb.cn/item/66765fc5d9c307b7e91a8e38.gif

起个网名好难 发表于 2024-6-22 13:34

梦江南发表于 2024-6-22 13:15

https://5b0988e595225.cdn.sohucs.com/images/20190801/51bfaa7736d44421946bd87505fd5b72.gif

起个网名好难 发表于 2024-6-22 13:35

梦江南发表于 2024-6-22 13:23

https://pic.bbs.ybvv.com/forum/201806/15/145801upkquxf7yaorpuzq.gif

醉美水芙蓉 发表于 2024-6-22 17:12

起个网名好难 发表于 2024-6-22 18:22

醉美水芙蓉发表于 2024-6-22 17:12
欣赏老师带来的精彩！

谢谢支持欣赏！

https://pic.app.ybvv.com/front2_0_Fl8fuIH_uY8jpfT9PzSJC1R4kyP7.1625462181.jpg

红影发表于 2024-6-22 20:42

背景是滚动图么？还有荷花的轮播图片，这设计真精美，欣赏难难好帖{:4_199:}

红影发表于 2024-6-22 20:44

轮播效果很丰富多彩呢，竖排歌词的色彩设置也漂亮{:4_187:}

起个网名好难 发表于 2024-6-22 20:53

红影发表于 2024-6-22 20:42
背景是滚动图么？还有荷花的轮播图片，这设计真精美，欣赏难难好帖

谢谢支持欣赏！

背景是滚动的图片

起个网名好难 发表于 2024-6-22 20:55

红影发表于 2024-6-22 20:44
轮播效果很丰富多彩呢，竖排歌词的色彩设置也漂亮

拼凑的一个帖子，算是比较合适的素材吧。

樵歌发表于 2024-6-22 21:30

太着眼了！{:4_178:}

起个网名好难 发表于 2024-6-22 22:06

樵歌发表于 2024-6-22 21:30
太着眼了！

谢谢支持欣赏！

晚上好!

小辣椒 发表于 2024-6-22 22:20

欣赏难难的精美效果{:4_199:}

小辣椒 发表于 2024-6-22 22:20

好听好看，高手的制作{:4_178:}

起个网名好难 发表于 2024-6-22 22:50

小辣椒发表于 2024-6-22 22:20
欣赏难难的精美效果

谢谢支持欣赏！

晚上好！

页: [1] 2 3 4 5

花潮论坛's Archiver

荷花美