论坛 › 动画音画 › 鼠标划过切换css动画<<不曾想我也怕夜晚的黑>>

亚伦影音工作室 发表于 2022-11-12 11:40

鼠标划过切换css动画<<不曾想我也怕夜晚的黑>>

本帖最后由 亚伦影音工作室 于 2022-11-12 11:40 编辑 <br /><br /><style type="text/css">
        #outblk        {margin: auto;
        width: 1200px;
        height: 620px;
        background: rgba(0,0,0,.45) url('https://www.kumeiwp.com/sub/filestores/2022/11/11/9077470093713b9826260b8ded041980.gif') no-repeat center/cover;
        margin-top: 90px;
        margin-left: -300px;
        box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000;
        display: grid;
        place-items: center;
        overflow: hidden;
        position: relative;
        z-index: 1;
        }
#photo {
        width: 1200px;
        height: 620px;
        position: absolute;
        border: 0px solid #000000;
        top: 0px;
        left: 0px; opacity: 0;
        transition: 1s;}


#outblk:hover #photo {
        opacity: 1;transition:1s;}


#photo img {
        width: 60%;
        height: 60%;
        position: absolute;
        opacity: 0;
box-shadow: 0px 0px 0px 1px #ffffff, 0px 0px 0px 5px #880000;
top:110px; left:220px;filter:contrast(140%)brightness(100%);
        animation-name: round;
        animation-duration: 48s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
}

@keyframes round{0% {opacity: 1;transform:perspective(900px) rotateY(-180deg)scale(1);}
5% {opacity: 1;filter:hue-rotate(360deg);transform:perspective(900px)rotateY(0deg)scale(1)}
9% {opacity: 1;transform:perspective(400px) rotateX(-180deg)scale(1);}
13% {opacity: 1;transform:perspective(600px) rotateX(90deg)scale(1);}
18% {opacity: 0;transform:perspective(600px) rotateX(90deg)scale(1);}
}

#photo img:nth-child(8) {
        animation-delay: 42s;
}

#photo img:nth-child(7) {
        animation-delay: 36s;
}

#photo img:nth-child(6) {
        animation-delay: 30s;
}

#photo img:nth-child(5) {
        animation-delay: 24s;
}

#photo img:nth-child(4) {
        animation-delay: 18s;
}

#photo img:nth-child(3) {
        animation-delay: 12s;
}

#photo img:nth-child(2) {
        animation-delay: 6s;
}

#photo img:nth-child(1) {
        animation-delay: 0s;
}
.stop #photo img:nth-child(1) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(2) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(3) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(4) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(5) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(6) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(7) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(8) {
        animation-play-state: paused;
}

.stop{
            animation-play-state:paused;
               }
            .mm{
                margin: 200px auto;
                width: 340px;
                height: 214px;
                transform-style: preserve-3d;
                animation-name: animate;
                animation-duration: 50s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
opacity: 1;transition: 0.5s;transform: rotateX(0deg)scale(1);
                position: relative;
            }

#outblk:hover .mm{
        opacity: 0;transition: 0.5s;transform: rotateX(0deg)scale(0);}


.mm img{width:340px;
                height: 214px;
                position: absolute;
                left:0px;
                    top:0px;z-index: 10;
                box-shadow:0px 0px 0px 2px #000000, 0px 0px 0px 6px #88aaaa;
filter:contrast(130%)brightness(100%);
                border-radius: 0px;
            }


             .mm img:nth-child(1){
                transform:rotateX(0deg) translateZ(262px);}
            .mm img:nth-child(2){
                transform:rotateX(45deg) translateZ(262px);}
            .mm img:nth-child(3){
                transform: rotateX(90deg) translatez(262px);}
            .mm img:nth-child(4){
               transform: rotateX(135deg) translatez(262px);
            }
            .mm img:nth-child(5){
               transform: rotateX(180deg) translatez(262px);
            }
            .mm img:nth-child(6){
               transform: rotateX(225deg) translatez(262px);
            }
            .mm img:nth-child(7){
                transform: rotateX(270deg) translatez(262px);
            }
            .mm img:nth-child(8){
                transform: rotateX(315deg) translatez(262px);
            }
            



         .mm img:nth-child(1):stop{
               }
            .mm img:nth-child(2):stop{
               
            }
            .mm img:nth-child(3):stop{
               
            }
            .mm img:nth-child(4):stop{
               
            }
            .mm img:nth-child(5):stop{
               
            }
            .mm img:nth-child(6):stop{
            }
            .mm img:nth-child(7):stop{
               
            }
            .mm img:nth-child(8):stop{
               
            }
         
          @keyframes animate{
                0% {
                  transform:rotateX(-10deg) rotateZ(65deg) rotateX(-360deg);
                }
                25% {
                  transform:rotateX(10deg) rotateZ(-65deg) rotateX(0deg);
                }
50% {
                  transform:rotateX(10deg) rotateZ(65deg) rotateX(360deg);
                }
75% {
                  transform:rotateX(-10deg) rotateZ(65deg) rotateX(0deg);
                }
100% {
                  transform:rotateX(-10deg) rotateZ(65deg) rotateX(-360deg);
                }

            }
