论坛 › 欢乐水吧 › 水墨效果

亚伦影音工作室 发表于 2024-7-25 13:42

水墨效果

本帖最后由 亚伦影音工作室 于 2024-8-4 18:04 编辑 <br /><br /><style type="text/css">#papa{ margin: 0 0 0 calc(30% - 481px);
top:10px;
display: grid;
place-items: center;
width: 1200px;
height: 640px;
background:#ff0000 ;
box-shadow: 0px 0px 0px 2px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 3;}
.photo {width: 100%; height: 100%;
position:absolute;z-index: 3;
top:0%; left:0%;
opacity: 0;
animation: round 90s linear infinite;}
@keyframes round {0%   {transform: rotateZ(0deg); opacity: 0;}
1% {transform: rotateZ(0deg); opacity: 1; }
5% {transform: rotateZ(0deg); opacity: 1; }
12% {transform: rotateZ(0deg); opacity: 0; }
}
.photo:nth-child(15) {animation-delay: 84s;background: url(https://pic.imgdb.cn/item/666051085e6d1bfa05b6abf7.jpg")no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 78s;background: url(https://pic.imgdb.cn/item/665ec1b35e6d1bfa051b5dd8.jpg)no-repeat center/cover}
.photo:nth-child(13) {animation-delay: 72s;background: url(https://pic.imgdb.cn/item/665e70415e6d1bfa05bcd000.jpg)no-repeat center/cover}
.photo:nth-child(12) {animation-delay: 66s;background: url(https://pic.imgdb.cn/item/665dc92f5e6d1bfa0532eeee.jpg)no-repeat center/cover}
.photo:nth-child(11) {animation-delay: 60s;background: url(https://pic.imgdb.cn/item/665c70d9d9c307b7e98a73b8.jpg)no-repeat center/cover}
.photo:nth-child(10) {animation-delay: 54s;background: url(https://pic.imgdb.cn/item/66553e74d9c307b7e93f7f6f.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 48s;background: url(https://pic.imgdb.cn/item/664ab4ced9c307b7e91ed6bc.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 42s;background: url(https://pic.imgdb.cn/item/6646c5a3d9c307b7e9ad464d.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 36s;background: url(https://pic.imgdb.cn/item/6621ee160ea9cb1403baa6ce.jpg)no-repeat center/cover}
.photo:nth-child(6){animation-delay: 30s;background: url(https://pic.imgdb.cn/item/660bde939f345e8d03a0c689.jpg)no-repeat center/cover}
.photo:nth-child(5){animation-delay: 24s;background: url(https://pic.imgdb.cn/item/660ab2929f345e8d036cd401.jpg)no-repeat center/cover}
.photo:nth-child(4){animation-delay: 18s;background: url(https://pic.imgdb.cn/item/65f259f19f345e8d039bfb16.jpg)no-repeat center/cover}
.photo:nth-child(3){animation-delay: 12s;background: url(https://pic.imgdb.cn/item/65fade049f345e8d03820549.jpg)no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 6s;background: url('https://pic.imgdb.cn/item/65ed2dc99f345e8d03a5b702.jpg')no-repeat center/cover}
.photo:nth-child(1) {animation-delay: 0s;background: url(https://pic.imgdb.cn/item/66691075d9c307b7e9f12528.jpg)no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}
#dtmb{
      position: absolute;
      width: 100%;
      height: 100%;
      top:0px;
      object-fit: cover;
      pointer-events: none;
      mix-blend-mode: lighten;
      z-index:5;
      opacity:0.8;
}
#dtmb img{width: 100%;
      height: 100%;}

#mplayer {
      position: absolute;z-index: 40;
      left:20px;
      bottom: 5px;background:#600000;
      width: 30px;
      height: 30px;
      border: 3px solid #cccccc;
      border-radius: 50%;
      opacity: 1;
      transition: .7s;
      display: grid;
      place-items: center;
      --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
      position: absolute;
      content: '';
      border-style: solid;
      border-color: #cccccc;
      cursor: pointer;
      transition: .4s;
}
#mplayer::before {
      width: 0;
      height: 0;
      left: 10px;
      border-width: 10px 14px;
      border-color: transparent transparent transparent #cccccc;
      opacity: var(--disp1);
}
#mplayer::after {
      width: 2px;
      height: 18px;
      border-width: 0 5px 0 5px;
      opacity: var(--disp2);
}
#lrc{left: 15%;top: 82%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #ff0000, #ff0000);border:0px solid black;position: absolute;font:normal 2.5em 华文隶书;color: #000;white-space: pre;-webkit-background-clip: text;z-index: 10;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
#fullscreen { position: absolute;   top:20px; left:90%;font: normal 1.5em/0em 楷体;color:#000;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0); opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa"><span id="fullscreen">全屏展示</span>
<div id="testImg">
<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>

<div class="photo">&nbsp;</div>
</div>
<div id="dtmb"><img id="Img" src="https://pic.imgdb.cn/item/66a1ddcfd9c307b7e912a018.gif" ></div>
<div id="mplayer">&nbsp;</div>

<div data-lrc="" id="lrc">&nbsp;</div>

<div data-lrc="" id="lrcc">&nbsp;</div>
</div>

<p>
<audio autoplay="" id="aud" loop=""><source src="https://s2.ananas.chaoxing.com/sv-w9/audio/78/27/2c/086d6162acc01885a4b2118b2823aa6a/audio.mp3" type="audio/mp3" /></audio>
<script>
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.onclick = () => aud.paused ? (aud.play(),image.classList.remove('stop'),image1.play()): (aud.pause(),image.classList.add('stop'),image1.stop());
var image= document.getElementById("testImg");


let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏展示', document.exitFullscreen());
                fs = !fs;
      };
</script>
<span id="lrcStr" style="visibility: hidden;">
视频蒙版
00:00.100]日不落dj
天空的雾来得漫不经心
河水像油画一样安静
和平鸽慵懒步伐押着韵
心偷偷地放晴
祈祷你像英勇的禁卫军
动也不动地守护爱情
你在回忆里留下的脚印
是我爱的风景
我要送你日不落的想念
寄出代表爱的明信片
我要送你日不落的爱恋
心牵着心把世界走遍
你就是庆典你就是晴天
我的爱未眠
不落的想念飞在你身边
我的爱未眠
爱的巴士总是走了又停
微笑望着广场上人群
我要把爱全都装进心里
陪我一起旅行
我要送你日不落的想念
寄出代表爱的明信片
我要送你日不落的爱恋
心牵着心把世界走遍
你就是庆典你就是晴天
我的爱未眠
不落的想念飞在你身边
我的爱未眠
我要送你日不落的想念
寄出代表爱的明信片
我要送你日不落的爱恋
心牵着心把世界走遍
你就是庆典你就是晴天
我的爱未眠
不落的想念飞在你身边
我的爱未眠
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
      let tmpAr = [];
      for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
      }
      let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let arr="";
      let calcRule = ;
      for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                              for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                              }
                        }
                }
      }
      lrcAr.sort((a,b)=> a - b);
      return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (aud.currentTime - lrcAr);
      showLrc(time);
};

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</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;
            // 透明度还原
            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 image1= document.getElementById("Img");

mplayer.onclick = () => aud.paused ? (aud.play(),image.play()): (aud.pause(),image.stop());
</script>

海笑 发表于 2024-7-25 14:01

欣赏老师佳作！

老谟深虑 发表于 2024-7-25 16:07

         欣赏老师的佳作，点赞！

梦油 发表于 2024-7-25 16:19

欣赏佳作，问候亚伦。

红影 发表于 2024-7-25 20:41

这个好像还是用东篱大哥的制图呢，图片轮播和视频效果都很赞。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-7-25 20:44

原来这个水墨效果还是动图呢，本来以为是视频呢{:4_173:}

绿叶清舟 发表于 2024-7-25 21:03

漂亮的效果，制图也漂亮

竹溪 发表于 2024-7-26 16:08

漂亮，欣赏老师佳作。

东篱闲人 发表于 2024-9-9 20:53

变化效果真棒！{:4_204:}

东篱闲人 发表于 2024-9-9 20:54

亚伦辛苦。。。{:4_176:}

查看完整版本: 水墨效果