亚伦影音工作室 发表于 2025-8-3 20:53

彩色背景[点击二楼猫头控制，但一只眼失控]

本帖最后由 亚伦影音工作室 于 2025-8-3 21:23 编辑 <br /><br /><style>
.intro {margin: 10px-300px;
      width: 1286px;
      height: 720px;
      position: relative;
background: url(https://pic1.imgdb.cn/item/6824a1fc58cb8da5c8f1b5a2.jpg), linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde);
background-size: cover;
background-blend-mode: hard-light;
animation: hue-rotate 3s linear infinite;
}
@keyframes hue-rotate {
from {
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}
</style>
<audio id="aud" src="https://upfile.mp3.wf/view.php/b07968dd73b73be5f3dfa3476b4eea4d.mp3" autoplay ></audio>
<div class='intro'></div>

亚伦影音工作室 发表于 2025-8-3 21:00

本帖最后由 亚伦影音工作室 于 2025-8-4 07:07 编辑 <br /><br /><style>
@keyframes an-pupils {
    from {
      left: 60px;
    }
    to {
      left: 0px;
    }
}

@keyframes an-ears {
    from {
       top:0;
    }
    to {
       top:25px;
    }
}



#cat {position: relative;
      width: 480px;
      margin:20px auto;
}


#head {
      width: 400px;
      height: 370px;
      background-color: #171717;
      border-radius: 50%;
      margin: auto;
}

#ears {
height: 65px;
position: relative;
left: 35px;
animation-name: an-ears;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

.ear{
      width: 0;
      height: 0;
      border-left: 90px solid transparent;
      border-right: 90px solid transparent;
      border-bottom: 160px solid #171717;
      font-size: 0;
      line-height: 0;
      float: left;
      margin-right: 60px;
      -ms-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
      
}


.ear:first-child {
      -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}

#eyes {
      clear: both;
      width: 350px;
      position: relative;
      top: 25px;
      left: 53px;
}

.eye {
      width: 120px;
      height: 120px;
      background-color: #FFFFFF;
      border-radius: 50%;
      float: left;
      
}

.eye:first-child {
      margin-right: 50px;
}

.pupil {
      position: relative;
      top:40px;
      background-color: #000000;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      animation-name: an-pupils;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;

}

.pupil_ref {
      background-color: #FFFFFF;
      border-radius: 45%;
      width: 30px;
      height: 30px;
      position: relative;
      top: 40px;
      left: 10px;

}

#nose {
      width: 45px;
      height: 30px;
      border-radius: 50%;
      background-color: #FFFFFF;
      position: relative;
      top: 160px;
      left: 170px;
}

#baffi_sx {
position: relative;
left: -100px;
top: 85px;
-ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}

#baffi_dx {
position: relative;
left: 223px;
top: 96px;
-ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.baffo{
width:260px;
height:5px;
border:solid 3px #000;
border-color:#000 transparent transparent transparent;
border-radius: 60%/30px 30px 0 0;

}
</style>
<div id="cat">

                <div id="ears">

                              <div class="ear"></div>
                              <div class="ear"></div>

                </div>

                <div id="head">

                        <div id="eyes">

                              <div class="eye">
                                        <div class="pupil">
                                                <div class="pupil_ref"></div>
                                        </div>
                              </div>
                              <div class="eye">
                                        <div class="pupil">
                                                <div class="pupil_ref"></div>
                                        </div>
                              </div>

                        </div>

                        <div id="nose"></div>
                        <div id="baffi_dx">
                                        <div class="baffo"></div>
                                        <div class="baffo"></div>
                                        <div class="baffo"></div>
                        </div>

                        <div id="baffi_sx">
                                        <div class="baffo"></div>
                                        <div class="baffo"></div>
                                        <div class="baffo"></div>
                        </div>
               

                </div>

      </div>
<script>
const intro= document.querySelector('.intro');
const pupil= document.querySelector('.pupil');
const pupilm= document.querySelector('.pupil_ref');
cat.onclick = () => {aud.paused ? (aud.play()) : (aud.pause());}
mState = () => {
          aud.paused ?(ears.style.animationPlayState = 'paused',pupil.style.animationPlayState = 'paused',pupilm.style.animationPlayState = 'paused',intro.style.animationPlayState = 'paused') : (ears.style.animationPlayState = '',pupil.style.animationPlayState = '',intro.style.animationPlayState = '',pupilm.style.animationPlayState = '') ;
      };
aud.onplaying = aud.onpause = () => mState();
</script>

红影 发表于 2025-8-3 22:08

这个好奇妙，点二楼的猫头，可以控制一楼的帖子歌曲呢。
真奇妙。给亚伦老师点赞{:4_199:}

红影 发表于 2025-8-3 22:09