.lrcShow{
        position: absolute;
        top: 520px;
        font-family: 华文行楷;
        font-size: 45px;
text-align: center;
    display: block;
        white-space: nowrap;
        color: #000080;
        filter: drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lrcShow::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);}
@keyframes bgMove1{from{width:0%;}to{width:100%;filter:hue-rotate(360deg)}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}

.mCtrl{border:2px solid #000000;border-radius:50%;display:inline-block;width:90px;height:90px;position:absolute;bottom:30px;left:30px;transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);background: url('http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);background-position:0 0;background-size:100% 100%;}
.z360z{animation:rotating 10s linear infinite;}@keyframes rotating{0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}
       
</style>
<div id="outblk"><div id="testImg">
<divid="photo"><img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909481026411020.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909495450901604.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909521828974999.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909534928702875.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909563082132258.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909581244929944.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092910055041975926.jpg" /><img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909481026411020.jpg" /> </div></div>

<div   id="testImg" class="mm"><img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909481026411020.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909495450901604.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909521828974999.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909534928702875.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909563082132258.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909581244929944.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092910055041975926.jpg" /><img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909481026411020.jpg" /> </div>


<divclass="lrcShow"style="margin-left:12px;"></div>
        <button id="testBtn"value="." style="position: absolute;width: 1200px; height: 620px;-webkit-background-clip : text;-webkit-text-fill-color:transparent;z-index: 1;border-radius:0%;"><divid="mDisk" class='mCtrl'></div></button>

</div>
<script type="text/javascript">
var lrcPlayerY = function() {
    return this.init.apply(this, arguments)
};
lrcPlayerY.prototype = {
    constructor: lrcPlayerY,
    init: function(opts) {
      lyricTxt = opts.lrcTxt.replace(/(^\s*)|(\s*$)/g, '');
      this.showLrcObj = document.getElementById(opts.lrcShowID);
      this.audioCtrl = document.getElementById(opts.audioCtrl);
      this.lrcShowObj = document.getElementsByClassName('lrcShow');
      this.lrcVec = this.handleLrc(lyricTxt);
      this.genPlayer(opts.audioURL)
    },
    handleLrc: function(lyricTxt) {
      var parts = lyricTxt.replace(/(^\s*)|(\s*$)/g, "").split(/\r|\n|\r\n/);
      var lrcs = new Array();
      for (let index = 0; index < parts.length; index++) {
            let chkTime = parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);
            if (chkTime) {
                tIdx = parts.lastIndexOf(']');
                if (tIdx > 0) lrcTxt = parts.substr(tIdx + 1);
                for (m = 0; m < chkTime.length; m++) {
                  ta = chkTime.substr(1).replace(']', '').split(/:/);
                  _t = ( + ta) * 60 + ( + ta);
                  if (lrcs.length == 0 && _t != 0) {
                        lrcs.push({
                            seconds: 0,
                            words: '<span style="font-size:50%;">© cesholl</span>'
                        })
                  }
                  lrcs.push({
                        seconds: _t,
                        words: lrcTxt
                  })
                }
            }
      }
      return lrcs.sort(function(a, b) {
            return (a.seconds - b.seconds)
      })
    },
    showLrc: function(durTime) {
      this.lrcShowObj.innerHTML = this.lrcShowObj.dataset.lrc = this.lrcVec.words;
      this.lrcShowObj.style.setProperty('--aniName', 'bgMove' + (this.idx % 2));
      this.lrcShowObj.style.setProperty('--durTime', durTime + 'ms');
      this.lrcShowObj.style.setProperty('--aniPlayState', 'running');
      this.idx++
    },
    genPlayer: function(mUrl) {
      this.mObj = document.createElement("audio");
      this.mObj.loop = false;
      this.mObj.muted = false;
      this.mObj.autoplay = true;
      this.mObj.src = mUrl;
      this.lrcShowObj.appendChild(this.mObj);
      var that = this;
      var turn = 0;
      this.idx = 0;
      this.mObj.addEventListener('ended',
      function() {
            that.idx = 0;
            that.audioCtrl.classList.remove('z360z');
            this.play()
      });
      this.mObj.addEventListener('play',
      function() {
            that.audioCtrl.classList.add('z360z');
            that.lrcShowObj.style.setProperty('--aniPlayState', 'running')
      });
      this.mObj.addEventListener('pause',
      function() {
            if (that.idx == 1 && this.currentTime < 1) {
                that.mObj.play();
                return false
            }
            that.audioCtrl.classList.remove('z360z');
            that.lrcShowObj.style.setProperty('--aniPlayState', 'paused')
      });
      this.mObj.addEventListener('error',
      function() {
            console.log("audio wrong, remove play start event");
            that.lrcShowObj.style.display = 'none';
            that.lrcShowObj.removeChild(this)
      });
      this.mObj.addEventListener('timeupdate',
      function() {
            if (that.idx < that.lrcVec.length) {
                if (this.currentTime >= that.lrcVec.seconds) {
                  if (that.idx < (that.lrcVec.length - 1)) {
                        that.showLrc((that.lrcVec.seconds - that.lrcVec.seconds) * 1000 - 100)
                  } else {
                        that.showLrc((this.duration - that.lrcVec.seconds) * 1000 - 100)
                  }
                }
            }
      });
      this.audioCtrl.addEventListener('click',
      function() {
            if (that.mObj.paused) {
                that.mObj.play()
            } else {
                that.mObj.pause()
            }
      })
    }
}
var image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
button.onclick = function() {
      if (this.value == '.') {
            image.classList.add('stop');
            this.value = '*';
}

else {
image.classList.remove('stop');
            this.value = '.';
}
    };
}

