亚伦影音工作室 发表于 2022-6-25 14:21

即使再累也要继续DJ – 王馨[让静态图片动起来]

本帖最后由 亚伦影音工作室 于 2022-6-25 14:21 编辑 <br /><br /><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: url(https://img-baofun.zhhainiao.com/fs/29e9e391aa90a76624a9b8940071be9c.jpg)0 0/100%100%; text-align: center;">
<div class='bk'>
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/dfb338741ecad9922a076ea0815c5509.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/405d57d288e5c32080d426e49a11cdc3.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/7cd527e28dc3a49238bbd0c1a4465f06.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/608301c1a8aadb07c70773736f3bf848.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/2d5fca884e9658866a43c6d7954c4cb3.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/8b6c2ce7904eefbfc9082cc74c15de9e.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/6844be91c9e4cf81b09a23dec71e1304.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/8476c0e1ee9f4bf9bf1f8fad864f4994.jpg" alt="" /></div>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=207117785.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
      <div class="btn">
         <span id="bf"onclick="bf();"style="width: 960px; height: 120px;z-index: 410;position: absolute;top:-30px; left:50px;"></span>
      </div>
<div class="img_border" id="aplay"></div>
   <div class="bs" style="z-index: 300;position: absolute;top:0px; left:0px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div></div>
<div id="txtBox" class="bs" style="margin: auto;color: #fff000;font-family:华文隶书;font-size: 25px;position: absolute;left: 10px;top: 20px; width: 960px;text-align:center;"></div>
</div>
<style type="text/css">.bk{z-index: 160;width: 480px;position: absolute;top:100px; left:240px;height: 300px;box-shadow: 0px 0px 0px 1px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;transform:rotate(0deg);background: url(https://img-
baofun.zhhainiao.com/fs/29e9e391aa90a76624a9b8940071be9c.jpg)0 0/100%100%; text-align: center;}
.photo {width: 480px;
height: 300px;
position: absolute;top:0px; left:0px;z-index: 150;
filter:contrast(120%)brightness(80%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 1;clip-path:polygon(0 0, 40% 40%, 50% 86.60254%, 60% 40%, 100% 0, 50% 20%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
9% {
opacity: 1;clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 100%, 100% 0, 50% 0, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
18% {
opacity: 0.4;clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 100%, 100% 0, 50% 0, 0 0);
-webkit-transform:translate(0%,0%)scale(3);}
20% {
opacity: 0;clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 100%, 100% 0, 50% 0, 0 0);
-webkit-transform:translate(0%,0%)scale(3);}
}

img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >

<style type="text/css">
.container{width: 1px;height: 1px;
    margin: 0;position: absolute;top:500px; left:-20px;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;
    margin: 0;}
.container .lrc{
    width: 960px;
    height: 120px;
    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:-30px; left:50px;
    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: 60px;
    line-height: 30px;
font-family:华文隶书;
    font-size: 35px;
    color: #000078;transform: translate(20%,0%);
    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: 35px;
    color: #ff0000;transform: translate(-20%,0%);
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;
    z-index: 130;position: absolute;
   top:-500px;opacity: 0;
    left: 20px;background: url(http://pan.yinhuabbs.cn/view.php/d7dcfcd228faa2aee314ed2e22d35473.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com/fs/29e9e391aa90a76624a9b8940071be9c.jp)0 0/100%100%;
animation: rotating 0.02s linear infinite;}
@keyframes rotating {10% {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(100%);transform: scale(1)rotateZ(0deg);background-position: 0% 0%;}
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);transform: scale(2)rotateZ(0deg);background-position: 0% 0%;}
90% {opacity: 0;filter:hue-rotate(0deg)contrast(100%)brightness(100%);transform: scale(3)rotateZ(0deg);background-position: 0% 0%;}
}
</style>

<style type="text/css">.bs{animation: slider0 0.26s linear infinite ;position: absolute;top:-20px; left:0px;z-index: 1000;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 8px #CD6600) drop-shadow(0px 0px 8px #CD6600)drop-shadow(0px 0px 8px #CD6600)brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 8px #000090)drop-shadow(0px 0px 8px #000090)drop-shadow(0px 0px 8px #000090)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 = 60, lrc_ul_height = 60;
    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="";
                }
            }
      }

</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>
<script language="javascript">
var txtBox = document.getElementById("txtBox");
var idx = 0;
var str = "【亚伦影音工作室】为你打造动听的音乐享受和精美的视觉画面！";

setInterval(function(){
      txtBox.innerHTML = str.substring(0, idx) + "➣";
      idx += 1;
      if(idx > str.length) idx = 0;
}, 350);
</script>


翁奕童苑 发表于 2022-6-25 14:53

欣赏佳作。点赞！

红影 发表于 2022-6-25 16:57

漂亮的图片轮播和动画效果，欣赏亚伦老师好帖{:4_187:}

醉美水芙蓉 发表于 2022-6-25 19:26

页: [1]
查看完整版本: 即使再累也要继续DJ – 王馨[让静态图片动起来]