Leap

马黑黑

马黑黑

原始代码

1. <style>
   
2. #papa {
   
3.         --state: paused;
   
4.         margin: 30px auto;
   
5.         width: 1024px;
   
6.         height: 640px;
   
7.         border: 2px solid tan;
   
8.         border-image: linear-gradient(35deg,tan,purple,cyan,orange,red) 4;
   
9.         background: #3C3A50 url('https://638183.freep.cn/638183/t23/webp1/leap.webp') center/cover no-repeat;
   
10.         box-shadow: 3px 8px 20px rgba(0,0,0,.6);
    
11.         overflow: hidden;
    
12.         display: grid;
    
13.         place-items: center;
    
14.         position: relative;
    
15.         animation: hue 10s infinite alternate var(--state);
    
16. }
    
17. .circle {
    
18.         position: absolute;
    
19.         width: 400px;
    
20.         height: 400px;
    
21.         border-radius: 50%;
    
22.         border: 2px solid var(--bdcolor);
    
23.         cursor: pointer;
    
24. }
    
25. @keyframes rotZ {
    
26.         0% { transform: perspective(2000px) translateZ(-1000px) rotateX(var(--degX)) rotateY(var(--degY)) rotateZ(0deg); }
    
27.         50% { transform: perspective(2000px) translateZ(10px) rotateX(calc(var(--degX) + 180deg)) rotateY(calc(var(--degY) + 180deg)) rotateZ(0deg); }
    
28.         100%{ transform: perspective(2000px) translateZ(-1000px) rotateX(calc(var(--degX) + 360deg)) rotateY(calc(var(--degY) + 360deg)) rotateZ(360deg); }
    
29. }
    
30. @keyframes hue {
    
31.         0% { filter: hue-rotate(0deg); }
    
32.         100% { filter: hue-rotate(360deg); }
    
33. }
    
34. </style>
    
35. 
    
36. <div id="papa"></div>
    
37. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1992056183" loop="loop" autoplay="autoplay"></audio>
    
38. 
    
39. <script>
    
40. let total = 60, spans = [];
    
41. let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
42. Array.from({length: total}).forEach( (item) => {
    
43.         let sp = document.createElement('span');
    
44.         sp.className = 'circle';
    
45.         let aX = Math.random() * 360, aY = Math.random() * 360, ww = Math.random() * 600 + 200, hh = Math.random() * 400 + 200;
    
46.         sp.style.cssText += `
    
47.                 --bdcolor: #${Math.random().toString(16).substr(-6)};
    
48.                 --degX: ${aX}deg;
    
49.                 --degY: ${aY}deg;
    
50.                 width: ${ww}px;
    
51.                 height: ${ww}px;
    
52.                 transform: perspective(2000px) rotateY(${aY}deg) rotateX(${aX}deg);
    
53.                 animation: rotZ 16s infinite linear var(--state);
    
54.         `;
    
55.         papa.appendChild(sp);
    
56.         spans.push(sp);
    
57. });
    
58. spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
    
59. aud.addEventListener('play', mState, false);
    
60. aud.addEventListener('pause', mState, false);</script>

复制代码

雨中悄然

背景色变换加线条旋转形成极其绚丽的效果，变幻无穷，眼花缭乱。

马黑黑

帖子代码全程通过 pencil code 编写，在 午后时光 首发。现简单解释一下帖子的思路与实现方法：

一、思路

1. 3d圆圈初始化时自旋转不同的角度且各自尺寸不同，这些圆圈在帖子正中央做3d转换（旋转和变大变小）；
2. 帖子整体缓慢变色；
3. 渐变边框。

二、实现

1. 3d圆圈

① 绝对居中使用父元素 papa 的 grip 布局对3d圆圈进行强制居中约束（12、13行）；
② 圆圈有一个初始层叠样式，CSS代码中类选择器 .circle 即是（17 - 24行），这里的一些设置和CSS变量将在 JS 中重新设定；
③ 在 JS 代码中，动态生成 60 个圆圈，每一个圆圈都在xy坐标中的初始旋转不同的角度、它们的宽高尺寸也不同，但都赋予它们相同的调用关键帧动画属性 animation，然后将这些圆圈元素作为子元素添加到 papa 元素下并放入数组 spans 以方便对这些元素进行后续操作（40 - 57行）；
④ 圆圈变大变小：其实是使用了 transform 转换的 translateZ 将圆圈在3d空间的Z轴上前后推动，这使得圆圈在景深方向上来回推远拉近，在视觉上产生变大变小的效果。

2. 渐变边框

这个相对简单：代码两行，07和08，07设定 papa 父元素的边框总样式，再通过08的 border-image 边框图片属性的线性渐变赋值得出最终效果。

3. 帖子整体缓慢变色


① 设计一个关键帧动画 hue（30 - 33行），使用 CSS 的 hue-rotate(deg) 滤镜将 hsl 颜色系统的色相从 0 到 360 度过渡；
② papa父元素使用 animation 属性调用 ① 的关键帧动画 hue（15行）。

hue-rotate(deg) 将会作用于纯色，仅对黑色、白色和灰色不起作用。故此，帖子背景，包括边框和子元素，只要是纯色的颜色，都会变色——实际上是色相从颜色初始值做一圈的色相转换。

马黑黑

雨中悄然 发表于 2023-4-8 08:20
背景色变换加线条旋转形成极其绚丽的效果，变幻无穷，眼花缭乱。

你抢我的板凳了

雨中悄然

马黑黑 发表于 2023-4-8 08:41
你抢我的板凳了

没抢到沙发有点可惜的下回争取

马黑黑

雨中悄然 发表于 2023-4-8 08:48
没抢到沙发有点可惜的下回争取

我的惯用手段是“占位”，大家都知道，这回你手快

雨中悄然

马黑黑 发表于 2023-4-8 08:50
我的惯用手段是“占位”，大家都知道，这回你手快

我知道一般是主贴+代码贴。看全乎了，就回了。。。

马黑黑

雨中悄然 发表于 2023-4-8 09:00
我知道一般是主贴+代码贴。看全乎了，就回了。。。

小辣椒

先好好欣赏一下

小辣椒

再仔细看看教程分享

小辣椒

变色背景加3D旋转效果，欣赏黑黑的好构思

马黑黑

小辣椒 发表于 2023-4-8 16:16
先好好欣赏一下

感谢支持

马黑黑

小辣椒 发表于 2023-4-8 16:19
变色背景加3D旋转效果，欣赏黑黑的好构思

这个呢CSS变量用的较多，基础一般的话代码不是很好理解

马黑黑

小辣椒 发表于 2023-4-8 16:17
再仔细看看教程分享

不知道能看懂不

庶民

这个有趣，动感美。

雨中悄然

马黑黑 发表于 2023-4-8 09:25

没看懂也跟了一个线圈贴，有空去瞧瞧

马黑黑

雨中悄然 发表于 2023-4-8 18:31
没看懂也跟了一个线圈贴，有空去瞧瞧

小辣椒

马黑黑 发表于 2023-4-8 17:42
这个呢CSS变量用的较多，基础一般的话代码不是很好理解

我是瞎捣鼓，还是瞎捣鼓

小辣椒

马黑黑 发表于 2023-4-8 17:44
不知道能看懂不

小辣椒一贯作风，不会就瞎蒙