论坛 › 动画音画 › 《小花猫》造梦机器乐队

焱鑫磊 发表于 2023-3-3 22:46

《小花猫》造梦机器乐队

本帖最后由 焱鑫磊 于 2023-3-16 18:09 编辑 <br /><br /><style type="text/css">
#papa { margin: 70px -280px ; width: 1164px; height: 640px; background: url(https://pic.imgdb.cn/item/6412e67aebf10e5d530a990b.gif)0 0/10%10%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
.lyricDisp{font: bold 2.5em华文隶书, sans-serif; transition:.3s all ease;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:#FF0000;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color:#000080;text-align:center;font-size:2.5em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:12%;bottom:10px;width:100%;height:100px;margin:16px auto position:relative;z-index: 2}
#rdisk{position:absolute;left:12%;bottom: 10px;width:100%;height:100px;z-index: 11}
</style>
<div id="papa"title="焱鑫磊博客">
<div id="testImg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6412e6d1ebf10e5d530c9ef2.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/6412e713ebf10e5d530e3b27.jpg" /><img alt="" class="photo"src="https://pic.imgdb.cn/item/6412e75cebf10e5d53100c51.jpg" /><img alt=""class="photo"src="https://pic.imgdb.cn/item/6412e7a3ebf10e5d5311cc9a.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/6412e7dcebf10e5d5313220f.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/6412e82aebf10e5d53151521.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/6412e898ebf10e5d5317e964.jpg" /><img alt="" class="photo" src="https://pic.imgdb.cn/item/6412e8d8ebf10e5d5319abcb.jpg" />

<div id="mpic"></div>
<div id="mpic1" ></div>

</div>

<div id="rdisk" title="暂停/播放"><ptype="button"value="*" id="testBtn" style="width: 100%; height: 100%;position:absolute;-webkit-background-clip : text;"></p></div>
<div id="LRCShow" >
            <div class="lyricDisp">焱鑫磊博客</div><div class="lyricDisp"></div>
         </div>

</div>
<textarea id="lrc_content" style="visibility: hidden;">
《小花猫》造梦机器乐队
词/曲：Alex（王干）
LRC歌词制作：焱鑫磊
初夏早晨知了起的很早
路边小树小草小狗追着小猫
远远看你站在路边傻笑
呆呆的我小鹿扑通扑通地乱跳
这就是我们童年的符号
无忧无虑牵着小手一起奔跑
走过沙滩吹起贝壳号角
一起建起属于我们的小城堡
成长总是不经意准时来到
请你留下我们小小美好
我想你永远做我的小花猫
乖乖地在我怀里撒娇
喵喵
我想我一定是你的依靠
我不再沉默 不再徘徊 不再胆小
喵喵
秋风吹动你迷人的发梢
踮起脚尖亲吻我幸福的嘴角
迎着海风追着夕阳打闹
此刻我们忘记一切一切的烦恼
这就是我们青春的歌谣
骑着单车带你走过天涯海角
告诉世界你是我的骄傲
携手走进属于我们的小城堡
幸福总是不经意准时来到
请你留下我们大大拥抱
我想你永远做我的小花猫
乖乖地在我怀里撒娇
喵喵
我想我一定是你的依靠
我不再沉默 不再徘徊 不再胆小
喵喵
我们有那么多小小美好
因为我在你身边围绕
喵喵
我想你永远做我的小花猫
没有忧愁 没有悲伤 没有烦恼
我们一起到老
我想你永远做我的小花猫
乖乖地在我怀里撒娇
喵喵
我想我一定是你的依靠
我不再沉默 不再徘徊 不再胆小
喵喵
我们有那么多小小美好
因为我在你身边围绕
喵喵
我想你永远做我的小花猫
没有忧愁 没有悲伤 没有烦恼
我们一起到老

</textarea>

<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lrcVec=new Array();this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=this.showLrcObj.getElementsByTagName('div');this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;that.mObj.play()});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}}}



</script>
<script type="text/javascript">

var opts = {//        下面4个参数是必须的！
                        lrcTxtID:'lrc_content',
                        lrcShowID:"LRCShow",
                        audioURL:"https://www.joy127.com/url/101709.mp3",
                        audioCtrl:'rdisk'
                        };
        new lrcPlayer2(opts);

</script>
<style>
#mpic {
        position: absolute;z-index: 1;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1164px;
        height: 640px;
        animation: rote 100s linear infinite;
        cursor: pointer;background: url('https://pic.imgdb.cn/item/6412e92cebf10e5d531beddb.png')0 0/80% 90%;
        opacity: 1;
}
.stop #mpic {
animation-play-state: paused;
}

@keyframes rote {
        0%{
      background-position: 600% 0;
    }
    100%{
      background-position: 30% 1600%;filter:hue-rotate(360deg)
    }
}

#mpic1 {
        position: absolute;z-index: 1;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1164px;
        height: 640px;
        animation: rotet 60s linear infinite;
        cursor: pointer;background: url('https://pic.imgdb.cn/item/6412e92cebf10e5d531beddb.png')0 0/80% 90%;
        opacity: 1;
}
.stop #mpic1 {
animation-play-state: paused;
}

@keyframes rotet {
       0%{
      background-position: 0% 0%;
    }
    100%{
      background-position: 0% 2600%;filter:hue-rotate(360deg)
    }
}
       

</style>
<style>
.photo {width: 100%;
height: 100%;
position: absolute;z-index: -1;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 48s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round {0% {opacity: 0;filter:hue-rotate(360deg)}

10% {opacity: 1;}
18% {opacity: 0;}
}

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;
}
img:nth-child(1) {
animation-delay: 0s;
}

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


<script>
var image = document.getElementById("testImg"),
    button= document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
</script>

红影 发表于 2023-3-3 23:12

哇，帖子里的小猫咪好萌啊，看得心都柔软了{:4_187:}

焱鑫磊 发表于 2023-3-3 23:13

红影 发表于 2023-3-3 23:12
哇，帖子里的小猫咪好萌啊，看得心都柔软了

老师晚上好！

庶民 发表于 2023-3-4 08:32

制作梦境的好地方。

梦缘 发表于 2023-3-4 10:04

萌萌的猫宝，好有趣啊！{:4_185:}

焱鑫磊 发表于 2023-3-4 10:37

庶民 发表于 2023-3-4 08:32
制作梦境的好地方。

问候老师好！

焱鑫磊 发表于 2023-3-4 10:38

梦缘 发表于 2023-3-4 10:04
萌萌的猫宝，好有趣啊！

问候老师好！

红影 发表于 2023-3-4 17:46

焱鑫磊 发表于 2023-3-3 23:13
老师晚上好！

这个帖子真的太美了{:4_187:}

查看完整版本: 《小花猫》造梦机器乐队