《梅花赋》梦苇 李军
<style type="text/css">#outblk {margin: auto;
width: 1164px;
height: 640px;
background: rgba(0,0,0,.45) url('https://pic.imgdb.cn/item/64a18d631ddac507cc72db3f.jpg') no-repeat center/cover;
margin-top: 120px;
margin-left: -160px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000;
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 #880000;
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 #88aaaa;
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: 45px;
text-align: center;
display: block;
white-space: nowrap;
color: #000080;
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: #FF0000;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,#ff0000);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">
<divid="photo"><img src="https://pic.imgdb.cn/item/64a18d8d1ddac507cc732148.jpg" /> <img src="https://pic.imgdb.cn/item/64a18dc21ddac507cc737ac3.jpg" /> <img src="https://pic.imgdb.cn/item/64a18dfe1ddac507cc73d7c6.jpg" /> <img src="https://pic.imgdb.cn/item/64a18e2e1ddac507cc74260b.jpg" /> <img src="https://pic.imgdb.cn/item/64a18e601ddac507cc7478ff.jpg" /> <img src="https://pic.imgdb.cn/item/64a18ea01ddac507cc74e088.jpg" /> <img src="https://pic.imgdb.cn/item/64a18ed21ddac507cc752fd9.jpg" /><img src="https://pic.imgdb.cn/item/64a18efc1ddac507cc756d0d.jpg" /> </div></div>
<div id="testImg" class="mm"><img src="https://pic.imgdb.cn/item/64a18d8d1ddac507cc732148.jpg" /> <img src="https://pic.imgdb.cn/item/64a18dc21ddac507cc737ac3.jpg" /> <img src="https://pic.imgdb.cn/item/64a18dfe1ddac507cc73d7c6.jpg" /> <img src="https://pic.imgdb.cn/item/64a18e2e1ddac507cc74260b.jpg" /> <img src="https://pic.imgdb.cn/item/64a18e601ddac507cc7478ff.jpg" /> <img src="https://pic.imgdb.cn/item/64a18ea01ddac507cc74e088.jpg" /> <img src="https://pic.imgdb.cn/item/64a18ed21ddac507cc752fd9.jpg" /><img src="https://pic.imgdb.cn/item/64a18efc1ddac507cc756d0d.jpg" /> </div>
<divclass="lrcShow"style="margin-left:12px;"></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%;"><divid="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 =`《梅花赋》梦苇 李军
词：安华 曲：王艺歌
LRC歌词制作：焱鑫磊
几度春风里
看花谢花开
含羞的春蕾令人爱
这前世的缘怎能不在
今生呵护你永不残败
倘若风雨他日来
枝叶凋零还有傲骨在
即便寒冷雪花飞
我伴梅花报春来
一抹斜阳下
谁婀娜多彩
百媚千姿涂粉黛
俏不争春立两岸
花香直挂云天外
倘若风雨他日来
枝叶凋零还有傲骨在
即便寒冷雪花飞
我伴梅花报春来
倘若风雨他日来
枝叶凋零还有傲骨在
即便寒冷雪花飞
我伴梅花报春来
`;
var opts = {
lrcTxt:lrc,
//lrcShowID:'sLRC',
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://www.joy127.com/url/105769.mp3'
};
new lrcPlayerY(opts);
</script>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
欣赏收藏老师的[音乐专辑] 好看又好听，点赞！ 巫荣云师 发表于 2023-7-3 20:31
欣赏收藏老师的[音乐专辑] 好看又好听，点赞！
祝好！{:1_292:} 欣赏一下，谢谢。 蓝魔 发表于 2023-7-3 22:13
欣赏一下，谢谢。
{:1_292:}
页:
[1]