门丽、笑天 - 相思的雨 - 中四版【css可控音画】 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2022-10-16 20:25

门丽、笑天 - 相思的雨 - 中四版【css可控音画】

本帖最后由亚伦影音工作室于 2023-10-8 21:53 编辑 <br /><br /><style>
   #papa {
margin: auto;
width: 1024px;
height: 600px;
background: rgba(0,0,0,.45) url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/829c67fd60f39878f5190c4f8a0b00fb.jpg') no-repeat center/cover;
margin-top: 20px;
margin-left: -130px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000;
display: grid;
place-items: center;
overflow: hidden;
position: relative;
z-index: 1;
}

#mplayer {
position: absolute;
bottom: 0;
width: 300px;
height: 80px;
user-select: none;
display: grid;
place-items: center;
cursor: pointer;
}

#mplayer:hover #btnwrap, #mplayer:hover {
transform: translateY(var(--yy: -20px;));
}

#mplayer:hover #btnwrap {
background:#0000;
-webkit-background-clip : text;
border-radius: 0px;
opacity: 1;
}

#btnwrap, #prog {
position: absolute;
display: grid;
place-items: center;
transition: .7s;
}

#btnwrap {
--yy: -20px;
width: 35px;
height: 35px;top: 25px;
left: 560px;
transform: rotate(0deg);
border: 1px solid tan;
border-radius: 0px;

opacity: 1;
}

#btnplay {
width: 15px;
height: 15px;
transform: translateX(3px);
background: #cccccc;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

#btnpause {
width: 2px;
height: 15px;
border-style: solid;
border-width: 0px 3px;
border-color: transparent #cccccc;
display: none;
}

#prog {
--yy: 40px;
width: 750px;
height: 1.5px;
border-radius: 0px;
background: #ff0000;
font: normal 15px / 36px sans-serif;
color: #ffffff;

opacity: .8;
}

#lrcwrap {
position: absolute;
top: 480px;
font-family: 华文隶书;
font-size: 45px;
}

#lrc1, #lrc2 {
width: 100%;
height: 100%;
color: #ffffff;
white-space: nowrap;
}

#lrc1 {
width: 100%;
height: 100%;
color: #DDDDDD;
white-space: nowrap;
filter: drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
}

#lrc2 {
position: absolute;
top: 0px;
left: 0px;
color: #880000;
overflow: hidden;
filter: drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}

#mpic {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1024px;
height: 600px;
animation: rote 50s linear infinite;
cursor: pointer;
opacity: 0.5;
}

@keyframes rote {
0%{
   background-position: 0% 0%;
}
100%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
   background-position: 0% 600%;filter:hue-rotate(0deg)
}
}

#mpic1 {
position: absolute;
transform: rotateY(0deg);
top: -150px;
left: 0px;
width: 1224px;
height: 1224px;
animation: rotet 80s linear infinite;
cursor: pointer;
opacity: 0.4;
}

@keyframes rotet {
0%{
   background-position: 0% 0%;
}
100%{transform: rotateX(0deg) rotateY(0deg) rotateZ(50deg);
   background-position: 600% 1600%;filter:hue-rotate(360deg)
}
}

@keyframes mov1 {
from {
width: 0%;
}

to {
width: 100%;
}
}

@keyframes mov2 {
from {
width: 0%;
}

to {
width: 100%;
}
}

#disc {
position: absolute;
width: 90px;
height: 90px;
left: 30px;
bottom: 0px;
border: 2px solid #000000;
background: url('http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);
mask: radial-gradient(transparent 7px,#red 0);
-webkit-mask: radial-gradient(transparent 7px,red 0);
border-radius: 50%;
cursor: pointer;
animation: rot 4s linear infinite;
z-index: 20;
transform: rotateX(45deg) rotateY(20deg) rotate(0deg);
}

@keyframes rot {
0% {
transform: rotateX(45deg) rotateY(20deg) rotateZ(0deg);
}

100% {
transform: rotateX(45deg) rotateY(20deg) rotateZ(360deg);
}
}

#items
{position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;opacity: .5;
animation: slider 5s linear infinite;
}

@keyframes slider
{
from
{
opacity: 1;
filter: hue-rotate(360deg)contrast(120%)brightness(100%);
}

50%
{
opacity: 1;
}

to
{
opacity: 1;
filter: hue-rotate(0deg)contrast(140%)brightness(100%);
}
}

#photo img {
width: 1024px;
height: 600px;
position: absolute;
border: 0px solid #000000;
top: 0px;
left: 0px;
filter: contrast(140%)brightness(100%);

opacity: 0;
animation-name: round;
animation-duration: 32s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes round {0% {
opacity: 0;
-webkit-transform:translate(0%,0%)scale(1);}

10% {
opacity: 1;background-position: 0% 0%;
}
12% {
opacity: 1;background-position: 0% 0%;
}

22% {
opacity: 0;background-position: 0% 0%;
-webkit-transform:translate(0%,0%)scale(1);}

}

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

#photo img:nth-child(7) {-webkit-mask-image: radial-gradient(black 15% ,transparent 65%);
animation-delay: 24s;
}

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

