论坛 › 欢乐水吧 › 人生不过葱姜蒜

梦江南 发表于 2026-5-15 13:11

人生不过葱姜蒜

<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {
        margin: 30px-370px;
        width: 1300px;
        height: 760px;
        background:url(https://pan.suyanw.cn/view.php/250fba84eba8541938aad4c6fa54e5d1.jpg)no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;
        overflow: hidden;
border-radius: 22px;
        "华文新魏","仿宋体","SimHei", "Arial", "sans-serif";
}

#canv {
        display: block;
        position: absolute;
width: 1700px;
height: 250px;
        top: 0px;
        left: 0px;
        animation: slider 3s linear infinite ;
transform:scale(1.0);   /*变换：比例（0.4）；*/
transform: rotateX(180deg);   /*变换：旋转Y（180度）*/
}

#mplayer{
        width:180px;
        height: 180px;
        border: none;
        outline: none;
        position:absolute;
        left:80px;
        top: 580px;
        z-index: 20;
        background: url('https://pic.imgdb.cn/item/652e017cc458853aef6f610b.gif')0 0/100% 100%;
        transition: 0.3s all ease;
}

@keyframes rot {
        0% { transform: rotate(-30deg); }
        25% { transform: rotate(0deg); }
        50% { transform: rotate(30deg); }
        75% { transform: rotate(0deg); }
        100% { transform: rotate(-30deg); }
}



#dt{
        position: absolute;
        top:0%;
        left:0%;
        width: 100%;
        height: 100%;
        z-index:1;
        mix-blend-mode: overlay; //叠加

#items{
        animation: slider 10s linear infinite ;
        position: absolute;
        left:20%;
        text-align: center;
        z-index: 4;
}

