对对对
还能这么自在地玩两天，周五周六要忙了。 红影 发表于 2023-3-29 23:01
还能这么自在地玩两天，周五周六要忙了。
工作第一 马黑黑 发表于 2023-3-29 23:23
工作第一
那是肯定的，人在江湖，身不由己。 红影 发表于 2023-3-30 11:55
那是肯定的，人在江湖，身不由己。
身不由己也是由，顺着生活需要来的：工作是生活的意义所在。 马黑黑 发表于 2023-3-30 12:47
身不由己也是由，顺着生活需要来的：工作是生活的意义所在。
明天一早就要出发了，住在外面，有网但却没时间上网了。 本帖最后由 亚伦影音工作室 于 2023-3-30 17:23 编辑
这个音画动感很强，向老师学习！loog用代码打上马赛克更好！瞎指挥一下别介意！ 亚伦影音工作室 发表于 2023-3-30 17:20
这个音画动感很强，向老师学习！loog用代码打上马赛克更好！瞎指挥一下别介意！
好建议。但这里的卷角，与“遗失”有关，它象征着：这个风景被撕掉了…… 红影 发表于 2023-3-30 16:57
明天一早就要出发了，住在外面，有网但却没时间上网了。
一切随缘 马黑黑 发表于 2023-3-30 17:32
好建议。但这里的卷角，与“遗失”有关，它象征着：这个风景被撕掉了……
卷边在我这里一点没有用，看不到！ 亚伦影音工作室 发表于 2023-3-30 17:37
卷边在我这里一点没有用，看不到！
那是浏览器对CSS3的支持度问题，内核太低 马黑黑 发表于 2023-3-30 17:38
那是浏览器对CSS3的支持度问题，内核太低
你在做视频的时候就能去掉水印，不需要这样麻烦了！{:5_106:} 亚伦影音工作室 发表于 2023-3-30 17:51
你在做视频的时候就能去掉水印，不需要这样麻烦了！
实现手段可以有不同的选择
修改
本帖最后由 亚伦影音工作室 于 2023-3-31 14:10 编辑 <br /><br /><style>#papa {
margin: 10px -300px;
width: 1164px;
height: 620px;
background: linear-gradient(132deg, rgba(13, 34, 237, 0.41) 0%,#1a2a6c 33%,#b21f1f 82%,#F20411 100%);
box-shadow: 3px 3px 2px #000;
position: relative;
z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#tp {position: absolute;box-shadow: 0px 0px 0px 1px #000000, 0px 0px 10px 13px #cccccc;
left: 520px;border-radius: 1%;z-index: 2;
top: 18%;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b273937938b1acfa3df3283fd40141c7.jpg') center/cover no-repeat;
width: 550px;transform:perspective(600px) rotate(-1deg)rotateY(-10deg)scale(1);
height: 340px;opacity: 0.7;}
.photo {width: 100%; height: 100%;
position: absolute;
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 {1% {
opacity: 1;clip-path:circle(10% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
4% {
opacity: 1;clip-path:circle(30% at 50% 50%);
-webkit-transform:translate(0%,0%)}
8% {
opacity: 1;clip-path: circle(50% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;clip-path: circle(80% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
18% {
opacity: 0;clip-path: circle(80% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
}
.photo:nth-child(1) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f8b2a6523a38c3c6c61be0ac6501d6e9.jpg)0 0/100% 100%;
animation-delay: 28s;
}
.photo:nth-child(2) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/29c50e716edbe7f5bd4004c1fae3a5cc.jpg)0 0/100% 100%;
animation-delay: 24s;
}
.photo:nth-child(3) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c8eff17a7a0d1132a001fc899d9d51e4.jpg)0 0/100% 100%;
animation-delay: 20s;
}
.photo:nth-child(4) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3d56f2dfc5ee58313cd2c9113ae2beed.jpeg)0 0/100% 100%;
animation-delay: 16s;
}
.photo:nth-child(5) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a8fa482d66a757a54c2abd72ef68243a.jpg)0 0/100% 100%;
animation-delay: 12s;
}
.photo:nth-child(6) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/17f43572bffffec2c3a21152d05598bc.jpg)0 0/100% 100%;
animation-delay: 8s;
}
.photo:nth-child(7) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/148ac3256a463f25a0bc67fc74722d9f.jpg)0 0/100% 100%;
animation-delay: 4s;
}
.photo:nth-child(8) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9ffc373a1dadbf420296df3f08fad75f.jpg)0 0/100% 100%;
animation-delay: 0s;
}
.stop img:nth-child(1) {
animation-play-state: paused;
}
.stop img:nth-child(2){
animation-play-state: paused;
}
.stopimg:nth-child(3){
animation-play-state: paused;
}
.stop img:nth-child(4){
animation-play-state: paused;
}
.stop img:nth-child(5){
animation-play-state: paused;
}
.stop img:nth-child(6){
animation-play-state: paused;
}
.stop img:nth-child(7) {
animation-play-state: paused;
}
.stop img:nth-child(8) {
animation-play-state: paused;
}
#vid { display: none; }
#canv {position: absolute;
display: block;
left: 0%; mix-blend-mode: soft-light;
top: 0%;
border-radius: 0%;
opacity: 1;
animation: opa 0s infinite alternate ;
}
#mplayer {
position: absolute;
left:5%;
bottom: 200px;
width: 40px;
height: 30px;
border: 2px solid #bbbbbb;
border-radius: 10%;
opacity: 0.2;transform:perspective(80px) rotateY(15deg)rotate(-5deg)scale(1);
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #bbbbbb;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left:40%;
border-width: 10px 12px;
border-color: transparent transparent transparent #bbbbbb;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;left:40%;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
</style>
<div id="papa">
<div id="tp"><div id="testImg"><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></div></div>
<canvas id="canv"></canvas>
<divtype="button" id="testBtn"> <div id="mplayer"></div></div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music261198661.mp3" loop autoplay></audio>
<video id="vid" src="https://www.kumeiwp.com/sub/filestores/2023/03/29/77eb63d2a8e740063d49b905d2c9fdb1.mp4" loop autoplay muted></video>
<script>
(function(){
let ctx = canv.getContext('2d');
let ww = canv.width =1164, hh = canv.height =620;
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script >
var image = document.getElementById("testImg"),
button = document.getElementById("testBtn");
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>
<style type="text/css">#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;z-index: 3;
left: 50%;
transform: translate(-50%);
top: 62%;transform:perspective(400px) rotate(3deg)rotateY(-10deg)scale(1);
font:normal 1.8em 华文行楷;
color: #000078;
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%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `一生只爱你一次(DJ 默涵版)
作词：宋樸
作曲：灰色幽默
监制：梦瑶
出品：王婷婷
联合宣发：亚伦影音工作室
出品：亚伦传媒
演唱：梅伊伊
一生我只爱你一次一次爱你一生
你是往后余生的路程
我不要天地为我见证 我只要你感动
我要做你四季的春风
一生我只爱你一次一次爱你一生
你是锁住爱情的牢笼
我的心无时无刻沸腾 爱你有始无终
和你相拥这片红尘中
吞了爱的痴情药 见你那一秒
想你想到睡不着 想把你依靠
心中有把火在烧 烧到天破晓
是你的微笑让我想甩甩不掉
祈愿天荒和地老 天涯和海角
就算窗外风雨飘 有你就静好
向全世界去宣告 心只为你跳
我要陪你在人间幸福到老
一生我只爱你一次一次爱你一生
你是往后余生的路程
我不要天地为我见证 我只要你感动
我要做你四季的春风
一生我只爱你一次一次爱你一生
你是锁住爱情的牢笼
我的心无时无刻沸腾 爱你有始无终
和你相拥这片红尘中
祈愿天荒和地老 天涯和海角
就算窗外风雨飘 有你就静好
向全世界去宣告 心只为你跳
我要陪你在人间幸福到老
一生我只爱你一次一次爱你一生
你是往后余生的路程
我不要天地为我见证 我只要你感动
我要做你四季的春风
一生我只爱你一次一次爱你一生
你是锁住爱情的牢笼
我的心无时无刻沸腾 爱你有始无终
和你相拥这片红尘中
我的心无时无刻沸腾 爱你有始无终
和你相拥这片红尘中
`;
/*变量 ：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); /*获得歌词数组*/
})();
</script>
亚伦影音工作室 发表于 2023-3-30 21:07
#papa {
margin: 10px -300px;
width: 1164px;
漂亮 马黑黑 发表于 2023-3-30 17:33
一切随缘
楼下的音画让论坛图标和一些勋章都被影响了，是代码和论坛冲突的缘故么？ 红影 发表于 2023-3-30 21:38
楼下的音画让论坛图标和一些勋章都被影响了，是代码和论坛冲突的缘故么？
估计是JS有点小问题 马黑黑 发表于 2023-3-30 21:54
估计是JS有点小问题
好像以前也有过，让论坛图标都变了呢。 红影 发表于 2023-3-30 22:51
好像以前也有过，让论坛图标都变了呢。
JS把握不好是有一定麻烦的 马黑黑 发表于 2023-3-27 18:16
中意哪一个有空了做做就好
我试着做了一个，改成全屏视频，发现这样发不就是那种视频播放器吧，还在想要不要发的 小辣椒 发表于 2023-3-31 12:48
我试着做了一个，改成全屏视频，发现这样发不就是那种视频播放器吧，还在想要不要发的
满意就发