郭玲 - 大哥的女人(DJ何鹏版)
本帖最后由 亚伦影音工作室 于 2022-7-8 14:40 编辑 <br /><br /><style type="text/css">.portfolio-grid {
list-style: none;
padding: 0;
margin: 0;left:-15px;
text-align: center;
width: 1000px;
position: relative;
}
.portfolio-grid li {
display: inline-block;
margin: 0px 0px 0px 0px;
vertical-align: top;
width: 1000PX;
background: linear-gradient(50deg,#ccff00, #228b22, #0000cd, #8a2be2);
}
.portfolio-grid li > a,
.portfolio-grid li > a img {
width: 100%;height: 600PX;
border: none;
outline: none;
display: block;opacity:1;
position: relative;
transition: all 0.3s ease-in-out;
}
.portfolio-grid li > a img:hover {
-webkit-mask-image: radial-gradient(black 40% ,transparent 85%);
z-index: 9;
}
</style>
<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-230px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background-size: 100% 100%;background-image: url(#); text-align: center;">
<div id="portfolio">
<ul class="portfolio-grid">
<li><a class="animated flipInX" href="#"><img alt="img01" src="http://pan.yinhuabbs.cn/view.php/15aebec9cc79df88a93dd1fdea9f3539.jpg" /></a></li>
</ul>
</div>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=206510706&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="btn">
<span id="bf"onclick="bf();"style="width: 120px; height: 120px;z-index: 300;position: absolute;top:-400px; left:40px;"></span>
<span id="bf"onclick="rbf();"></span>
</div>
<div class="items1" >
<div class="img_border"><img src="http://pan.yinhuabbs.cn/view.php/caef5d12b92eaa7fad771e288f5cb7c9.png" id="aplay"style="width: 100%; height: 100%;z-index: 110;" ></div></div>
<div class="items" >
<divclass="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
</div>
<script >var lrc = `郭玲 - 大哥的女人(DJ何鹏版)
词：陈红卫
曲：何鹏
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 = 90;
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 rbf() {
var audio = document.getElementById('MusicPlayer');
var bf=document.getElementById("bf");
audio.currentTime = 0;
audio.play();
bf.innerText="";
}
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="";
}
}
}
</script>
<script type="text/javascript">
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>
<style type="text/css">
.container{width: 0px;height: 0px;
margin: 0;position: absolute;top:500px; left:-0px;z-index: 100;
}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.container .btn{
display: block;z-index: 300;
margin: 0;
}
.container .lrc{
width: 660px;
height: 180px;z-index: 1;
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:-100px; left:400px;
margin: 0 auto;
}
.container .lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.container .lrc #ullrc li{
height: 80px;
line-height: 90px;
font-family:悟空大字库;
font-size: 30px;
color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;
display: block;
width: 100%;
margin: 0 auto;
}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 40px;
color: #ff0000;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:120px;height:120px;margin:0px ;position: absolute;top:-400px; left:80px;z-index: 150;}
.container .img_border #aplay{ }
.container .z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{0% {transform: rotateX(0deg) rotateY(0deg)
rotateZ(0deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-30deg)scale(2.2);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2.2);}
}
.audio{
z-index: 1;
bottom: 0;
opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
opacity: 0;
}
</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style> 这首歌曲很有意思，大哥的女人和女人的大哥，完全不同的活法{:4_173:}
这个鼠标滑过，图片多个滤镜。欣赏亚伦老师好帖{:4_187:} 好听好看好制作 {:4_187:}欣赏亚伦好帖！周末快乐！
{:4_204:}{:4_190:}
页:
[1]