3D特效《爱情十八拍 - 杨美华》
本帖最后由 亚伦影音工作室 于 2022-7-12 14:37 编辑 <br /><br /><style>.container0 {
margin: 50px -250px;
width: 1024px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;
height: 620px;
border: 1px solid;
background: #333 url('https://img-baofun.zhhainiao.com/fs/11ae9b4fe335125d079dce68988e0b24.jpg') no-repeat center/cover; overflow: hidden;
position: relative;
}
.photo {
position: absolute;top:120px; left:200px;
width: 60%;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000;
height: 60%;transform:perspective(00px); background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("");
background-size: 0, cover;
box-sizing: border-box;preserve-3d;
animation: round 32s infinite;
opacity: 0;
}
@keyframes round {
0% {opacity: 1;transform: perspective(700px) rotateY(45deg);}
8% {opacity: 1;transform:perspective(700px) rotateY(-45deg);}
18% {opacity: 0;transform:perspective(700px) rotateY(45deg);}
}
img:nth-child(1) {animation-delay: 28s;}
img:nth-child(2) {animation-delay: 24s;}
img:nth-child(3) {animation-delay: 20s;}
img:nth-child(4) {animation-delay: 16s;}
img:nth-child(5) {animation-delay: 12s;}
img:nth-child(6) { animation-delay: 8s;}
img:nth-child(7) {animation-delay: 4s;}
img:nth-child(8) {animation-delay: 0s;}
</style>
<div class="container0">
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/444d3d0f3c8edd32ceffd83bc1e46d90.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/445a9030fe3ac255b836119b572dd565.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/fedea52c7f796c3eeeb8598d4a09a3e7.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/744d989b89fa0fe7ad59589d0ae9dadd.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/0168993e40c3f609b7f987501aef5eb6.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/e4ec5d2fae4be94e6c1cbd3f464930dd.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/4cb1c91b04a52cd5f01af063601dfb00.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/80cf3f632bed46df15fe82d4f6e591b0.jpg" alt="" />
<div class="container">
<div class="btn">
<span id="bf"onclick="bf();"style="width: 120px; height: 120px;z-index: 550;position: absolute;top:-60px; left:880px;"></span>
<span id="bf"onclick="rbf();"></span>
</div>
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=54872806&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="img_border"><img src="http://pan.yinhuabbs.cn/view.php/caef5d12b92eaa7fad771e288f5cb7c9.png" id="aplay"style="width: 100%; height: 100%;z-index: 550;" ></div>
<div class="items" >
<divclass="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
</div>
<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:-30px;z-index: 550;
}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.container .btn{
display: block;
margin: 0;
}
.container .lrc{
width: 960px;
height: 180px;z-index: 550;
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:-70px; 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: 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:-60px; left:880px;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.5);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2.5);}
}
.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>
<style type="text/css">.items1{ animation: slider1 1s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(80%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);}}
</style>
<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 = 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> 城市夜景中，一个个美人交替上场，真漂亮的制作。欣赏亚伦老师好帖{:4_187:} 欣赏老师的精美音画。
以为没音乐呢，咱这采花小盗，没忍住，摸摸两朵花，不想那花儿会动，然后音乐飘出。。。友友高才，赞一个！ 咱反思中，心虚不已。。。或者，有个友友的帖子有音乐，咱笨笨没找到机关？ 高清，精致！{:5_116:}
页:
[1]