@keyframes slider {
from {opacity: 1;filter:hue-rotate(360deg)contrast(130%)brightness(120%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>

<div id="papa">
<div   id="items"><divid="lrcArea"></div></div>
<div id="dt"><img id="Img" src="https://i.uik.cc/view.php/3fc1abc2eb4449964297b1fac17eed6f.gif" width="100%" height="190%" ></div>

<div id="mplayer" >

<img id="picBtn" src="https://pic.imgdb.cn/item/652e017cc458853aef6f610b.gif" width="100%" height="100%"></div>

<audio id="aud" src="https://pan.suyanw.cn/view.php/2c9d438b574e0d3ef6d328cadac70a2a.mp3                  
" loop="loop" autoplay="autoplay" crossOrigin="anonymous"></audio>

<canvas id='canv' width="1300" height="250"></canvas>
</div>

<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
window.onload = function() {
    var audio = document.getElementById('aud');
    var ctx = new AudioContext();
    var analyser = ctx.createAnalyser();
    var audioSrc = ctx.createMediaElementSource(aud);
    audioSrc.connect(analyser);
    analyser.connect(ctx.destination);
       var frequencyData = new Uint8Array(analyser.frequencyBinCount);
    var canvas = document.getElementById('canv'),
      cwidth = canvas.width,
      cheight = canvas.height - 1,
      meterWidth = 1, //width of the meters in the spectrum
      gap = 2, //gap between meters
      capHeight = 1,
      capStyle = '#ff0',
      meterNum = 1300 / (0+ 1),
      capYPositionArray = []; //
    ctx = canvas.getContext('2d'),
    gradient = ctx.createLinearGradient(200,120,250,0);
    gradient.addColorStop(1, '#00ff00');
   gradient.addColorStop(0.8, '#00ff00');
    function renderFrame() {      var array = new Uint8Array(analyser.frequencyBinCount);
      analyser.getByteFrequencyData(array);
      var step = Math.round(array.length / meterNum);
      ctx.clearRect(0, 0, cwidth, cheight);
      for (var i = 0; i < meterNum; i++) {
            var value = array;
            if (capYPositionArray.length < Math.round(meterNum)) {
                capYPositionArray.push(value);
            };
            ctx.fillStyle = capStyle;
            //draw the cap, with transition effect
            if (value < capYPositionArray) {
                ctx.fillRect(i * 1.5, cheight - (--capYPositionArray), meterWidth, capHeight);
            } else {
                ctx.fillRect(i * 1, cheight - value, meterWidth, capHeight);
                capYPositionArray = value;
            };
            ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
            ctx.fillRect(i * 1.5 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
}
      requestAnimationFrame(renderFrame); }
    renderFrame();
    audio.play();};
</script>

<style>
#lrcArea ul,#lrcArea li,#lrcArea ol,#lrcArea {margin: 15px ; padding: 0;list-style: none;}
#lrcArea{
        width: 1100px;
        height: 100%;
        overflow: hidden;
        filter:drop-shadow(#ffffff 2px 0 0)drop-shadow(#ffffff 0 2px 0)drop-shadow(#ffffff -2px 0 0) drop-shadow(#ffffff 0 -2px0);
        display: block;
        margin: 30px -100px;
}
#lrcArea ul{
        width: 100%;
        padding: 0;
        transition: 0.3s all ease;/*一定要加上不然看着突兀*/
        margin: 660px   250px;
}
#lrcArea ul li{
        height: 0px;
letter-spacing: 2px;    /*字间距: 5px*/
line-height: 0px;      /*行间距: 50px*/
        font-family:"华文新魏","仿宋体","SimHei", "Arial", "sans-serif";;
        font-size: 0px;
        color: transparent;
        font-weight: normal;
        transition: .3s all ease;/*一定要加上不然看着突兀*/
        display: block;
        margin: 0px auto;}

#lrcArea ul li.cur{
        font-size: 50px;
        font-family:"华文新魏","仿宋体","SimHei", "Arial", "sans-serif";
        text-align: center;
        color: #3333ff;//#ff00cc
        font-weight: 300;
        margin: 0px auto;
}
</style>


<script id="lrc" type="text">

                     人生不过葱姜蒜
        大鹏 小猛
        LRC歌词编辑：梦江南
        人生不过葱姜蒜
        聪明一点少评判
        凡事看开不纠缠
        日子平淡心自安
        做人就要讲究点
        懂得包容少争辩
        不攀不比心自宽
        虽遇而安少烦乱
        实在不行就蒜了
        过往烦恼都抛了
        人间百味皆看淡
        洒脱度日无牵伴
        柴米油盐烟火漫漫
        葱姜入味日子暖暖
        *************
        人生不过葱姜蒜
        烦恼不必放心间
        得失随缘少执念
        心向阳光岁月暖
        闲话是非少去谈
        得失进退皆坦然
        看淡俗世苦与难
        清风自在伴流年
        实在不行就蒜了
        心头愁绪都散了
        世俗纷扰皆看淡
        随心自在天地宽
        人间烟火岁月漫漫
        葱姜入味日子暖暖
       
</script>
<script type="text/javascript">
var musicPlayer = function() {
return this.init.apply(this, arguments);
};
musicPlayer.prototype = {
constructor: musicPlayer,
init:function(options) {if(isEmptyObj(options) || typeof options !== 'object') return;
this.player = options.player;
this.lrc = options.lrc;
this.lrcArea = options.lrcArea;
//用于保存歌词
this.lrcArr = [];
//用于保存时间戳
this.timestamp = [];
//处理歌词
this.handleLrc(this.lrc);
var that = this;
this.player.addEventListener('play', function() {that.play();
}, false);
this.player.addEventListener('pause',function() {that.pause();
}, false);
//歌词索引
this.idx = 0;},
//格式化歌词
handleLrc:function(lrc) {
var re = /(\[.+\])(.+)?/gm,
ul = cEl('ul'),
frag = document.createDocumentFragment(),
tmpArr,i,len;
this.lrcArea.innerHTML = '';
frag.appendChild(ul);
ul.id = 'c';
this.lrcArea.appendChild(frag);
var        txt = lrc.replace(re,function(a,b,c) {
return b + (c === undefined ? '&nbsp;' : c) + '\n';});
tmpArr = txt.split('\n');
//处理歌词
for(i = 0,len = tmpArr.length; i < len; i++) {
var item = trim(tmpArr);
if(item.length > 0) {
this.lrcArr.push(item);}
}
frag = document.createDocumentFragment();
for(i = 0,len = this.lrcArr.length; i < len; i++) {
var li = cEl('li');
if(i === 0) {li.className = 'cur';}
li.innerHTML = this.lrcArr.replace(/\[.+\]/i,'')
.replace('','').replace('','');
//处理时间
this.timestamp.push(this.lrcArr.replace(re,function(a,b,c) {return b;
}).replace('[','').replace(']',''));
frag.appendChild(li);}
ul.appendChild(frag);
this.li = g('lrcArea').getElementsByTagName('li');},
//播放
play:function() {this.stop = false;
var that = this,
player = this.player,i,len;
this.t = setInterval(function() {if(that.stop) return;
that.curTime = player.currentTime;
for(i = 0,len = that.timestamp.length - 1; i < len; i++) {
var        prevTime = that.formatTimeStamp( that.timestamp ),
nextTime = that.formatTimeStamp( that.timestamp );
//当前播放时间与前后歌词时间比较，如果位于这两者之间则转到该歌词
if( parseFloat( that.curTime ) > prevTime && parseFloat( that.curTime ) < nextTime ) {
that.scrollToLrc(i);
return;}}},300);},
//暂停
pause:function() {this.stop = true;
clearInterval(this.t);},
//格式化时间
formatTimeStamp:function(timestamp) {
var re = /(+):(+)\.(+)/i,
seconds = timestamp.replace(re,function(a,b,c,d) {
return Number(b * 60) + Number(c) + parseFloat('0.'+ d);});
return seconds; },
//歌词滚动
scrollToLrc:function(idx) {
var ds = getOffset(this.li).top,i,len;
//如果歌词索引没有变动，则认为这句没有唱完，不处理
if(this.idx === idx) return;
//否则更新索引值并更新样式和位置
this.idx = idx;
for(i = 0,len = this.li.length; i < len; i++) {
this.li.className = '';}
this.li.className = 'cur';
this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;}};
function g(id) {return typeof id === 'string' ? document.getElementById(id) : id;}
function cEl(el) {return document.createElement(el);}
function trim(str) {return str.replace(/(^\s*)|(\s*$)/g, "");}
function isEmptyObj(o) {for(var p in o) return false;
return true;}
function getOffset(el) {var parent = el.offsetParent,
left = el.offsetLeft,
top = el.offsetTop;
while(parent !== null) {left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;}
return {left: left,top: top};}
var p = new musicPlayer({player: g('aud'),
lrc: g('lrc').innerHTML,lrcArea: g('lrcArea')});
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';image1.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image= document.getElementById("Img");
var image1= document.getElementById("picBtn");

mplayer.onclick =function() { aud.paused ? ( image.play(),image1.play(),aud.play()):(image.stop(),image1.stop(),aud.pause())};

items.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>items.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>items.style.animationPlayState = 'paused');
</script>

