变色 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

亚伦影音工作室 发表于 2025-8-6 17:36

变色

本帖最后由亚伦影音工作室于 2025-8-27 14:19 编辑 <br /><br /><style>
#bj {
   position: relative;
   width: 1286px;
   height: 680px;
   margin-left: -300px;
   margin-top: 150px;
   overflow: hidden;
   background:#000;--state: running;
}
.intro {margin: 0px0px;
   width: 100%;
   height:100%;
   position: absolute;
background: url(https://pic.3gbizhi.com/uploadmark/20200908/6522148d24fdcaaaaf82de5d7f0e0d30.webp), linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde);
background-size: cover;
background-blend-mode: hard-light;
animation: hue-rotate 3s linear infinite var(--state);
}
@keyframes hue-rotate {
from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(360deg);
}
}

.containe {
height: 100vh;width: 100%;

position: relative;left:0px;
top:10%;
z-index: 1;
overflow: hidden;
}

.bird {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells.svg);
background-size: auto 100%;
width: 88px;
height: 124px;
will-change: background-position;

animation-name: fly-cycle ;

animation-timing-function: steps(10);

animation-iteration-count: infinite ;
}
.stop .bird{animation-play-state: paused;}
.bird--one {

animation-duration: 1s ;

animation-delay: -0.5s ;
}
.stop .bird--one{animation-play-state: paused;}
.bird--two {

animation-duration: 0.9s ;

animation-delay: -0.75s ;
}
.stop .bird--two{animation-play-state: paused;}
.bird--three {

animation-duration: 1.25s ;

animation-delay: -0.25s;
}
.stop .bird--three{animation-play-state: paused;}
.bird--four {

animation-duration: 1.1s ;

animation-delay: -0.5s ;
}
.stop .bird--four{animation-play-state: paused;}
.bird-containe{
position: absolute;
top: 0%;
left: 0%;

transform: scale(0) translateX(-10vw);
will-change: transform;

animation-name: fly-right-one;

animation-timing-function: linear;

animation-iteration-count: infinite ;
}
.stop .bird-containe{animation-play-state: paused;}
.bird-containe--one {

animation-duration: 15s ;

animation-delay: 0 ;
}
.stop .bird-containe--one{animation-play-state: paused;}
.bird-containe--two {

animation-duration: 16s ;

animation-delay: 1s
}
.stop .bird-containe--two{animation-play-state: paused;}
.bird-containe--three {

animation-duration: 14.6s ;

animation-delay: 9.5s ;
}
.stop .bird-containe--three {animation-play-state: paused;}
.bird-containe--four {

animation-duration: 16s ;

animation-delay: 10.25s ;
}
.stop .bird-containe--four{animation-play-state: paused;}

@keyframes fly-cycle {
100% {
background-position: -900px 0;
}
}

@keyframes fly-right-one {
0% {
transform: scale(0.3) translateX(-10vw);
}
10% {
transform: translateY(2vh) translateX(10vw) scale(0.4);
}
20% {
transform: translateY(0vh) translateX(30vw) scale(0.5);
}
30% {
transform: translateY(4vh) translateX(50vw) scale(0.6);
}
40% {
transform: translateY(2vh) translateX(70vw) scale(0.6);
}
50% {
transform: translateY(0vh) translateX(90vw) scale(0.6);
}
60% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
100% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
}

@keyframes fly-right-two {
0% {
transform: translateY(-2vh) translateX(-10vw) scale(0.5);
}
10% {
transform: translateY(0vh) translateX(10vw) scale(0.4);
}
20% {
transform: translateY(-4vh) translateX(30vw) scale(0.6);
}
30% {
transform: translateY(1vh) translateX(50vw) scale(0.45);
}
40% {
transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
}
50% {
transform: translateY(0vh) translateX(90vw) scale(0.45);
}
51% {
transform: translateY(0vh) translateX(110vw) scale(0.45);
}
100% {
transform: translateY(0vh) translateX(110vw) scale(0.45);
}
}
</style>
<div id="bj">
<div class='intro'></div>
<div class='containe'>
<div id="testImg">
<div class="bird-containe bird-containe--one">
   <div class="bird bird--one"></div>
</div>

<div class="bird-containe bird-containe--two">
   <div class="bird bird--two"></div>
</div>

<div class="bird-containe bird-containe--three">
   <div class="bird bird--three"></div>
</div>

<div class="bird-containe bird-containe--four">
   <div class="bird bird--four"></div>
