开屏看音画
本帖最后由 亚伦影音工作室 于 2025-7-20 15:01 编辑 <br /><br /><style>#bj {position: relative;
width: 1086px;
height:600px;
margin: 10px 0 20px calc(50% - 640px);
overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
background:url(https://pic1.imgdb.cn/item/6829abbe58cb8da5c8fb092c.gif) no-repeat center/100% 100%;
}
.zm{list-style: none;left: 70%;width:280px;height:100px;top:80%; position:absolute;z-index: 4;overflow:hidden;}
#e {list-style: none;width: 100%;height:100%;margin: 0px 0px;text-align: center;padding: 50px 0px;position: relative; font: normal 1.2em/0em 华文行楷;color:#fff;}
#tz { margin: 0px 0px;width: 100%;
height:100%;background: url(https://pic1.imgdb.cn/item/683a8ce658cb8da5c81e81d3.jpg) no-repeat center/cover;overflow: hidden; z-index: 1; position:absolute; }
#tz > canvas { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; }
.lrc{ position: absolute;top:6%; left:0px;
width: 80%;
height: 82%;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
z-index: 1;
overflow: hidden;
display: block;
margin: 20px -150px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 50px;
line-height: 50px;
font-family:悟空大字库;
font-size: 20px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
color: #ccc;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
display: block;
width: 100%;
margin: 0 auto;
}
/*动态歌词样式*/
.lrc #ullrcli.active{
font-size: 30px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
font-weight: normal;
filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(120deg,#0eaf6d,#ff6ac6 25%,#147b96 50%,#e6d205 55%,#2cc4e0 60%,#8b2ce0 80%,#ff6384 95%,#08dfb4);animation: flowCss 6s infinite linear;
-webkit-background-size: 200% 100%;}
@keyframes flowCss {
0% {background-position: 0 0;}
100% {background-position: -500% 0;}
}
#ullrc:hover {-webkit-animation: flowCss 4s infinite linear;}
#but{margin: 0% 0% ;width: 100%; height:100%; position: absolute; cursor: pointer;z-index: 2; }
#enopg{ position: absolute;width: 100%; height:100%; background:url(https://img1.oldkids.cn/upload/2021/01/31/photo_20210131141403162.jpg) no-repeat center/cover;
clip-path: polygon(0 0, 50% 0, 50% 50%, 50% 50%, 0 50%);
transition: 2s;transform: translate(0%, 0%);
}
#cndpt{position: absolute; width: 100%; height:100%; background:url(https://img1.oldkids.cn/upload/2021/01/31/photo_20210131141403162.jpg) no-repeat center/cover;clip-path: polygon(100% 100%, 50% 100%, 50% 50%, 50% 50%, 100% 50%);
transform: translate(0%, 0%);transition: 2s;
}
#zuo{ position: absolute;width: 100%; height:100%; background:url(https://img1.oldkids.cn/upload/2021/01/31/photo_20210131141403162.jpg) no-repeat center/cover;
transition: 2s;transform: translate(0%, 0%);clip-path: polygon(100% 0, 50% 0, 50% 50%, 50% 50%, 100% 50%);
}
#you{ position: absolute;width: 100%; height:100%;background:url(https://img1.oldkids.cn/upload/2021/01/31/photo_20210131141403162.jpg) no-repeat center/cover;
transition: 2s;transform: translate(0%, 0%);clip-path: polygon(0 100%, 50% 100%, 50% 50%, 50% 50%, 0 50%);
}
#fullscreen {border-radius: 4px;position: absolute;background:#0000 ;
color:#fff;box-shadow:0px 0px 0px 1px #fff;z-index: 20;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 90%;top: 3%;
}
</style>
<div id="bj" >
<divclass="zm" >
<divid="e" > 点击画面[开启/关闭]欣赏模式</div>
</div>
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
<div id="tz"><div class="lrc" >
<ul id="ullrc">
</ul>
</div></div>
<div id="but" title="点击画面开/关">
<div id="cndpt"></div>
<div id="zuo"></div>
<div id="you"></div>
<div id="enopg"></div>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/9d/c4/4c/dfca122a12e0d323f3050432b171bc9c/audio.mp3"loop></audio>
<script >
but.onclick = () => aud.paused ? (aud.play(),enopg.style.transform= 'translate(-100%, -100%)',cndpt.style.transform= 'translate(100%, 100%)',zuo.style.transform= 'translate(100%, -100%)',you.style.transform= ' translate(-100%, 100%)') : (aud.pause(),enopg.style.transform= 'translate(0%, 0%)',cndpt.style.transform= 'translate(0%, 0%)',zuo.style.transform= 'translate(0%, 0%)',you.style.transform= 'translate(0%, 0%)');
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
bj.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
</script >
<script type="module">
import { THREE, scene, camera, renderer, clock, LZ } from 'https://638183.freep.cn/638183/web/ku/spriteparticle.js';
const config = {
sprite: {
number: 200,
scale: 0.3,
pic: 'https://pic1.imgdb.cn/item/6722130ed29ded1a8c52391c.png',
rotation:
},
mesh: {
pic: 'https://pic1.imgdb.cn/item/684ec37e58cb8da5c84d6b5e.png',
color: 0xfff078,
transparent: true,
position: ,
rotate: ,
rotation:
}
};
LZ(tz, config);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
cube.rotateX(Math.PI / 4);
cube.position.set();
scene.add(cube);
</script>
<script >
var lrc = `心如刀割
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：羡然文化
你已经走远了 我如此的难过
就让眼泪流在你走后那一刻
如果你离开我能让你快乐
那么还有什么理由挽留呢
心如刀割
爱过我以后 你曾后悔过
离开我以后 你是否也难过
吻过我以后 幸福着你的快乐
夕阳落下后 我们不再手牵手
爱过你以后 我快乐足够
离开你以后 却更不自由
我不能左右 爱情的衣袖
忘也忘不掉 黄昏吻你的时候
你已经不用说 我已经都懂了
就让眼泪流在你走后那一刻
为什么丢下我 不管我的死活
往后的日子我又该怎么活
你已经走远了 我如此的难过
就让眼泪流在你走后那一刻
如果你离开我 能让你快乐
那么还有什么理由挽留呢
心如刀割
爱过你以后 我快乐足够
离开你以后 却更不自由
我不能左右 爱情的衣袖
忘也忘不掉 黄昏吻你的时候
你已经不用说 我已经都懂了
就让眼泪流在你走后那一刻
为什么丢下我 不管我的死活
往后的日子我又该怎么活
你已经走远了 我如此的难过
就让眼泪流在你走后那一刻
如果你离开我 能让你快乐
那么还有什么理由挽留呢
心如刀割
你已经不用说 我已经都懂了
就让眼泪流在你走后那一刻
为什么丢下我 不管我的死活
往后的日子我又该怎么活
你已经走远了 我如此的难过
就让眼泪流在你走后那一刻
如果你离开我 能让你快乐
那么还有什么理由挽留呢
心如刀割音画
创意:亚伦`;
function $(id) {
return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 50, lrc_ul_height = 250;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
</script> 奇妙的构思，漂亮的特效，谢谢亚伦老师经典分享{:4_190:} 欣赏老师的精美音画{:4_187:} 制作很奇特，不过这样的音画需要在标题等地方做说明呢，否则不会想到表层图片下面藏着音画{:4_173:} 粒子球的播放器按钮也很漂亮，欣赏亚伦老师好帖{:4_199:}
页:
[1]