有意思，点击猫头的时候，猫儿的另一只眼睛还是动的呢{:4_173:}

杨帆 发表于 2025-8-4 00:43

灵动的猫咪，谢谢亚伦老师精彩分享{:4_190:}

夕阳黄昏 发表于 2025-8-4 13:22

本帖最后由 夕阳黄昏 于 2025-8-4 13:26 编辑 <br /><br />借用代码仿一帖{:5_106:} 八仙过海

<style>
.Intro {margin: 100pxauto 50px calc(50% - 724px);
      width: 1286px;
      height: 720px;
      position: relative;
background: url(https://pic.rmb.bdstatic.com/bjh/240429/news/cc3642e31bfa3b4f9c2cfe8665784302182.jpeg);
background-size: cover;
background-blend-mode: hard-light;
--aniState:paused;
animation: hueRotate 10s linear alternate infinite var(--aniState);
}
@keyframes hueRotate {
from { opacity:0.7;
   
}
to {
   opacity:0.3;
}
}
@keyframes anPupils {
    from {
      left: 60px;
    }
    to {
      left: 0px;
    }
}

@keyframes anEars {
    from {
       top:0;
    }
    to {
       top:25px;
    }
}



#Cat {position: relative;
      width: 480px;
      margin:20px auto;
                cursor:pointer;
}


#Head {
      width: 400px;
      height: 370px;
      background-color: #171717;
      border-radius: 50%;
      margin: auto;
}

#Ears {
height: 65px;
position: relative;
left: 35px;
animation-name: anEars;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
        animation-play-state:var(--aniState);
}

.Ear{
      width: 0;
      height: 0;
      border-left: 90px solid transparent;
      border-right: 90px solid transparent;
      border-bottom: 160px solid #171717;
      font-size: 0;
      line-height: 0;
      float: left;
      margin-right: 60px;
      -ms-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
      
}


.Ear:first-child {
      -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}

#Eyes {
      clear: both;
      width: 350px;
      position: relative;
      top: 25px;
      left: 53px;
}

.Eye {
      width: 120px;
      height: 120px;
      background-color: #FFFFFF;
      border-radius: 50%;
      float: left;
      
}

.Eye:first-child {
      margin-right: 50px;
}

.Pupil {
      position: relative;
      top:40px;
      background-color: #000000;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      animation-name: anPupils;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
        animation-play-state:var(--aniState);
}

.pupilRef {
      background-color: #FFFFFF;
      border-radius: 45%;
      width: 30px;
      height: 30px;
      position: relative;
      top: 40px;
      left: 10px;

}

#Nose {
      width: 45px;
      height: 30px;
      border-radius: 50%;
      background-color: #FFFFFF;
      position: relative;
      top: 160px;
      left: 170px;
}

#baffiSx {
position: relative;
left: -100px;
top: 85px;
-ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}

#baffiDx {
position: relative;
left: 223px;
top: 96px;
-ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.Baffo{
width:260px;
height:5px;
border:solid 3px #000;
border-color:#000 transparent transparent transparent;
border-radius: 60%/30px 30px 0 0;

}
</style>
<audio id="mSong" src="https://cccimg.com/view.php/2f79be4f42cc565f79b783b1ecaad46b.mp3" autoplay loop></audio>
<div class='Intro'>
<div id="Cat" style="position:absolute;left:-150px;bottom:-150px;transform:scale(0.3);">
    <div id="Ears">
      <div class="Ear"></div>
      <div class="Ear"></div>
    </div>
    <div id="Head">
      <div id="Eyes">
      <div class="Eye">
          <div class="Pupil">
            <div class="pupilRef"></div>
          </div>
      </div>
      <div class="Eye">
          <div class="Pupil">
            <div class="pupilRef"></div>
          </div>
      </div>
      </div>
      <div id="Nose"></div>
      <div id="baffiDx">
      <div class="Baffo"></div>
      <div class="Baffo"></div>
      <div class="Baffo"></div>
      </div>
      <div id="baffiSx">
      <div class="Baffo"></div>
      <div class="Baffo"></div>
      <div class="Baffo"></div>
      </div>
    </div>
</div>
</div>

<script>
const Intro= document.querySelector('.Intro');
//const pupil= document.querySelector('.pupil');
//const pupilm= document.querySelector('.pupil_ref');
Cat.onclick = () => {mSong.paused ? (mSong.play()) : (mSong.pause());}
mState = () => {
          mSong.paused ?(Intro.style.setProperty('--aniState', 'paused')) : (Intro.style.setProperty('--aniState', 'running')) ;
      };
mSong.onplaying = mSong.onpause = () => mState();
mSong.play().catch(_ = () => runState());

</script>
页: [1]
查看完整版本: 彩色背景[点击二楼猫头控制，但一只眼失控]