</div>
</div>
</div>
<div id="testImg1">
<div class="rings">
   <div class="ring anim-zoomIn" style="--delay:06"></div>
   <div class="ring anim-zoomIn" style="--delay:04"></div>
   <div class="ring anim-zoomIn" style="--delay:03"></div>
   <div class="ring anim-zoomIn" style="--delay:02"></div>
   <div class="ring anim-zoomIn" style="--delay:01"></div>
   <div class="ring anim-zoomIn" style="--delay:00"></div>
</div>
</div>

</div>
<audio autoplay id="aud" loop src="https://upfile.mp3.wf/view.php/519c16c5a51082bcbabe0f0e9ee4cfff.mp3"></audio>
<script>

const rings= document.querySelector('.rings');
rings.onclick = () => {aud.paused ? aud.play(): aud.pause();}

mState = () => {bj.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.paused ?(testImg.classList.add('stop'),testImg1.classList.add('stop')) : (testImg.classList.remove('stop'),testImg1.classList.remove('stop')) ;
   };
aud.onplaying = aud.onpause = () => mState();

</script>

<style>
.rings {top:50px; left: 350px;
z-index: 40;
   --border-width: 2px;
   --border-style: solid;
   --animation-duration: 4s;
   --animation-count: infinite;
   --animation-direction: normal;
   --animation-fill-mode: both;
   position: absolute;
   width: 400px;
   aspect-ratio: 1/1;
}

.rings > .ring {
   position: absolute;
   top: 50%;
   left: 50%;
   aspect-ratio: 1/1;
   border-width: var(--border-width);
   border-style: var(--border-style);
   border-radius: 50%;
   transform-origin: center;
   -webkit-animation-duration: var(--animation-duration);
            animation-duration: var(--animation-duration);
   -webkit-animation-delay: calc(0.4s * var(--delay));
            animation-delay: calc(0.4s * var(--delay));
   -webkit-animation-iteration-count: var(--animation-count);
            animation-iteration-count: var(--animation-count);
   -webkit-animation-direction: var(--animation-direction);
            animation-direction: var(--animation-direction);
   -webkit-animation-fill-mode: var(--animation-fill-mode);
            animation-fill-mode: var(--animation-fill-mode);
   filter: opacity(0);
   will-change: transform;
   overflow: hidden;
}
.stop .rings > .ring{animation-play-state: paused;}
.rings > .ring:nth-child(even) {
   border-color: #9adcff;
}

.rings > .ring:nth-child(odd) {
   border-color: #ffb2a6;
}

.rings > .ring:first-child {
   width: 50px;
   margin: -25px 0 0 -25px;
}

.rings > .ring:nth-child(2) {
   width: 64px;
   margin: -32px 0 0 -32px;
}

.rings > .ring:nth-child(3) {
   width: 78px;
   margin: -39px 0 0 -39px;
}

.rings > .ring:nth-child(4) {
   width: 92px;
   margin: -46px 0 0 -46px;
}

.rings > .ring:nth-child(5) {
   width: 104px;
   margin: -52px 0 0 -52px;
}

.rings > .ring:nth-child(6) {
   width: 118px;
   margin: -59px 0 0 -59px;
}

.anim-zoomIn {
   -webkit-animation-name: zoomIn;
            animation-name: zoomIn;
}

@keyframes zoomIn {
   0% {
            transform: perspective(200px) translatez(0);
            filter: opacity(0);
   }
   60% {
            filter: opacity(100%);
   }
   100% {
            transform: perspective(200px) translatez(200px);
   }
}

.anim-zoomInPan {

            animation-name: zoomInPan;
}

@keyframes zoomInPan {
   0% {
            transform: perspective(200px) translatex(0) translatey(0) translatez(0);
            filter: opacity(0);
   }
   25% {
            transform: perspective(200px) translatex(-50px) translatey(50px)
                     translatez(50px);
   }
   60% {
            filter: opacity(100%);
   }
   100% {
            transform: perspective(200px) translatex(10px) translatey(0) translatez(200px);
   }
}
</style>
https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells.svg

朵拉发表于 2025-8-6 19:18

绚丽好看，欣赏学习咯{:4_204:}

红影发表于 2025-8-6 20:27

好奇特的新效果，非常美妙。
欣赏亚伦老师好帖{:4_199:}

杨帆发表于 2025-8-6 21:23

效果惊艳，谢谢亚伦老师精彩分享{:4_190:}

朵拉发表于 2025-8-10 20:53

效果漂亮，有空学习下{:4_178:}

页: [1]

花潮论坛's Archiver

变色