松烟入墨

东篱闲人 发表于 2023-8-2 20:12

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="t_f" id="postmessage_1921030"><br><br><style type="text/css">
#outblk {margin: auto;
width: 1164px;
height: 640px;
background: rgba(0,0,0,.45) url('https://s1.ax1x.com/2023/08/02/pPPo4hj.jpg') no-repeat center/cover;
margin-top: 120px;
margin-left: -300px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #CDC0B0;
display: grid;
place-items: center;
overflow: hidden;
position: relative;
z-index: 1;
}
#photo {
width: 1164px;
height: 640px;
position: absolute;
border: 0px solid #000000;
top: 0px;
left: 0px; opacity: 0;
transition: 1s;}

#outblk:hover #photo {
opacity: 1;transition:1s;}

#photo img {
width: 60%;
height: 60%;
position: absolute;
opacity: 0;
box-shadow: 0px 0px 0px 1px #ffffff, 0px 0px 0px 5px #8B8B83;
top:110px; left:220px;filter:contrast(140%)brightness(100%);
animation-name: round;
animation-duration: 48s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes round{0% {opacity: 1;transform:perspective(900px) rotateY(-180deg)scale(1);}
5% {opacity: 1;filter:hue-rotate(360deg);transform:perspective(900px)rotateY(0deg)scale(1)}
9% {opacity: 1;transform:perspective(400px) rotateX(-180deg)scale(1);}
13% {opacity: 1;transform:perspective(600px) rotateX(90deg)scale(1);}
18% {opacity: 0;transform:perspective(600px) rotateX(90deg)scale(1);}
}

#photo img:nth-child(8) {
animation-delay: 42s;
}

#photo img:nth-child(7) {
animation-delay: 36s;
}

#photo img:nth-child(6) {
animation-delay: 30s;
}

#photo img:nth-child(5) {
animation-delay: 24s;
}

#photo img:nth-child(4) {
animation-delay: 18s;
}

#photo img:nth-child(3) {
animation-delay: 12s;
}

#photo img:nth-child(2) {
animation-delay: 6s;
}

#photo img:nth-child(1) {
animation-delay: 0s;
}
.stop #photo img:nth-child(1) {
animation-play-state: paused;
}

.stop #photo img:nth-child(2) {
animation-play-state: paused;
}

.stop #photo img:nth-child(3) {
animation-play-state: paused;
}

.stop #photo img:nth-child(4) {
animation-play-state: paused;
}

.stop #photo img:nth-child(5) {
animation-play-state: paused;
}

.stop #photo img:nth-child(6) {
animation-play-state: paused;
}

.stop #photo img:nth-child(7) {
animation-play-state: paused;
}

.stop #photo img:nth-child(8) {
animation-play-state: paused;
}

.stop{
         animation-play-state:paused;
            }
         .mm{
            margin: 200px auto;
            width: 340px;
            height: 214px;
            transform-style: preserve-3d;
            animation-name: animate;
            animation-duration: 50s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
opacity: 1;transition: 0.5s;transform: rotateX(0deg)scale(1);
            position: relative;
         }

#outblk:hover .mm{
opacity: 0;transition: 0.5s;transform: rotateX(0deg)scale(0);}

.mm img{width:340px;
            height: 214px;
            position: absolute;
            left:0px;
            top:0px;z-index: 10;
            box-shadow:0px 0px 0px 2px #000000, 0px 0px 0px 6px #FFEFDB;
filter:contrast(130%)brightness(100%);
            border-radius: 0px;
         }

         .mm img:nth-child(1){
            transform:rotateX(0deg) translateZ(262px);}
         .mm img:nth-child(2){
            transform:rotateX(45deg) translateZ(262px);}
         .mm img:nth-child(3){
            transform: rotateX(90deg) translatez(262px);}
         .mm img:nth-child(4){
            transform: rotateX(135deg) translatez(262px);
         }
         .mm img:nth-child(5){
            transform: rotateX(180deg) translatez(262px);
         }
         .mm img:nth-child(6){
            transform: rotateX(225deg) translatez(262px);
         }
         .mm img:nth-child(7){
            transform: rotateX(270deg) translatez(262px);
         }
         .mm img:nth-child(8){
            transform: rotateX(315deg) translatez(262px);
         }


      .mm img:nth-child(1):stop{
            }
         .mm img:nth-child(2):stop{

         }
         .mm img:nth-child(3):stop{

         }
         .mm img:nth-child(4):stop{

         }
         .mm img:nth-child(5):stop{

         }
         .mm img:nth-child(6):stop{
         }
         .mm img:nth-child(7):stop{

         }
         .mm img:nth-child(8):stop{

         }

      @keyframes animate{
            0% {
               transform:rotateX(-10deg) rotateZ(65deg) rotateX(-360deg);
            }
            25% {
               transform:rotateX(10deg) rotateZ(-65deg) rotateX(0deg);
            }
50% {
               transform:rotateX(10deg) rotateZ(65deg) rotateX(360deg);
            }
75% {
               transform:rotateX(-10deg) rotateZ(65deg) rotateX(0deg);
            }
100% {
               transform:rotateX(-10deg) rotateZ(65deg) rotateX(-360deg);
            }

         }
