变色音画《你是我最美的邂逅》精美首屏字幕
本帖最后由 亚伦影音工作室 于 2023-3-9 16:15 编辑 <br /><br /><style>#papa{margin: 10px -300px ; width: 1164px; height: 640px;background: lightgreen url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f8c26f36f0e7def3294fae69643ba486.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#mplayer {position: absolute;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 10px 4px;display: grid;place-items: center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--bgColor: linear-gradient(to right, var(--prog) 0%, var(--prog) 0%, var(--track) 0%, var(--track));--ww: 260px;--color: hsla(100,10%,80%,.95);--track: hsla(90, 100%, 95%, .65);--prog: hsl(0,50%,50%);}
#btnplay{--state: paused;z-index: 40;
position: absolute;top:-20%; left:40%;
width: 40px;
height: 40px;
cursor: pointer;background:url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)0px 0px/100% 100%;border-radius:0%;
animation: spin 10s infinite linear;animation-play-state: var(--state);
}
@keyframes spin {0%{transform: rotate(-360deg);filter:hue-rotate(360deg)contrast(120%)brightness(300%)}
100%{transform: rotate(0deg);}
}
#prog {grid-area: prog;-webkit-appearance: none;width: var(--ww); outline: none;background: none;position: relative;}
#prog::-webkit-slider-thumb {-webkit-appearance: none;position: relative;background: var(--prog);top: calc(50% - 10px);cursor: pointer;z-index: 888;}
#prog::-webkit-slider-runnable-track { height: 2px; border-radius: 6px; background: var(--bgColor); }
#prog::-moz-range-track { height: 2px; border-radius: 10px; background: var(--bgColor); }
#cur { grid-area: cur; color: var(--color); }
#dur { grid-area: dur; color: var(--color); }
#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(0deg, #FFF000,#FFF000));position: absolute;font: normal 55px 华文隶书;color:#FF0000;white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 0px #000000);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-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>
<style>
#photo {width: 100%;
height: 100%;
position: absolute;z-index: -2;
border:0px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;
}
@keyframes round{2% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
8% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0deg)scale(0.8)translate(10%,-10%);
opacity:1
}
10% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1
}
12% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0)scale(.8)translate(10%,-10%);
opacity:1
}
22% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
}
#photo:nth-child(1) {
animation-delay: 84s;
}
#photo:nth-child(2) {
animation-delay: 78s;
}
#photo:nth-child(3) {
animation-delay: 72s;
}
#photo:nth-child(4) {
animation-delay: 66s;
}
#photo:nth-child(5) {
animation-delay: 60s;
}
#photo:nth-child(6) {
animation-delay: 54s;
}
#photo:nth-child(7) {
animation-delay: 48s;
}
#photo:nth-child(8) {
animation-delay: 42s;
}
#photo:nth-child(9) {
animation-delay: 36s;
}
#photo:nth-child(10) {
animation-delay: 30s;
}
#photo:nth-child(11) {
animation-delay: 24s;
}
#photo:nth-child(12) {
animation-delay: 18s;
}
#photo:nth-child(13) {
animation-delay: 12s;
}
#photo:nth-child(14) {
animation-delay: 6s;
}
#photo:nth-child(15) {
animation-delay: 0s;
}
.stop #photo:nth-child(1) {
animation-play-state: paused;
}
.stop #photo:nth-child(2){
animation-play-state: paused;
}
.stop#photo:nth-child(3){
animation-play-state: paused;
}
.stop #photo:nth-child(4){
animation-play-state: paused;
}
.stop #photo:nth-child(5){
animation-play-state: paused;
}
.stop #photo:nth-child(6){
animation-play-state: paused;
}
.stop #photo:nth-child(7) {
animation-play-state: paused;
}
.stop #photo:nth-child(8) {
animation-play-state: paused;
}
.stop #photo:nth-child(9) {
animation-play-state: paused;
}
.stop #photo:nth-child(10) {
animation-play-state: paused;
}
.stop #photo:nth-child(11) {
animation-play-state: paused;
}
.stop #photo:nth-child(12) {
animation-play-state: paused;
}
.stop #photo:nth-child(13) {
animation-play-state: paused;
}
.stop #photo:nth-child(14) {
animation-play-state: paused;
}
.stop #photo:nth-child(15) {
animation-play-state: paused;
}
</style>
<div id="papa">
<div id="testImg" ><div id="items" >
<img alt="" id="photo" src="https://365.tf/disk/tf/1676637814.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676611859.jpg" />
<img alt="" id="photo"src="https://365.tf/disk/tf/1676550717.jpg" />
<img alt=""id="photo"src="https://365.tf/disk/tf/1676555245.jpg" />
<img alt="" id="photo"src="https://365.tf/disk/tf/1676605567.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676571860.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676556713.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676549416.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676449988.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676439398.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676290487.jpg" />
<img alt=""id="photo"src="https://365.tf/disk/tf/1676341203.jpg" />
<img alt=""id="photo"src="https://365.tf/disk/tf/1676364179.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676320722.jpg" />
<img alt="" id="photo" src="https://365.tf/disk/tf/1676280389.jpg" />
</div> </div>
<div id="rotate-words">
<div>你是我最美的邂逅<br />
<span>演唱 龙江辉</span></div>
<div>作词：中国强强<br />
<span>作曲：中国强强</span></div>
<div>编曲：姜山<br />
<span>录音：嘴炮娱乐</span></div>
<div>出品：亚伦影音工作室<br />
<span>Produced by: Aaron Studios</span></div>
<div>LRC编辑：醉美水芙蓉<br />
<span>整理：亚伦</span></div>
<div>代码设计：亚伦<br />
<span>出品时间：2023.3</span></div>
</div>
<div id="lrc" data-lrc="亚伦影音工作中">亚伦影音工作中</div>
<div id="mplayer"><span id="cur">00:00</span><span id="dur">00:00</span><divid="btn"> <span id="btnplay"></span></div><input type="range" id="prog" step="0.1" max="100" value="0" /></div>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=263563429" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, mDrag = false;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onmousedown = () =>mDrag =true;prog.onmouseout = () => mDrag = false;prog.onchange = () => { aud.currentTime = aud.duration * prog.value / 100; mDrag = false; };prog.onmousemove = () => prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);if(mDrag===false) prog.value = aud.currentTime / aud.duration * 100;for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;}};mkPlayer.HCPlayer = playCode;})(this);
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
let averAdd = 1, offset = 0;
let geci = `你是我最美的邂逅-龙江辉
作词：中国强强
作曲：中国强强
编曲：姜山
录音：嘴炮娱乐
混音：阿健
LRC编辑：醉美水芙蓉
爱你的路不好走
走过了就不会回头
喜欢你是我的自由
却注定和你难牵手
心里想着念你的愁
爱上你不需要理由
即使有难过和祈求
我不怕头破血流
你是我最美的邂逅
我的爱只为你停留
风风雨雨为爱坚守
盼望一天你能回眸
你是我一生的等候
我的痴情别无所求
不奢望能天长地久
看你一眼心已足够
心里想着念你的愁
爱上你不需要理由
即使有难过和祈求
我不怕头破血流
你是我最美的邂逅
我的爱只为你停留
风风雨雨为爱坚守
盼望一天你能回眸
你是我一生的等候
我的痴情别无所求
不奢望能天长地久
看你一眼心已足够
你是我最美的邂逅
我的爱只为你停留
风风雨雨为爱坚守
盼望一天你能回眸
你是我一生的等候
我的痴情别无所求
不奢望能天长地久
看你一眼心已足够
不奢望能天长地久
看你一眼心已足够
谢谢欣赏！`;
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;};
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));}
HCPlayer({
lrcAr: getLrcAr(geci),
lrc_css: '--bg: linear-gradient(#FFF000,#FFF000); top: 82%;',
player_css: '--ww: 240px; right: 40%; bottom: 2%;',
btn_txt: '\❋',
});
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 2px solid snow; bottom: 10px; left: 20px;',
});
})();
var image = document.getElementById("testImg"),
button = document.getElementById("btn");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '.') {
image.classList.remove('stop');
this.value = '*';
} else {
image.classList.add('stop');
this.value = '.';
}
};
}
items.style.animationPlayState = audr.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>items.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>items.style.animationPlayState = 'paused');
</script>
<style type="text/css">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
max-width:800px;
left:0%;
margin:auto;
padding:20% 0;
font-size:3.5em;filter:drop-shadow(#000000 1px 1px 1px);
text-transform:uppercase;
color:#ff0000;
font-family: '华文隶书', sans-serif;
}
#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#fff000;
text-transform:lowercase;
opacity:0.8;
font-family: '华文隶书', sans-serif;
}
#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 36s linear 2 0s;
}
@keyframes rotate-word {0% {
opacity: 0;
transform: translateY(-300%);
}
8% {
opacity: 1;
transform: translateY(0%);
}
17% {
opacity: 1;
transform: translateY(0%);
}
19% {
opacity: 0;
transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#rotate-words div:nth-child(2) { animation-delay: 6s}
#rotate-words div:nth-child(3) { animation-delay: 12s}
#rotate-words div:nth-child(4) { animation-delay: 18s}
#rotate-words div:nth-child(5) { animation-delay: 24s}
#rotate-words div:nth-child(6) { animation-delay: 30s}
</style>
<style type="text/css">#items {width: 100%;height: 100%;top:0px; left:0px;position: absolute; animation: slider 3s linear infinite ;}
.stop #items{animation-play-state: paused;}
@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%); } 100% { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 81, 241, 0.91) 86%);} }
</style>
背景画面好美，轮播图片也很漂亮。欣赏亚伦老师好帖{:4_187:} 欣赏老师新作！ 制作的真专业，美。 漂亮的变色音画，好美的图画，欣赏问好！{:4_185:} 欣赏亚伦的精彩制作{:4_187:} 小辣椒发现你们几个代码共享，素材共享，音乐也是共享
这样都很难分出谁做的了 难怪我给你发的站内信息你都没有回的{:4_173:} 小辣椒 发表于 2023-3-4 11:50
小辣椒发现你们几个代码共享，素材共享，音乐也是共享
这样都很难分出谁做的了 难怪我给你发的站内信息 ...
素材来自网络，用的是同一个网站，音乐歌词图方便用了他人的。代码属本人研发，别人用不算啥！ {:4_199:}{:4_199:}
页:
[1]