#photo img:nth-child(5) {-webkit-mask-image: radial-gradient(black 15% ,transparent 65%);
animation-delay: 16s;
}

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

#photo img:nth-child(3) {-webkit-mask-image: radial-gradient(black 15% ,transparent 65%);
animation-delay: 8s;
}

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

#photo img:nth-child(1) {-webkit-mask-image: radial-gradient(black 15% ,transparent 65%);
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;
}
</style>

<div id="papa" data-lr="no"><div id="testImg">
<divid="item"><divid="photo"><img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909481026411020.jpg" /> <img src="https://img-

baofun.zhhainiao.com/pcwallpaper_ugc/static/aafaa3bfe8ca64e32c4bf22e90c32787.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909521828974999.jpg" /> <img

src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9841c6af9b4c85dc276e1a5965b2fb00.jpg" /> <img src="https://img-

baofun.zhhainiao.com/pcwallpaper_ugc/static/fe01c7ec8cdb2eb2a2536bc394e7a435.jpg" /> <img src="https://img-

baofun.zhhainiao.com/pcwallpaper_ugc/static/0f74762ece0cfe2895dfdc0a4301ba9a.jpg" /> <img src="https://img-

baofun.zhhainiao.com/pcwallpaper_ugc/static/157d4616d461a0ecc9d2d4fadff55e4c.jpeg" /><img src="https://img-

baofun.zhhainiao.com/pcwallpaper_ugc/static/0323a98fe3627a64c6c16d96c701d18f.jpg" /> </div></div></div>
   <divid="mpic"style="width: 100%; height: 100%;background: url('http://pan.yinhuabbs.cn/view.php/9e78432ca0b1230ae6c99f5eefdd8364.png')0 0/40% 90%" > </div>
<divid="mpic1"style="width: 1024px; height: 1024px;background: url('http://pan.yinhuabbs.cn/view.php/d3df92bdf235fc04f4fc8ce89a319753.png')0 0/50% 50%" > </div>
   <div id="lrcwrap">
            <span id="lrc1">正在缓冲......</span>
            <span id="lrc2">正在缓冲......</span>
   </div>

<span id="disc"></span>
   <div id="mplayer">
            <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span><input type="button" id="testBtn" value="."style="position: absolute;border-radius:

0%;width: 35px; height: 35px;-webkit-background-clip : text;z-index: 3;"></div>
            <div id="prog">00:00 | 00:00</div>
   </div>
</div>

<script>
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];
aud.src = 'https://storage.live.com/items/1965B2B1656C2AF6!16583?';
aud.autoplay = true;
aud.loop = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => disc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => disc.style.animationPlayState = 'paused');

mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');

mpic1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic1.style.animationPlayState = 'paused');

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
prog.style.background = 'linear-gradient(90deg, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
   prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
}
   }
});

let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc2.style.animationPlayState = 'paused') : (btnplay.style.display = 'none',

btnpause.style.display = 'block', lrc2.style.animationPlayState = 'running');
let showLrc = (time) => {
lrc2.style.animation = (mFlag ? 'mov1 ': 'mov2 ') + time + 's linear forwards';
lrc1.innerHTML = lrc2.innerHTML = lrcAr;
   mKey += 1;
   mFlag = !mFlag;
};

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 mtime = lrcAr - (aud.currentTime - lrcAr);
   showLrc(mtime);
};

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;
};

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>

小辣椒 发表于 2022-10-16 20:54

画面转换漂亮的{:4_199:}

这个光盘不起作用？

小辣椒 发表于 2022-10-16 20:54

旁边的按钮控制光盘

马黑黑 发表于 2022-10-16 21:06

小辣椒发表于 2022-10-16 20:54
画面转换漂亮的

这个光盘不起作用？

这里，光盘起装饰作用，不过可以将其 click 事件也添加了

小辣椒 发表于 2022-10-16 21:49

马黑黑发表于 2022-10-16 21:06
这里，光盘起装饰作用，不过可以将其 click 事件也添加了

刚才看见了{:4_181:}

马黑黑 发表于 2022-10-16 21:54

小辣椒发表于 2022-10-16 21:49
刚才看见了

{:4_190:}

小辣椒 发表于 2022-10-16 21:59

马黑黑发表于 2022-10-16 21:54

这首歌我也是做过，非常熟悉的一首歌

马黑黑 发表于 2022-10-16 22:01

小辣椒发表于 2022-10-16 21:59
这首歌我也是做过，非常熟悉的一首歌

相思的雨，之前见过歌名，没听

亚伦影音工作室 发表于 2022-10-16 22:03

马黑黑发表于 2022-10-16 22:01
相思的雨，之前见过歌名，没听

谢谢马老指导！

马黑黑 发表于 2022-10-16 22:16

亚伦影音工作室发表于 2022-10-16 22:03
谢谢马老指导！

互相学习

红影发表于 2022-10-16 23:00

人物和风景相互淡入淡出，很好地呼应歌曲内涵。欣赏亚伦老师精美作品{:4_199:}

页: [1]

花潮论坛's Archiver

门丽、笑天 - 相思的雨 - 中四版【css可控音画】