.lrcShow{
position: absolute;
top: 520px;
font-family: 华文行楷;
font-size: 25px;
text-align: center;
display: block;
white-space: nowrap;
color: #8B7D6B;
filter: drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: #8B7D6B;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%;filter:hue-rotate(360deg)}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}

.mCtrl{border:2px solid #000000;border-radius:50%;display:inline-block;width:90px;height:90px;position:absolute;bottom:30px;left:70px;transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);background: url('https://pic.imgdb.cn/item/6480731e1ddac507cc1b2972.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#8B7D6B);background-position:0 0;background-size:100% 100%;}
.z360z{animation:rotating 10s linear infinite;}@keyframes rotating{0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}

</style>
<div id="outblk"><div id="testImg">
<div id="photo"><img src="https://s1.ax1x.com/2023/08/02/pPPTiDK.jpg"> <img src="https://s1.ax1x.com/2023/08/02/pPPTEUe.jpg"> <img src="https://s1.ax1x.com/2023/08/02/pPPTm8A.jpg"> <img src="https://s1.ax1x.com/2023/08/02/pPPTngI.jpg"> <img src="https://s1.ax1x.com/2023/08/02/pPPTMKP.jpg"> <img src="https://s1.ax1x.com/2023/08/02/pPPTQDf.jpg"> <img src="https://s1.ax1x.com/2023/08/02/pPPT3VS.jpg"><img src="https://s1.ax1x.com/2023/08/02/pPPTG5Q.jpg"> </div></div>

<div id="testImg" class="mm"><img src="https://s1.ax1x.com/2023/08/02/pPPTiDK.jpg"> <img src="https://s1.ax1x.com/2023/08/02/pPPTEUe.jpg"> <img src="https://s1.ax1x.com/2023/08/02/pPPTm8A.jpg"> <img src="https://s1.ax1x.com/2023/08/02/pPPTngI.jpg"> <img src="https://s1.ax1x.com/2023/08/02/pPPTMKP.jpg"> <img src="https://s1.ax1x.com/2023/08/02/pPPTQDf.jpg"> <img src="https://s1.ax1x.com/2023/08/02/pPPT3VS.jpg"><img src="https://s1.ax1x.com/2023/08/02/pPPTG5Q.jpg"> </div>

<div class="lrcShow" style="margin-left:12px;"><audio autoplay="" src="https://music.163.com/song/media/outer/url?id=1384127698.mp3"></audio><audio autoplay="" src="https://music.163.com/song/media/outer/url?id=1384127698.mp3"></audio></div>
<button id="testBtn" value="." style="position: absolute;width: 1200px; height: 620px;-webkit-background-clip : text;-webkit-text-fill-color:transparent;z-index: 1;border-radius:0%;"><div id="mDisk" class="mCtrl"></div></button>

</div>
<script type="text/javascript">
var lrcPlayerY = function() {
return this.init.apply(this, arguments)
};
lrcPlayerY.prototype = {
constructor: lrcPlayerY,
init: function(opts) {
   lyricTxt = opts.lrcTxt.replace(/(^\s*)|(\s*$)/g, '');
   this.showLrcObj = document.getElementById(opts.lrcShowID);
   this.audioCtrl = document.getElementById(opts.audioCtrl);
   this.lrcShowObj = document.getElementsByClassName('lrcShow');
   this.lrcVec = this.handleLrc(lyricTxt);
   this.genPlayer(opts.audioURL)
},
handleLrc: function(lyricTxt) {
   var parts = lyricTxt.replace(/(^\s*)|(\s*$)/g, "").split(/\r|\n|\r\n/);
   var lrcs = new Array();
   for (let index = 0; index < parts.length; index++) {
         let chkTime = parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);
         if (chkTime) {
            tIdx = parts.lastIndexOf(']');
            if (tIdx > 0) lrcTxt = parts.substr(tIdx + 1);
            for (m = 0; m < chkTime.length; m++) {
               ta = chkTime.substr(1).replace(']', '').split(/:/);
               _t = ( + ta) * 60 + ( + ta);
               if (lrcs.length == 0 && _t != 0) {
                     lrcs.push({
                        seconds: 0,
                        words: '<span style="font-size:50%;">© cesholl</span>'
                     })
               }
               lrcs.push({
                     seconds: _t,
                     words: lrcTxt
               })
            }
         }
   }
   return lrcs.sort(function(a, b) {
         return (a.seconds - b.seconds)
   })
},
showLrc: function(durTime) {
   this.lrcShowObj.innerHTML = this.lrcShowObj.dataset.lrc = this.lrcVec.words;
   this.lrcShowObj.style.setProperty('--aniName', 'bgMove' + (this.idx % 2));
   this.lrcShowObj.style.setProperty('--durTime', durTime + 'ms');
   this.lrcShowObj.style.setProperty('--aniPlayState', 'running');
   this.idx++
},
genPlayer: function(mUrl) {
   this.mObj = document.createElement("audio");
   this.mObj.loop = false;
   this.mObj.muted = false;
   this.mObj.autoplay = true;
   this.mObj.src = mUrl;
   this.lrcShowObj.appendChild(this.mObj);
   var that = this;
   var turn = 0;
   this.idx = 0;
   this.mObj.addEventListener('ended',
   function() {
         that.idx = 0;
         that.audioCtrl.classList.remove('z360z');
         this.play()
   });
   this.mObj.addEventListener('play',
   function() {
         that.audioCtrl.classList.add('z360z');
         that.lrcShowObj.style.setProperty('--aniPlayState', 'running')
   });
   this.mObj.addEventListener('pause',
   function() {
         if (that.idx == 1 && this.currentTime < 1) {
            that.mObj.play();
            return false
         }
         that.audioCtrl.classList.remove('z360z');
         that.lrcShowObj.style.setProperty('--aniPlayState', 'paused')
   });
   this.mObj.addEventListener('error',
   function() {
         console.log("audio wrong, remove play start event");
         that.lrcShowObj.style.display = 'none';
         that.lrcShowObj.removeChild(this)
   });
   this.mObj.addEventListener('timeupdate',
   function() {
         if (that.idx < that.lrcVec.length) {
            if (this.currentTime >= that.lrcVec.seconds) {
               if (that.idx < (that.lrcVec.length - 1)) {
                     that.showLrc((that.lrcVec.seconds - that.lrcVec.seconds) * 1000 - 100)
               } else {
                     that.showLrc((this.duration - that.lrcVec.seconds) * 1000 - 100)
               }
            }
         }
   });
   this.audioCtrl.addEventListener('click',
   function() {
         if (that.mObj.paused) {
            that.mObj.play()
         } else {
            that.mObj.pause()
         }
   })
}
}
var image = document.getElementById("testImg"),
button = document.getElementById("testBtn");

if (image.classList && image && button) {
button.onclick = function() {
   if (this.value == '.') {
         image.classList.add('stop');
         this.value = '*';
}

else {
image.classList.remove('stop');
         this.value = '.';
}
};
}

</script>

<script type="text/javascript">
var lrc =` 烟雨草堂出品
编辑：东篱闲人
配图：东篱闲人
折一枝寒山凝碧
上有白雪堆积
数不出青针瘦密
云海苍茫万里
燃一缕苍炱升起
松香久散不去
心思如余烬收集
研磨得如此细腻

总有一砚风雨
流连过峰石贫瘠
夫曰曲水流觞，已为陈迹.
以千古而序

总有一纸淋漓
恣意如虬根百曲
所谓老树迎客，林海奔啼
分明是墨乡故里

拨一炉枯炭未熄
琥珀剔透欲滴
避不开春潮带雨
老街晒薪临溪

投一把丁香碎粒
捣作丹青浓郁
光阴被冻入胶泥
玲珑似一方印玺
总有一砚风雨
流连过峰石贫瘠
夫曰曲水流觞，已为陈迹
以千古而序

总有一纸淋漓
恣意如虬根百曲
所谓老树迎客，林海奔啼
分明是墨乡故里

听说一点如漆
是游龙灵眸初启
几欲腾空破壁，扶摇而去
将天地洞悉

听说一行绝句
残艳似故人手笔
或于牌楼村驿，藤黄扇底
恍然道:原来是你

`;
var opts = {
lrcTxt:lrc,
//lrcShowID:'sLRC',
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://music.163.com/song/media/outer/url?id=28765208.mp3'
};
new lrcPlayerY(opts);
</script>
<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

</td></tr></tbody></table>

<div class="modact"><br></div></div>
<div class="sign" style="max-height:500px;maxHeightIE:500px;"><br></div>

<div class="po hin">
<div class="pob cl"></div></div>

马黑黑 发表于 2023-8-2 20:36

入得有点慢

东篱闲人 发表于 2023-8-2 20:46

马黑黑发表于 2023-8-2 20:36
入得有点慢

那个聚合图床传图有点乱套，总不好好显示。俺换了一个地方传，有点慢。。。

马黑黑 发表于 2023-8-2 20:47

东篱闲人发表于 2023-8-2 20:46
那个聚合图床传图有点乱套，总不好好显示。俺换了一个地方传，有点慢。。。

没事，慢就慢点，慢慢来不急

东篱闲人 发表于 2023-8-2 20:51

马黑黑发表于 2023-8-2 20:47
没事，慢就慢点，慢慢来不急

不急就好。。。{:5_106:}

醉美水芙蓉 发表于 2023-8-2 21:11

红影发表于 2023-8-2 21:12

这个帖子无论是画面和歌曲，都带着古风韵味，好美{:4_199:}

红影发表于 2023-8-2 21:13

鼠标滑过，会让滚动图变翻转图图呢，真漂亮{:4_187:}

马黑黑 发表于 2023-8-2 21:15

东篱闲人发表于 2023-8-2 20:51
不急就好。。。

急也急不来

东篱闲人 发表于 2023-8-2 21:18

醉美水芙蓉发表于 2023-8-2 21:11
老师玩得溜溜转了！

{:5_117:}

东篱闲人 发表于 2023-8-2 21:18

红影发表于 2023-8-2 21:12
这个帖子无论是画面和歌曲，都带着古风韵味，好美

老啦，都喜欢古的东西。。。。

东篱闲人 发表于 2023-8-2 21:18

马黑黑发表于 2023-8-2 21:15
急也急不来

{:4_172:}

红影发表于 2023-8-2 21:49

东篱闲人发表于 2023-8-2 21:18
老啦，都喜欢古的东西。。。。

这和雅致有关，和年龄无关{:4_173:}

东篱闲人 发表于 2023-8-2 21:52

红影发表于 2023-8-2 21:49
这和雅致有关，和年龄无关

还有这样的说法吗？{:5_115:}

红影发表于 2023-8-2 22:25

东篱闲人发表于 2023-8-2 21:52
还有这样的说法吗？

是啊，你不知道么{:4_173:}

马黑黑 发表于 2023-8-2 22:56

东篱闲人发表于 2023-8-2 21:18

{:4_190:}

亚伦影音工作室 发表于 2023-8-3 07:09

之前制作的有很多问题，还需修改

东篱闲人 发表于 2023-8-3 09:28

亚伦影音工作室发表于 2023-8-3 07:09
之前制作的有很多问题，还需修改
嗯嗯，不懂代码，整不明白啥意思，都是从你们那里盗来的，然后瞎套一下。。。{:5_117:}

东篱闲人 发表于 2023-8-3 09:29

红影发表于 2023-8-2 22:25
是啊，你不知道么

不知道。{:5_117:}

亚伦影音工作室 发表于 2023-8-3 12:06

东篱闲人发表于 2023-8-3 09:28
嗯嗯，不懂代码，整不明白啥意思，都是从你们那里盗来的，然后瞎套一下。。。

会套用就是进步，就怕没人尝试！

页: [1] 2

花潮论坛's Archiver

松烟入墨