|
|

楼主 |
发表于 2023-4-8 08:09
|
显示全部楼层
原始代码
- <style>
- #papa {
- --state: paused;
- margin: 30px auto;
- width: 1024px;
- height: 640px;
- border: 2px solid tan;
- border-image: linear-gradient(35deg,tan,purple,cyan,orange,red) 4;
- background: #3C3A50 url('https://638183.freep.cn/638183/t23/webp1/leap.webp') center/cover no-repeat;
- box-shadow: 3px 8px 20px rgba(0,0,0,.6);
- overflow: hidden;
- display: grid;
- place-items: center;
- position: relative;
- animation: hue 10s infinite alternate var(--state);
- }
- .circle {
- position: absolute;
- width: 400px;
- height: 400px;
- border-radius: 50%;
- border: 2px solid var(--bdcolor);
- cursor: pointer;
- }
- @keyframes rotZ {
- 0% { transform: perspective(2000px) translateZ(-1000px) rotateX(var(--degX)) rotateY(var(--degY)) rotateZ(0deg); }
- 50% { transform: perspective(2000px) translateZ(10px) rotateX(calc(var(--degX) + 180deg)) rotateY(calc(var(--degY) + 180deg)) rotateZ(0deg); }
- 100%{ transform: perspective(2000px) translateZ(-1000px) rotateX(calc(var(--degX) + 360deg)) rotateY(calc(var(--degY) + 360deg)) rotateZ(360deg); }
- }
- @keyframes hue {
- 0% { filter: hue-rotate(0deg); }
- 100% { filter: hue-rotate(360deg); }
- }
- </style>
- <div id="papa"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1992056183" loop="loop" autoplay="autoplay"></audio>
- <script>
- let total = 60, spans = [];
- let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- Array.from({length: total}).forEach( (item) => {
- let sp = document.createElement('span');
- sp.className = 'circle';
- let aX = Math.random() * 360, aY = Math.random() * 360, ww = Math.random() * 600 + 200, hh = Math.random() * 400 + 200;
- sp.style.cssText += `
- --bdcolor: #${Math.random().toString(16).substr(-6)};
- --degX: ${aX}deg;
- --degY: ${aY}deg;
- width: ${ww}px;
- height: ${ww}px;
- transform: perspective(2000px) rotateY(${aY}deg) rotateX(${aX}deg);
- animation: rotZ 16s infinite linear var(--state);
- `;
- papa.appendChild(sp);
- spans.push(sp);
- });
- spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);</script>
复制代码
|
|