《我的真心被你出卖》雨中百合
本帖最后由 焱鑫磊 于 2023-7-5 21:33 编辑 <br /><br /> <style>#papa {
margin: 110px -280px;
width: 1164px;
height: 620px;
background: url('https://pic.imgdb.cn/item/64a564481ddac507cce26d6a.jpg') no-repeat center/cover;
box-shadow: 0 0 0px #000;
position: relative;
z-index: 1;overflow:hidden;
--state: paused;
}
css-doodle { position: absolute; }
.photo {width: 100%;
height: 100%;
position: absolute;z-index: 5;
top:0px; left:0px;
opacity: 0;
animation: round 90s linear infinite;}
@keyframes round{0% {opacity: 1;clip-path:polygon(66% 44%, 32% 30%, 18% 70%, 66% 94%, 79% 82%, 28% 86%, 95% 43%, 81% 48%, 89% 57%, 45% 78%, 24% 0%, 13% 42%, 19% 50%, 5% 8%, 78% 57%, 61% 0%, 88% 6%, 55% 25%, 89% 33%, 27% 18%, 87% 71%, 10% 73%, 0% 51%, 24% 51%, 39% 45%, 40% 13%, 77% 36%, 36% 19%, 55% 81%, 85% 79%)}
4% {opacity: 1;clip-path:polygon(89% 28%, 90% 78%, 60% 14%, 21% 62%, 60% 40%, 44% 90%, 71% 72%, 45% 14%, 71% 44%, 74% 32%, 1% 52%, 61% 63%, 70% 98%, 5% 40%, 80% 42%, 73% 74%, 35% 19%, 23% 25%, 67% 5%, 42% 28%, 9% 10%, 27% 43%, 94% 57%, 67% 40%, 57% 44%, 63% 47%, 99% 13%, 52% 62%, 69% 65%, 72% 24%)}
9% {opacity: 1;clip-path:polygon(93% 21%, 60% 95%, 22% 78%, 8% 42%, 29% 88%, 55% 33%, 38% 87%, 6% 85%, 2% 85%, 58% 53%, 21% 83%, 11% 56%, 20% 48%, 38% 44%, 0% 62%, 76% 66%, 65% 62%, 70% 80%, 4% 83%, 13% 37%, 55% 90%, 46% 81%, 36% 83%, 73% 21%, 20% 78%, 69% 19%, 56% 74%, 30% 86%, 19% 0%, 10% 21%)}
10% {opacity: 1;clip-path: inset(0 0 0 0);}
12% {opacity: 1;clip-path: inset(0 0 0 0);}
15% {opacity: 0;clip-path: inset(0 0 0 0);}
}
img:nth-child(1) {animation-delay: 84s;}
img:nth-child(2) {animation-delay: 78s;}
img:nth-child(3) {animation-delay: 72s;}
img:nth-child(4) {animation-delay: 66s;}
img:nth-child(5) {animation-delay: 60s;}
img:nth-child(6) {animation-delay: 54s;}
img:nth-child(7) {animation-delay: 48s;}
img:nth-child(8) {animation-delay: 42s;}
img:nth-child(9) {animation-delay: 36s;}
img:nth-child(10){animation-delay: 30s;}
img:nth-child(11){animation-delay: 24s;}
img:nth-child(12){animation-delay: 18s;}
img:nth-child(13){animation-delay: 12s;}
img:nth-child(14) {animation-delay: 6s;}
img:nth-child(15) {animation-delay: 0s;}
.stop img:nth-child(1),
.stop img:nth-child(2),
.stop img:nth-child(3),
.stop img:nth-child(4),
.stop img:nth-child(5),
.stop img:nth-child(6),
.stop img:nth-child(7),
.stop img:nth-child(8),
.stop img:nth-child(9),
.stop img:nth-child(10),
.stop img:nth-child(11),
.stop img:nth-child(12),
.stop img:nth-child(13),
.stop img:nth-child(14),
.stop img:nth-child(15){animation-play-state: paused;}
#canv {filter:hue-rotate(0deg)contrast(140%)brightness(80%);
position: absolute;
display: block;
height: 100%;
position: relative;
cursor: pointer;
z-index: 4;opacity: 1;
}
#vid { display: none; }
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
position: absolute;z-index: 8;
left: 50%;
transform: translate(-50%);
top: 85%;
font:normal 3em 华文行楷;
color: #055306;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#fg{width: 100%;height: 100%;top:0px; left:0px;position: absolute; z-index: 6;animation: slider 10s linear infinite ;opacity: 0;}
@keyframes slider {0% { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(241, 23, 18, 0.91) 86%); } 50% {background: url(https://www.kumeiwp.com/sub/file ... 5ac6beaa058a5b3.png) 0 0/100% 100%;100%} { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 181, 441, 0.91) 86%);} }
.wenzi { position: absolute; left: 13%; top: 18%; z-index: 10; color:#ffffff; font: bold 20px/20px 'FangSong',serif;opacity: 1; }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:2%; left:5%;color:#FFffff; font: normal 2.2em华文行楷; opacity: 1; cursor: pointer; z-index: 6}
</style>
<div id="papa">
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="testImg" >
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e430b0d2dde5777e00d33.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e43350d2dde5777e056c8.jpg" />
<img alt=""class="photo"src="https://pic.imgdb.cn/item/645e43520d2dde5777e0888f.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e436a0d2dde5777e0b35d.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e43880d2dde5777e0e483.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e43a00d2dde5777e11895.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e43b90d2dde5777e15268.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e43d10d2dde5777e18d08.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e43e70d2dde5777e1c7a1.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e43fe0d2dde5777e202dc.jpg" />
<img alt=""class="photo"src="https://pic.imgdb.cn/item/645e44150d2dde5777e29762.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e44360d2dde5777e35114.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e444c0d2dde5777e3c1f1.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e44600d2dde5777e42442.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/645e44740d2dde5777e47db9.jpg" />
</div>
<div id="fg"></div>
<divstyle="width: 400px;height: 320px;overflow:hidden;margin: 3% 70%;position: absolute;" id="but">
<css-doodleid="mplayer">
:doodle {
@grid: 2 / 300px 60px;
position: absolute;z-index: 40;
color: var(--color);
transform: scale(1);
--prog: 0%; --size: 90px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color:#ffffff; --state: paused;
}
/* 时间信息 : 左 */
@nth(1) {
@place: 25% 80%;
:after { content: var(--ttmsg1); }
}
/* 控制器 */
@nth(2) {
@size: 45px 45px;
@place: 50% 35%;
background:url('https://www.yiyuen.com/e/file/view/600371') no-repeat center/cover;
animation: rot 6s infinite linear var(--state);
}
/* 时间信息 : 右 */
@nth(3) {
@place: 75% 80%;
:after { content: var(--ttmsg2); }
}
/* 进度条 */
@nth(4) {
@place: 50% 80%;
@size: 100% 2px;
background: #aaaaaa;
display: grid;
place-items: center start;
:before {
content: '';
width: var(--prog);
height: 100%;
background: var(--color);
}
}
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<div class="wenzi">我的真心被你出卖</div>
</div>
<canvas id="canv"></canvas>
<span id="fullscreen">全屏观赏</span>
<video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/12/12/V-121205-BED1FEFE.mp4" autoplay loop muted></video>
<audio id="aud" src="https://www.joy127.com/url/105831.mp3" autoplay loop></audio>
</div>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
ctx.drawImage(vid, 0, 0, ww, hh);
if(!vid.paused) {
requestAnimationFrame(loop);
return;
}
}
let mState = () => aud.paused ? ( mplayer.style.setProperty('--state', 'paused'), vid.pause()) : ( mplayer.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
fg.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>fg.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>fg.style.animationPlayState = 'paused');
</script>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
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;};
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
});
mplayer.onclick = (e) => {
if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) aud.paused ? aud.play() : aud.pause();
if(e.offsetY > 46) aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
}
})();
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
《我的真心被你出卖》雨中百合
词：张俊英 曲：赵洋
LRC歌词制作：焱鑫磊
从没想到感情会有背叛
幻想着我们甜蜜的未来
有一天亲眼目睹 我才明白
过去的曾经的不可能再回来
从没想到感情会如此失败
海誓山盟再多也会更改
为什么老天会这样 的安排
让我尝尽了痛苦的等待
我的真心被你轻易出卖
我的感情被你深深伤害
付出再多也换不回这真爱
难道是上辈子欠你的债
我的真心被你轻易出卖
我的眼泪被你无情伤害
负心的人变心变得太快
痴情的爱难道是我活该
从没想到感情会如此失败
海誓山盟再多也会更改
为什么老天会这样 的安排
让我尝尽了痛苦的等待
我的真心被你轻易出卖
我的感情被你深深伤害
付出再多也换不回这真爱
难道是上辈子欠你的债
我的真心被你轻易出卖
我的眼泪被你无情伤害
负心的人变心变得太快
痴情的爱难道是我活该
我的真心被你轻易出卖
我的感情被你深深伤害
付出再多也换不回这真爱
难道是上辈子欠你的债
我的真心被你轻易出卖
我的眼泪被你无情伤害
负心的人变心变得太快
痴情的爱难道是我活该
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};
/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
/*函数 ：处理当前歌词索引 mKey*/
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 time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};
/*格式化时间信息*/
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;
}
/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script>
var image = document.getElementById("testImg"),
button = document.getElementById("but");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '.') {
image.classList.remove('stop');
this.value = '*';
} else {
image.classList.add('stop');
this.value = '.';
}
};
}
</script>
这个是昨天亚伦的新代码制作吧 我手机打不出你那三个字的名字，{:4_189:}
问好，谢谢分享精彩的制作 好漂亮，欣赏！ 本帖最后由 焱鑫磊 于 2023-8-13 17:15 编辑
小辣椒 发表于 2023-7-5 21:46
这个是昨天亚伦的新代码制作吧
小辣椒好眼力，我只会套用老师的代码。以前玩玩儿FLASH，现在很多地方玩儿不了了。只好照搬代码了。 这个是亚伦老师的代码吧，制作真漂亮。给焱鑫磊点赞{:4_187:} 小辣椒 发表于 2023-7-5 21:49
我手机打不出你那三个字的名字，
问好，谢谢分享精彩的制作
问好小辣椒！{:4_187:} 小文 发表于 2023-7-5 21:52
好漂亮，欣赏！
小文好！{:4_204:} 红影 发表于 2023-7-5 22:15
这个是亚伦老师的代码吧，制作真漂亮。给焱鑫磊点赞
亚伦是我多年的老师。我只会套用代码。别见笑哟！{:4_204:} 焱鑫磊 发表于 2023-7-5 22:18
亚伦是我多年的老师。我只会套用代码。别见笑哟！
换上自己喜欢的内容，也是很不错的啊{:4_204:} 做得直好！{:4_187:} 樵歌 发表于 2023-7-6 06:35
做得直好！
让樵歌笑话了，代码是套用的，所以直好。{:4_170:} 焱鑫磊 发表于 2023-7-5 22:15
小辣椒好眼力，我只会套用老师的代码。以前玩玩儿FLASHA，现在很多地方玩儿不了了。只好照搬代码了。
是的，亚伦的代码我每次都会仔细看看，他有许多新的构思进去，套用轻松一点，自己修改花时间的，所以亚伦制作也是辛苦的 焱鑫磊 发表于 2023-7-5 22:15
问好小辣椒！
谢谢焱鑫磊分享精彩的制作{:4_171:}
页:
[1]