【东篱音画】八声甘州
<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://pic.imgdb.cn/item/64ba60071ddac507cce2682e.jpg') no-repeat center/cover;
margin-top: 120px;
margin-left: -280px;
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://pic.imgdb.cn/item/64ba37621ddac507cc553687.jpg"> <img src="https://pic.imgdb.cn/item/64ba38dc1ddac507cc5a1d76.jpg"> <img src="https://pic.imgdb.cn/item/64ba3a601ddac507cc5f0c9b.jpg"> <img src="https://pic.imgdb.cn/item/64ba3bd81ddac507cc642534.jpg"> <img src="https://pic.imgdb.cn/item/64ba3f0a1ddac507cc6f483b.jpg"> <img src="https://pic.imgdb.cn/item/64ba40b91ddac507cc74ebdd.jpg"> <img src="https://pic.imgdb.cn/item/64ba423c1ddac507cc7a5ec9.jpg"><img src="https://pic.imgdb.cn/item/64ba44791ddac507cc82888d.jpg"> </div></div>
<div id="testImg" class="mm"><img src="https://pic.imgdb.cn/item/64ba37621ddac507cc553687.jpg"> <img src="https://pic.imgdb.cn/item/64ba38dc1ddac507cc5a1d76.jpg"> <img src="https://pic.imgdb.cn/item/64ba3a601ddac507cc5f0c9b.jpg"> <img src="https://pic.imgdb.cn/item/64ba3bd81ddac507cc642534.jpg"> <img src="https://pic.imgdb.cn/item/64ba3f0a1ddac507cc6f483b.jpg"> <img src="https://pic.imgdb.cn/item/64ba40b91ddac507cc74ebdd.jpg"> <img src="https://pic.imgdb.cn/item/64ba423c1ddac507cc7a5ec9.jpg"><img src="https://pic.imgdb.cn/item/64ba44791ddac507cc82888d.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.mp"></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:'ttps://music.163.com/song/media/outer/url?id=1384127698.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> 鼠标移开是转筒，移上去就是反转图片。很漂亮的音画制作。
最主要的，还用了东篱大哥自己的词，很赞{:4_199:} 这个好像发音画和古韵皆可呢{:4_173:}
东篱大哥厉害，现在套用代码很麻利{:4_187:} 红影 发表于 2023-7-21 20:04
这个好像发音画和古韵皆可呢
东篱大哥厉害，现在套用代码很麻利
偷了个代码。。。。{:5_117:} 东篱闲人 发表于 2023-7-21 20:18
偷了个代码。。。。
应该是亚伦老师的代码吧{:4_173:} 红影 发表于 2023-7-21 20:38
应该是亚伦老师的代码吧
不是。是那个很多火的那个孩子。。。 东篱闲人 发表于 2023-7-21 20:44
不是。是那个很多火的那个孩子。。。
焱鑫磊，呵呵，她的名字有意思，都是这类字呢{:4_173:} 红影 发表于 2023-7-21 20:48
焱鑫磊，呵呵，她的名字有意思，都是这类字呢
{:4_181:} 醉美水芙蓉 发表于 2023-7-21 21:08
这个就是亚伦老师的代码，炎鑫磊也是使用亚伦老师的代码！
哦，是这么回事啊，不知道，俺是盗的。。。{:5_117:} 醉美水芙蓉 发表于 2023-7-21 21:08
欣赏东篱老师美贴！
{:4_190:} 醉美水芙蓉 发表于 2023-7-21 21:11
我听到两种音乐，东篱老师使用了2次呢！
这个代码里确实有两个音乐地址，俺都给放上了。。。 醉美水芙蓉 发表于 2023-7-21 21:13
东篱老师可以关掉一个音乐！
废了一个地址。 这是魔方吧，杠杠的，东篱老师太有才了{:4_187:} 千羽 发表于 2023-7-21 21:34
这是魔方吧，杠杠的，东篱老师太有才了
套代码。。 东篱老师真会玩啊 一斛珠 发表于 2023-7-21 21:58
东篱老师真会玩啊
闲的。。{:5_106:}