精品创意音画《偏偏你是我最爱的人》沧桑小杰
本帖最后由 亚伦影音工作室 于 2026-9-9 11:41 编辑 <br /><br /><style>#papa{ position: relative; width: 1286px; height: 740px; margin-left: -320px; margin-top: 0; overflow: hidden; background:#800000; --state: paused;}
#vid1 {z-index:1;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0;
object-fit: cover;
}
.vid {width: 100%; height:100%;z-index:2;
position: absolute;
top:0%; left:0%;
object-fit: cover;
pointer-events: none; transform:rotate(180deg);
opacity: 0;-webkit-mask: url(https://pic1.imgdb.cn/i/034BIFIZsDBxOUaZeNNc11.png)no-repeat center/960px 580px;
animation: round 100s linear infinite var(--state);}
@keyframes round {0% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(90deg)scale(1)translate(0%,0%);
opacity:1
}
5% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%)rotateY(0deg)rotateX(0deg);
opacity:1}
6% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%)rotateY(-10deg)rotateX(-60deg);
opacity:1}
7% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%)rotateY(10deg)rotateX(60deg);
opacity:1}
8% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(1)translate(0%,0%)rotateY(-10deg)rotateX(-60deg);
opacity:1}
9% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}
18% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-90deg)scale(1)translate(0%,0%);
opacity:0}
}
.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {animation-delay: 0s;}
.lrc {z-index:10;
position: absolute;
width: 100%;
height: 60px; /* 只显示一行歌词高度 */
top: 87%;
left: 50%;
transform: translate(-50%, -50%); /* 容器整体居中 */
overflow: hidden;
text-align: center;
}
.lrc #ul {filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
width: 100%;
padding: 0;
list-style: none;
transition: 0.1s all ease;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.lrc #ul li {
font-size: 46px;
color: #000;
font-family:"华文隶书", sans-serif;
font-weight:500;
transition: 0.1s all ease;
list-style-type: none;
text-align: center;
padding: 0 10px;
height: 60px;
line-height: 60px;
cursor: pointer;
white-space: nowrap; /* 防止歌词换行 */
}
.lrc #ul li span {
margin: 0 8px;
transform-origin: center center; /* x轴和y轴均以中心为原点 */
transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动函数让动画更自然 */
display: inline-block; /* 确保transform-origin生效 */
}
.lrc #ul li span.active {
font-family: "华文隶书", "Microsoft YaHei", sans-serif;
font-weight: 500;
font-size: 48px;
color: red;
transform: scale(1.2)rotate(-360deg); /* 缩放效果 */
}
#btnplay { top:10%; left:10%;z-index: 20;
display: block;position: absolute; transform: rotateY(180deg);
width: 250px; height: 250px;mix-blend-mode: difference;
background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/3250px 250px;
animation: heart-burst steps(13) 2s infinite var(--state);
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -3250px 0;}
}
#fullscreen{border-radius: 4px;position: relative;
color:#eee;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 80;
font-size: 35px;font-family: "华文隶书", "Microsoft YaHei", sans-serif;
border: none;
cursor: pointer;margin: 8px 5px;left: 78%;
}
</style>
<div id="papa">
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/68916076b03a6f63c3ff2423b77c8001_preview.mp4" autoplay loop muted></video>
<div >
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/888e053f86c27c9c4797fe046129e943_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/119794fa6c842ab769528d19899daf72_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b8f1f4d53711a46e5a28c2f2dc74da77_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/23180b490ae23f70410ec0f4bd50e695_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b8a52ce9b054ca7de110f8ea887f032d_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c2395ea74be55fcf6cb013a2b8e5505b_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0b07551dfdda52f451bfd4bf30adbea5_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6d9e9273dad200f7c9d99684715ee37e_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4e3c9caa54b306cc26de6ae2f42bf834_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0b07551dfdda52f451bfd4bf30adbea5_preview.mp4" loop muted autoplay=""></video>
</div>
<button id="fullscreen">全屏观赏</button>
<div class="lrc">
<ul id="ul"></ul>
</div>
<divid="btnplay" ></div>
</div>
<audio id="audio" src="https://www.panurl.cn/view.php/c6f0a966a2b46051c4cf175107bec231.m4a" loop autoplay ></audio>
<script>
let lrc = `偏偏你是我最爱的人-沧桑小杰
词：黑白井子
曲：叨叨
编曲：深一
OP：萤火同尘
【未经著作权人许可不得翻唱翻录或使用】
为何最爱的人总是伤人最痛
为何最深的情总落的最空
我们明明说好了要生死与共
结果却是无奈地各奔西东
为何相爱的人却没办法结婚
为何偏偏你是我最爱的人
我早应该明白我们没有可能
为何我却无法关上心门
可我们
做朋友心不甘做情人又太难
做夫妻又和你相遇太晚
明知没有名分偏要苦苦纠缠
爱到最后只剩遗憾
可我们
舍不得去忘记又没资格相伴
难道我们注定要被拆散
多想名正言顺给你一世温暖
可你已与我无关
为何最爱的人总是伤人最痛
为何最深的情总落的最空
我们明明说好了要生死与共
结果却是无奈地各奔西东
为何相爱的人却没办法结婚
为何偏偏你是我最爱的人
我早应该明白我们没有可能
为何我却无法关上心门
可我们
做朋友心不甘做情人又太难
做夫妻又和你相遇太晚
明知没有名分偏要苦苦纠缠
爱到最后只剩遗憾
可我们
舍不得去忘记又没资格相伴
难道我们注定要被拆散
多想名正言顺给你一世温暖
可你已与我无关
`;
let lrcArr = lrc.split('\n');
let result = [];
var audio = document.querySelector("#audio"),
ul = document.querySelector("#ul"),
container = document.querySelector(".lrc");
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
if (lrcData.length < 2) continue;
var lrcTime = lrcData.substring(1);
var words = lrcData.trim().split('');
let lineWords = [];
let startTime = parseTime(lrcTime);
let wordDuration = (i < lrcArr.length - 1 && lrcArr.includes('[')) ?
(parseTime(lrcArr.split(']').substring(1)) - startTime) / words.length : 0.5;
words.forEach((word, index) => {
lineWords.push({ time: startTime + index * wordDuration, text: word });
});
result.push(lineWords);
}
function randomColor(){
const colors = ['#880000','#ffbb33','#00C851','#000078','#aa66cc','#ff8800','#ff33cc'];
return colors;
}
function parseTime(lrcTime) {
let lrcTimeArr = lrcTime.split(":");
return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
}
function getIndex() {
let time = audio.currentTime;
for (let i = 0; i < result.length; i++) {
if (result.time > time) return i - 1;
}
return result.length - 1;
}
var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1264a5=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x70\x61\x6E","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x74\x65\x78\x74","\x74\x69\x6D\x65","\x64\x61\x74\x61\x73\x65\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5404x2=document]();for(let _0x5404x3=0;_0x5404x3< result];_0x5404x3++){let _0x5404x4=document](__Ox1264a5);result]((_0x5404x5)=>{let _0x5404x6=document](__Ox1264a5);_0x5404x6]= _0x5404x5];_0x5404x6]]= _0x5404x5];_0x5404x4](_0x5404x6)});_0x5404x4](__Ox1264a5,()=>{return audio]= result]});_0x5404x2](_0x5404x4)};ul](_0x5404x2)}createElements();;;(function(_0x5404x7,_0x5404x8,_0x5404x9,_0x5404xa,_0x5404xb,_0x5404xc){_0x5404xc= __Ox1264a5;_0x5404xa= function(_0x5404xd){if( typeof alert!== _0x5404xc){alert(_0x5404xd)};if( typeof console!== _0x5404xc){console](_0x5404xd)}};_0x5404x9= function(_0x5404xe,_0x5404x7){return _0x5404xe+ _0x5404x7};_0x5404xb= _0x5404x9(__Ox1264a5,_0x5404x9(_0x5404x9(__Ox1264a5,__Ox1264a5),__Ox1264a5));try{_0x5404x7= __encode;if(!( typeof _0x5404x7!== _0x5404xc&& _0x5404x7=== _0x5404x9(__Ox1264a5,__Ox1264a5))){_0x5404xa(_0x5404xb)}}catch(e){_0x5404xa(_0x5404xb)}})({})
createElements();
let containerHeight = container.clientHeight;
let liHeight = 60;
let minOffset = 0;
let maxOffset = ul.clientHeight - containerHeight;
const visibleLines = 1;
let prevIndex = -1;
function setOffset() {
let index = getIndex();
if (index === -1) index = 0;
let offset = Math.max(0, Math.min((index - Math.floor(visibleLines / 2)) * liHeight, maxOffset));
ul.style.transform = `translateY(-${offset}px)`;
if (prevIndex !== -1) {
let prevLi = ul.children;
if (prevLi) {
prevLi.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
prevLi.classList.remove('active');
}
}
let currentLi = ul.children;
if (currentLi) currentLi.classList.add('active');
let currentTime = audio.currentTime;
let currentLine = result;
if (currentLine) {
currentLine.forEach((wordObj, wordIndex) => {
let span = currentLi.children;
span.style.color = ul.style.color = randomColor();
if (currentTime >= wordObj.time &&
(wordIndex === currentLine.length - 1 || currentTime < currentLine?.time)) {
span.classList.add('active');
} else {
span.classList.remove('active');
}
});
const currentLyric = currentLine.map(wordObj => wordObj.text).join('');
if (!currentLyric) return;
let charIndex = 0;
for (let j = 0; j < currentLine.length; j++) {
if (currentLine.time <= currentTime) {
charIndex = j + 1;
}
}
}
prevIndex = index;
}
audio.addEventListener("timeupdate", setOffset);
(function() {
const vids = document.querySelectorAll('.vid');
var mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
vids.forEach(vid => audio.paused ? (vid.pause(),vid1.pause()): (vid.play(),vid1.play()) );
};
audio.onplaying = audio.onpause = () => mState();
btnplay.onclick = () => audio.paused ? audio.play(): audio.pause();
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
祝亚伦七夕快乐。 制作漂亮，旋转的歌词也好美。
欣赏亚伦老师好帖{:4_199:} 很漂亮的音画制作！ 七夕快乐！{:4_171:} 好听好看，谢谢分享，祝亚伦老师七夕快乐{:4_190:} 这个好像和刚才我看见那个效果一样的？ 欣赏老师的新作，点赞！
页:
[1]