论坛 › 动画音画 › 姐已不再是当年的姐 (DJ御龙版) - 郭芊彤【组合代码请慎模仿】

亚伦影音工作室 发表于 2022-7-8 17:58

姐已不再是当年的姐 (DJ御龙版) - 郭芊彤【组合代码请慎模仿】

本帖最后由 亚伦影音工作室 于 2022-7-8 17:58 编辑 <br /><br /><style>
.papa { left: -250px; width: 1100px; height: 620px; border-radius: 6px; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213462674835656.gif)0 0/40% 100%,url(https://img-baofun.zhhainiao.com/fs/74ae5187f92e2a7500c446935b0728d4.jpg)0 0/100% 100%; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }

.papa::before, .papa::after { position: absolute; content: ''; border-radius: inherit; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,url(https://img-baofun.zhhainiao.com/fs/5c14483b7c97171c1de40c76e4162678.jpg)0 0/100% 100%;width: 100%; height: 100%; transition: all 2s linear;z-index: 10;transform: translate(0%,0%) rotateY(0deg); }


.papa::before {clip-path: polygon(0 100%, 50% 100%, 50% 0, 0 0);}
.papa::after {clip-path: polygon(100% 100%, 50% 100%, 50% 0, 100% 0);transform: translate(0%,-100%) }


.papa:hover::before { transform: translate(-100%,0%) rotate(0deg) scale(1); }
.papa:hover::after { transform: translate(100%,-100%) rotate(0deg) scale(1); }



</style>
<style type="text/css">
#mm img{   width:240px;
                height: 380px;
                position: absolute;
                left:0px;
                    top:0px;
                box-shadow:0px 0px 0px 2px #000000, 0px 0px 0px 8px #cccccc;

                border-radius: 0px;
            }
            #mm img:nth-child(1){
                transform:translateZ(400px);}
            #mm img:nth-child(2){
                transform: rotateY(40deg) translateZ(400px);
            }
            #mm img:nth-child(3){
                transform: rotateY(80deg) translateZ(400px);
            }
            #mm img:nth-child(4){
                transform: rotateY(120deg) translatez(400px);
            }
            #mm img:nth-child(5){
                transform: rotateY(160deg) translatez(400px);
            }
            #mm img:nth-child(6){
                transform: rotateY(200deg) translatez(400px);
            }
            #mm img:nth-child(7){
                transform: rotateY(240deg) translatez(400px);
            }
            #mm img:nth-child(8){
                transform: rotateY(280deg)translatez(400px);
            }
            #mm img:nth-child(9){
                transform: rotateY(320deg) translatez(400px);
            }
            
            
            #mm{
                margin: 120px auto;
                width: 230px;
                height: 380px;
                transform-style: preserve-3d;
                animation-name: animate;transform: translate(0%,0%);
                animation-duration: 60s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                position: relative;
            }
            @keyframes animate{
                from {transform: rotatex(-10deg) rotateY(0deg);}
50% {transform: rotatex(10deg) rotateY(-720deg);}
                to {transform: rotatex(-10deg) rotateY(0deg);}
            }

</style>


<div class="papa"><div id="mm"><img src="https://www.tupianzj.com/uploads/allimg/220307/1-22030G32106.jpg" /> <img src="https://www.tupianzj.com/uploads/allimg/220315/1-220315105619162.JPG" /> <img src="https://www.tupianzj.com/uploads/allimg/202008/9999/5b94a5cdf5.jpg" /> <img src="https://www.tupianzj.com/uploads/allimg/202008/9999/f08dcf902c.jpg" /> <img src="https://www.tupianzj.com/uploads/allimg/202103/9999/cf08ea0b6a.jpg" /> <img src="https://www.tupianzj.com/uploads/allimg/202008/9999/a5fb936f00.jpg" /> <img src="https://www.tupianzj.com/uploads/allimg/202103/9999/1d3de29d4a.jpg" /> <img src="https://www.tupianzj.com/uploads/allimg/202112/9999/08d77daed0.jpg" /> <img src="https://www.tupianzj.com/uploads/allimg/202103/9999/dbd34d4909.jpg" /></div>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=205162338&.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:-60px; left:880px;"></span>
      <span id="bf"onclick="rbf();"></span>
      </div>
<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 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: 100;
}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.container .btn{
    display: block;z-index: 300;
    margin: 0;
}
.container .lrc{
    width: 960px;
    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:-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>
<script >var lrc = `姐已不再是当年的姐 (DJ御龙版) - 郭芊彤
词：穆伊铭
曲：罗智鸿
编曲：DJ 御龙
监制：穆伊铭
音乐总监：郭芊彤
制作人：亚伦
出品人：亚伦
发行：亚伦影音
曾经很追求浪漫的情节
耳听的谎言都当做誓约
以为天可崩以为地可裂
痴一回疯一回轰轰又烈烈
曾经的柔肠打成千千结
眼中流着泪心上滴着血
我想要一生你却留一夜
伤一回痛一回真真又切切
姐已不再是当年的姐
不再像春花迷恋蝴蝶
痴情多一些用心多一些
你才能走进我的世界
姐已不再是当年的姐
不再像秋水空空待月
认真多一些温暖多一些
我才会陪你白头成雪
曾经的柔肠打成千千结
眼中流着泪心上滴着血
我想要一生你却留一夜
伤一回痛一回真真又切切
姐已不再是当年的姐
不再像春花迷恋蝴蝶
痴情多一些用心多一些
你才能走进我的世界
姐已不再是当年的姐
不再像秋水空空待月
认真多一些温暖多一些
我才会陪你白头成雪
姐已不再是当年的姐
不再像春花迷恋蝴蝶
痴情多一些用心多一些
你才能走进我的世界
姐已不再是当年的姐
不再像秋水空空待月
认真多一些温暖多一些
我才会陪你白头成雪
我才会陪你白头成雪`;
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">.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>

红影 发表于 2022-7-8 20:37

鼠标划过，就会变成八扇屏的美女展示。封面上的是一姐吧，转动屏上的应该是当年的姐{:4_173:}

红影 发表于 2022-7-8 20:37

很漂亮的制作，欣赏亚伦老师精美好帖{:4_187:}

马黑黑 发表于 2022-7-8 22:08

来看看姐{:4_170:}

小辣椒 发表于 2022-7-8 23:51

美女的素材运用的比较多{:4_199:}

欣赏精彩的制作

查看完整版本: 姐已不再是当年的姐 (DJ御龙版) - 郭芊彤【组合代码请慎模仿】