html5
本帖最后由 亚伦影音工作室 于 2022-9-23 23:26 编辑 <br /><br /><style type="text/css">.wall{width: 1024px;height: 600px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;z-index: 1;
}
div#background{
width: 1024px;height: 600px;
background: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d386798031aea2db88aea1629093d931.jpg")0 0/100% 100%;
position: absolute;
top: 0px;
left: 0px;
animation: c 10s linear infinite;
}
.stop div#background {
animation-play-state: paused;
}
div#midground{width: 1024px;height: 600px;
z-index: 1;opacity: 1;
animation: cc 0.1s linear infinite;
}
.stop div#midground {
animation-play-state: paused;
}
div#foreground{width: 1024px;height: 600px;
background: url("http://www.100sucai.com/online/4234/images/stars.png")0 0/90% 90%;
z-index: 2;opacity: 1;
animation: ee 80s linear infinite;
}
.stop div#foreground{
animation-play-state: paused;
}
div#top{width: 1024px;height: 600px;
background: url("http://www.100sucai.com/online/4234/images/stars.png")0 0/90% 90%;
z-index: 4;opacity: 1;
animation: da 50s linear infinite;
}
.stop div#top{
animation-play-state: paused;
}
div#cp{width: 250px;height: 250px;
border:2px solid #ffffff; -webkit-mask: radial-gradient(transparent 10px,red 0); border-radius: 50%; cursor: pointer;220px;background:url(http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b5865e4ba0dcc23b2b803c88b0cae329.jpg)0px 0px/160%100%;
z-index: 4; margin: 200px 100px;
animation: pp 10s linear infinite;
}
.stop div#cp{
animation-play-state: paused;
}
@keyframes c {
0%{opacity: 0;}
50%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes ee {
0%{
background-position: 0 0%;
}
100%{
background-position: 600% 0;filter:hue-rotate(60deg)contrast(140%)brightness(140%);
}
}
@keyframes cc{0%{opacity: 0.5;
background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(45, 5, 246, 0.11) 25%,#292DB9 84%);filter:hue-rotate(360deg)
}
50%{opacity: 0.5;background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(45, 5, 246, 0.11) 25%,#0A9300 84%);filter:hue-rotate(60deg)
}
100%{
opacity: 0.5;background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(45, 5, 246, 0.11) 25%,#B92929 84%);filter:hue-rotate(0deg)
}
}
@keyframes da {
0%{
background-position: 200% 0;filter:hue-rotate(0deg)contrast(180%)brightness(340%);
}
100%{
background-position: 0 600%;filter:hue-rotate(0deg)contrast(180%)brightness(240%);
}
}
@keyframes pp {0%{
background-position: 0% 0%;filter:hue-rotate(360deg);transform:rotate(0deg)scale(1);
}
100%{
background-position: 0% 0;filter:hue-rotate(0deg);transform: rotate(360deg)scale(1);
}
}
</style>
<div style="z-index: 127;width: 1024px; height: 600px; margin-top:30px; margin-left:-210px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a707dda3d76a1fde9a376e34d44dface.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000);text-align: center;">
<div class="HT"><div class="wall" id="testImg">
<div class="wall" id="background"> </div>
<div class="wall" id="midground"> </div>
<div class="wall" id="foreground"> </div>
<div class="wall" id="top"> </div>
<div class="wall" id="cp"> </div>
</div>
</div>
<audio autoplay=""id="MusicPlayer"src="https://www.qqmc.com/mp3/music235528208.mp3" loop="" ></audio>
<div class="btn">
<div id="testImg" onclick="bf()">
<inputtype="button" id="testBtn" value="暂停"style="width: 90px; height: 40px;border-radius: 0%;color: #ffffff;font-size:20px;font-weight:bold;border:2px solid #ffffff;-webkit-background-clip : text;overflow: hidden;"></input ></div></div>
<div class="img_border"id="aplay"style="width: 100%; height: 100%;position: absolute;top:0px; left:0px;z-index: 250;filter:hue-rotate(160deg)">
<div class="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
</div></div>
<style type="text/css">
.HT{
width: 1px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.btn{
display: block;z-index: 300;
margin: 0px 0px;position: absolute;top:540px; left:20px;
}
.lrc{
width: 980px;
height: 140px;
overflow: hidden;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);
display: block;position: absolute;top:500px; left:60px;z-index: 30;
margin: 0 auto;
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 80px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;transform: translate(0%,0%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;
display: block;
width: 100%;
margin: 0 auto;
}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 45px;
color: #ff0000;transform: translate(0%,0%);
font-weight: bold;
}
/*歌词动画*/
.img_border{ position: absolute;top:0px; left:0px;z-index: 250;display: block;}
.img_border#aplay{ }
.z360z{animation:rotating 3s linear infinite;}
@keyframes rotating{0%{transform:rotateY(-180deg) rotatex(40deg) ;
filter:hue-rotate(0deg)contrast(240%)brightness(120%);}
50%{transform:rotateY(-20deg) rotatex(10deg);
filter:hue-rotate(360deg)contrast(240%)brightness(200%);}
100%{transform:rotateY(-20deg) rotatex(10deg);
filter:hue-rotate(0deg)contrast(140%)brightness(140%);}
}
</style>
<script>var lrc =`人生没有回头路-田娥
词：徐晓岚
曲：李勇军
编曲：姜凯升（姜山）
制作人：亚伦
出品人：亚伦
Op：亚伦影音工作室
谁能看清我心里有多苦
谁在乎明天我身在何处
这一条路究竟有多残酷
有太多无奈有太多无助
自己选的路就不要怕苦
现在退出也没有回头路
如果不能哭就假装幸福
任凭这世界无情的摆布
我从不怕孤独从不认输
哪怕错得离谱万劫不复
如果人生路是一场赌注
那就做一个勇敢的赌徒
我从不怕孤独从不认输
默默承受着寒风刺痛骨
从不怕吃苦从不怕辜负
如果感觉累了就放下包袱
自己选的路就不要怕苦
现在退出也没有回头路
如果不能哭就假装幸福
任凭这世界无情的摆布
我从不怕孤独从不认输
哪怕错得离谱万劫不复
如果人生路是一场赌注
那就做一个勇敢的赌徒
我从不怕孤独从不认输
默默承受着寒风刺痛骨
从不怕吃苦从不怕辜负
如果感觉累了就放下包袱`;
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 = 80, lrc_ul_height = 70;
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 = $("MusicPlayer").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
function bf() {
var audio = document.getElementById('MusicPlayer');
var bf=document.getElementById("bf");
if (audio !== null) {
if (audio.paused) {
audio.play(); //audio.play();
bf.innerText="";
} else {
audio.pause();
bf.innerText="";
}
}
}
var image = document.getElementById("testImg"),
button = document.getElementById("testBtn");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '暂停') {
image.classList.add('stop');
this.value = '播放';
} else {
image.classList.remove('stop');
this.value = '暂停';
}
};
}
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>
欣赏亚伦大作 鼓掌、点赞!
制作漂亮。赞！{:4_199:}
页:
[1]