</script>

<script type="text/javascript">
var lrc =` 不曾想我也怕夜晚的黑
作词：于洋
作曲：于洋
编曲：周啊想
伴唱：zing studio
混音：宋马超
出品人：亚伦
OP：亚伦影音工作室
S代码设计：亚伦影音工作室
寂静的夜里一个人不想睡
没你在身边总是夜不能寐
只想要和你在一起永相随
不知何时还能紧紧依偎
喜欢你身上淡淡的香烟味
还想听听你叫我一声宝贝
没你的日子该怎样去面对
一个人品尝这相思的滋味
不曾想我也怕夜晚的黑
孤独寂寞心痛后谁来安慰
是谁在买醉啊是谁在流泪
想你的夜里我哭的好狼狈
不曾想我也怕夜晚的黑
可知为你留下了多少眼泪
是谁在伤悲啊是谁在心碎
任凭思念把我苦苦包围
喜欢你身上淡淡的香烟味
还想听听你叫我一声宝贝
没你的日子该怎样去面对
一个人品尝这相思的滋味
不曾想我也怕夜晚的黑
孤独寂寞心痛后谁来安慰
是谁在买醉啊是谁在流泪
想你的夜里我哭的好狼狈
不曾想我也怕夜晚的黑
可知为你留下了多少眼泪
是谁在伤悲啊是谁在心碎
任凭思念把我苦苦包围
不曾想我也怕夜晚的黑
孤独寂寞心痛后谁来安慰
是谁在买醉啊是谁在流泪
想你的夜里我哭的好狼狈
不曾想我也怕夜晚的黑
可知为你留下了多少眼泪
是谁在伤悲啊是谁在心碎
任凭思念把我苦苦包围
任凭思念把我苦苦包围
`;
var opts = {
        lrcTxt:lrc,
        //lrcShowID:'sLRC',
        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里
        audioURL:'https://www.qqmc.com/up/kwlink.php?id=248958977&.mp3'
};
new lrcPlayerY(opts);
</script>

樵歌 发表于 2022-11-12 12:43

担心这个妹纸会不会转晕。{:4_189:}

樵歌 发表于 2022-11-12 12:44

制作得太精彩了！{:4_178:}

相约爱晚亭 发表于 2022-11-12 14:32

欣赏音画佳作！

红影 发表于 2022-11-12 17:25

转环能自动变化角度的，好看。鼠标切换的图图倒不如这个转环好看呢{:4_173:}欣赏亚伦老师好帖{:4_187:}

查看完整版本: 鼠标划过切换css动画<<不曾想我也怕夜晚的黑>>