梦江南 发表于 2026-5-15 13:13

鸣谢亦是金老师的变色代码。{:4_180:}

也曾年轻 发表于 2026-5-15 14:18

https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%275aSE5b%2BD56ev6JmR55qE5Y%2Bl5a2Q6YCg5Y%2BlXzE3MzMwNDYyNDkuMzkxMDU0NA%3D%3D%27/0.png

梦江南 发表于 2026-5-15 14:45

也曾年轻 发表于 2026-5-15 14:18


问好老师，谢谢欣赏支持。这张图图说得好！{:4_204:}

红影 发表于 2026-5-15 20:37

有趣有趣，这首歌好，江南的制作更好，倒挂的频谱，变色的音画，尤其弹吉他的小人动图，节奏和歌曲很一致{:4_173:}

红影 发表于 2026-5-15 20:38

欣赏江南好帖{:4_187:}

杨帆 发表于 2026-5-15 20:44

制作漂亮，富有内涵，谢谢江南分享{:4_204:}

梦江南 发表于 2026-5-16 09:52

本帖最后由 梦江南 于 2026-5-16 09:54 编辑

红影 发表于 2026-5-15 20:37
有趣有趣，这首歌好，江南的制作更好，倒挂的频谱，变色的音画，尤其弹吉他的小人动图，节奏和歌曲很一致{: ...
谢谢影子欣赏支持鼓励，早上好！{:4_204:}

梦江南 发表于 2026-5-16 09:53

红影 发表于 2026-5-15 20:38
欣赏江南好帖

谢谢影子，祝周六快乐！{:4_180:}

梦江南 发表于 2026-5-16 09:54

杨帆 发表于 2026-5-15 20:44
制作漂亮，富有内涵，谢谢江南分享

谢谢杨帆欣赏支持，早上好！{:4_180:}

红影 发表于 2026-5-16 22:14

梦江南 发表于 2026-5-16 09:52
谢谢影子欣赏支持鼓励，早上好！

不客气啊，江南的制作很赞{:4_187:}

梦江南 发表于 2026-5-17 07:22

红影 发表于 2026-5-16 22:14
不客气啊，江南的制作很赞

问好影子，星期天快乐。{:4_204:}

射天狼 发表于 2026-5-17 14:49

欢快的歌曲，精彩的制作，点赞！

梦江南 发表于 2026-5-17 15:07

射天狼 发表于 2026-5-17 14:49
欢快的歌曲，精彩的制作，点赞！

问好射天狼同志，谢谢欣赏支持。这小动图也可爱{:4_180:}

红影 发表于 2026-5-17 15:50

梦江南 发表于 2026-5-17 07:22
问好影子，星期天快乐。

问好江南，一起快乐{:4_187:}

梦江南 发表于 2026-5-17 16:00

红影 发表于 2026-5-17 15:50
问好江南，一起快乐

嗯，一起快乐。{:4_189:}

射天狼 发表于 2026-5-17 16:02

梦江南 发表于 2026-5-17 15:07
问好射天狼同志，谢谢欣赏支持。这小动图也可爱

哈哈，那个小琵琶手是当年在一个叫《E域》论坛收集的，在《E域》俺也叫射天狼。20多年了，一直陪着俺

梦江南 发表于 2026-5-17 16:09

射天狼 发表于 2026-5-17 16:02
哈哈，那个小琵琶手是当年在一个叫《E域》论坛收集的，在《E域》俺也叫射天狼。20多年了，一直陪着俺

这个小琵琶手陪你这么多年啦，真不容易,感情深厚了。射天狼同志也是老网民了.

红影 发表于 2026-5-17 21:39

梦江南 发表于 2026-5-17 16:00
嗯，一起快乐。

{:4_187:}

梦江南 发表于 2026-5-18 07:59

红影 发表于 2026-5-17 21:39


影子，星期一开心快乐！{:4_204:}

查看完整版本: 人生不过葱姜蒜