没心没肺活着不累
本帖最后由 醉美水芙蓉 于 2022-5-28 13:54 编辑 <br /><br /><div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background-size: 100% 100%;background-image:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/38fa644c852abb184e09b0bae9bdbaa2.png); text-align: center;"><div class="body"style="width: 1000px; height: 600px;background-image:url(http://image.hnol.net/c/2022-03/21/23/20220321230954141-5769293.gif),url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213392999032271.gif);">
<div class="book-wrap">
<div class="page" style="background-image: url(https://img-baofun.zhhainiao.com/fs/3b38c3e2c8744f9ac7d057e135e1d6a2.jpg);"><strong><em><span style="color:#00ff00;">没心没肺活着不累</span></em></strong></div>
<div class="page book-content book-content1" style="background-image: url( https://img-baofun.zhhainiao.com/fs/4a5f116d770d75d2ec29f81b602fab60.jpg)"> </div>
<div class="page book-content book-content2" style="background-image: url( https://img-baofun.zhhainiao.com/fs/90e82ec626488a2db9756c0c12bcf4cc.jpg)"> </div>
<div class="page book-content book-content3" style="background-image: url( https://img-baofun.zhhainiao.com/fs/78e58b717ebb8c08922a2b592f3afe52.jpg)"> </div>
<div class="page book-content book-content4" style="background-image: url( https://img-baofun.zhhainiao.com/fs/86865c3907e620ab93bd2ec71be0b11a.jpg)"> </div>
<div class="page book-content book-content5" style="background-image: url( https://img-baofun.zhhainiao.com/fs/bd065c5ef26d0d1d3f665376fad99d17.jpg)"> </div>
<div class="page book-content book-content6" style="background-image: url( https://wallpaperm.cmcm.com/7f66bf9152c32f79205ca3a77a5af6df.jpg)"> </div>
<div class="page book-content book-content7" style="background-image: url(https://img-baofun.zhhainiao.com/fs/9767b2f7ea2cc8b3ac87c8d8db990f3b.jpg )"> </div>
<div class="page book-content book-content8" style="background-image: url( https://img-baofun.zhhainiao.com/fs/4d0148ebec18b3a06f1d75c9499a8e89.jpg)"> </div>
<div class="page book-content book-content9" style="background-image: url( https://img-baofun.zhhainiao.com/fs/66a5ccde063527a37237cd17875627f5.jpg)"> </div>
</div>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=205298870&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="btn">
<span id="bf"onclick="bf();"style="width: 980px; height: 120px;z-index: 300;position: absolute;top:-70px; left:80px;"></span>
<span id="bf"onclick="rbf();"></span>
</div>
<div class="img_border"><img src="http://chuangshicdn.data.mvbox.cn/album/22/03/08/22030816191436561041.png" id="aplay"style="width: 100%; height: 100%;z-index: 110;" ></div>
<div class="items" >
<divclass="lrc">
<ul id="ullrc">
</ul>
</div></div></div>
</div>
<style type="text/css">
.body {top:0px; left:0px;
width: 1000px;height: 600px;
transform-origin: center;
position: relative;
z-index: 1;}
.perspective {transform-style: preserve-3d;}
.book-wrap {width: 370px;
height: 350px;
position: relative;
left: 480px;
top: 120px;
transform: rotatez(-14deg)rotateX(30deg);
transform-style: preserve-3d;}
.page { width: 100%;
height: 100%;
position: absolute;
border-radius: 6px;
transform-origin: left;display: flex;
justify-content: center;
align-items: center;
font-size: 30px;font-family:华文新魏; font-weight:bold; color: #00ff00;
border: 15px solid #cccccc;
box-shadow:0px 0px 0px 2px #000000, 0px 0px 0px 2px #000000;
background-size:100% 100%;}
.book-contenr {animation: roll 42s0sinfinite;}
.book-content1{animation: roll12s 36sinfinite;}
.book-content2{animation: roll16s 32sinfinite;}
.book-content3{animation: roll20s 28sinfinite;}
.book-content4{animation: roll 24s 24sinfinite;}
.book-content5{animation: roll 28s 20sinfinite;}
.book-content6{animation: roll 32s16sinfinite;}
.book-content7{animation: roll 36s12sinfinite;}
.book-content8{animation: roll 38s8sinfinite;}
.book-content9{animation: roll 40s4sinfinite;}
@keyframes roll {
0%,40%{transform: rotateY(0)}
40%,60%{transform: rotateY(-174deg);}
60%,100% {transform: rotateY(-180deg);}}
</style>
<style type="text/css">
.container{width: 1000px;height: 1px;
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: 960px;
height: 120px;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:0px; left:0px;
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: 70px;
line-height: 70px;
font-family:悟空大字库;
font-size: 0px;
color: #000078;
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;
font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:150px;height:150px;margin:0px ;position: absolute;top:-30px; left:750px;transform: scale(1,0.5);}
.container .img_border #aplay{border:2px solid #000000;border-radius:50%; }
.container .z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{from{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{from{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
.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>
<script >var lrc = `艾丽娅琪琪格 - 没心没肺活着不累 (DJ何鹏版)
作词：陈红卫
作曲：何鹏
OP：深圳市中讯通文化传播有限公司
演唱：艾丽娅琪琪格
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 = 70, lrc_ul_height = 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 = $("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); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("ullrc").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric;};};};}; my_audio.play();</script>
水芙蓉漂亮的制作，都是大美女。{:4_199:} 欣赏 好多漂亮的姑娘，这个也是翻书效果呢，好看{:4_187:} 马黑黑 发表于 2022-5-28 16:05
欣赏
黑黑老师欣赏愉快！ 红影 发表于 2022-5-28 16:09
好多漂亮的姑娘，这个也是翻书效果呢，好看
美中不足，不知道怎么回事，在这个论坛发表中间有条白线？ 醉美水芙蓉 发表于 2022-5-28 16:23
黑黑老师欣赏愉快！
{:4_174:} 加林森 发表于 2022-5-28 18:07
水芙蓉漂亮的制作，都是大美女。
队长 欣赏愉快 醉美水芙蓉 发表于 2022-5-28 18:21
队长 欣赏愉快
嗯嗯。晚上好！{:4_190:} 这技术厉害啊，好看 顾-念 发表于 2022-5-28 20:09
这技术厉害啊，好看
朋友过奖！我是瞎玩！ 醉美水芙蓉 发表于 2022-5-28 20:42
朋友过奖！我是瞎玩！
不用谦虚。我也是瞎玩，以后一起 高手啊，厉害的 绿叶清舟 发表于 2022-5-28 20:49
高手啊，厉害的
我是瞎玩！你那个PS才是真技术！ 醉美水芙蓉 发表于 2022-5-28 20:54
我是瞎玩！你那个PS才是真技术！
PS找到素材都能做出来的了
页:
[1]