遗憾的过客-宋健峰【鼠控动画】
本帖最后由 亚伦影音工作室 于 2022-11-13 22:59 编辑 <br /><br /><style type="text/css">#outblk {margin: auto;
width: 1200px;
height: 620px;
background:url('http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif')0 0/30% 30%,url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/bb7e45dd4ea6391ec64ea6526548292c.jpg')0 0/100% 100%;
margin-top: 20px;
margin-left: -300px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000;
display: grid;
place-items: center;
overflow: hidden;
position: relative;
z-index: 1;
}
#mm{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;
position: absolute;top: 200px;
left: 400px;
}
#outblk:hover #mm{width: 300px;
height: 300px;
transform-style: preserve-3d;
animation-name: animate0;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
opacity: 1;transition: 3s;
position: absolute;top: 200px;
left: 400px;
}
#outblk:hover #mm img{width:300px;
height: 300px;
position: absolute;
left:0px;
top:0px;z-index: 10;
box-shadow:0px 0px 0px 2px #cccccc;
filter:contrast(130%)brightness(100%);overflow: hidden;
border-radius: 0px;
}
#mm img{width:340px;
height: 214px;
position: absolute;
left:0px;
top:0px;z-index: 10;
box-shadow:0px 0px 0px 4px #005500;
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);}
#outblk:hover #mm img:nth-child(1){transform: rotateY(180deg) translateZ(150px);opacity: 1;}
#outblk:hover #mm img:nth-child(2){transform: translateZ(150px);opacity: 1;}
#outblk:hover #mm img:nth-child(3){transform: rotateX(-270deg) translateZ(150px);opacity: 1;}
#outblk:hover #mm img:nth-child(4){transform: rotateX(270deg) translateZ(150px);opacity: 1;}
#outblk:hover #mm img:nth-child(5){transform: rotateY(-270deg) translateZ(150px);opacity: 1;}
#outblk:hover #mm img:nth-child(6){ transform: rotateY(270deg) translateZ(150px);opacity: 1;}
#outblk:hover #mm img:nth-child(7){opacity: 0;}
#outblk:hover #mm img:nth-child(8){opacity: 0;}
@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);
}
}
@keyframes animate0{100% {transform: rotate3d(1, 1, 0, -360deg)rotateX(10deg);}}
.lrcShow{
position: absolute;
top: 520px;
font-family: 华文新魏;
font-size: 48px;
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:30px;transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);background: url('http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.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="mm"><img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/565073294e63c0bc59cb263e53457c4c.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7909e2d575c7a88c70e4d0e3c2e02b87.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6a04aa78e43c52b1c97a0d9dd0e302f0.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b858cb8d4d309b062c4d712fdff30e6d.jpg" /> <img src="https://img-baofun.zhhainiao.com/fs/d987e9aa816a8861e4c6fc02b3d89bf1.jpg" /> <img src="https://img-baofun.zhhainiao.com/fs/fbaab93baffecdf789e24143523dde47.jpg" /> <img src="https://img-baofun.zhhainiao.com/fs/6edb7c9c8c361a448a07e28c5a26c204.jpg" /><img src="https://img-baofun.zhhainiao.com/fs/6df20f222a7809f6f2f51e324ebd592a.jpg" /> </div></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 =` 遗憾的过客-宋健峰
词：苗子
曲：苗子
出品人：亚伦
出品：亚伦影音工作室
代码复杂，谨慎模仿
或许都是我的错
爱你那么多
缘聚缘散缘灭还是舍不得
曾经许下的承诺
时光上了锁
让我如何接受这样的结果
我们从无话不说到无话可以说
激情慢慢被生活淹没
从前你穿山过河只为抱抱我
而现在面对面沉默
我们从无话不说到无话可以说
渐渐沦落遗憾的过客
如果你离开了我真的会快乐
就让我一个人难过
世间情字最难躲
难渡爱情河
若非心被伤透谁又能看破
我是扑火的飞蛾
扑向了热火
最后遍体鳞伤无处可逃脱
我们从无话不说到无话可以说
激情慢慢被生活淹没
从前你穿山过河只为抱抱我
而现在面对面沉默
我们从无话不说到无话可以说
渐渐沦落遗憾的过客
如果你离开了我真的会快乐
就让我一个人难过
我们从无话不说到无话可以说
激情慢慢被生活淹没
从前你穿山过河只为抱抱我
而现在面对面沉默
我们从无话不说到无话可以说
渐渐沦落遗憾的过客
如果你离开了我真的会快乐
就让我一个人难过
就让我一个人难过
`;
var opts = {
lrcTxt:lrc,
//lrcShowID:'sLRC',
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://www.qqmc.com/up/kwlink.php?id=233694619&.mp3'
};
new lrcPlayerY(opts);
</script>
这个好看，鼠标划过后，转动圆环变成了转动立方体，真漂亮。欣赏亚伦老师好帖{:4_187:} 感谢老师的精美分享，好看的播放器，欣赏问好！{:4_204:} 那谁说，歌词还是一行的好，确实这样画面反而简洁一点 感谢老师分享，漂亮的背景变换，点赞！{:4_178:}
页:
[1]