Leap

马黑黑 发表于 2023-4-8 08:06

马黑黑 发表于 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>

雨中悄然 发表于 2023-4-8 08:20

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

马黑黑 发表于 2023-4-8 08:40

本帖最后由马黑黑于 2023-4-8 08:49 编辑

帖子代码全程通过 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:41

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

你抢我的板凳了{:4_170:}

雨中悄然 发表于 2023-4-8 08:48

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

没抢到沙发有点可惜的{:4_170:}下回争取

马黑黑 发表于 2023-4-8 08:50

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

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

雨中悄然 发表于 2023-4-8 09:00

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

我知道一般是主贴+代码贴。看全乎了，就回了。。。{:4_205:}

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

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

{:4_190:}

小辣椒 发表于 2023-4-8 16:16

先好好欣赏一下

小辣椒 发表于 2023-4-8 16:17

再仔细看看教程分享

小辣椒 发表于 2023-4-8 16:19

变色背景加3D旋转效果，欣赏黑黑的好构思{:4_178:}

马黑黑 发表于 2023-4-8 17:41

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

感谢支持

马黑黑 发表于 2023-4-8 17:42

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

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

马黑黑 发表于 2023-4-8 17:44

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

不知道能看懂不

庶民发表于 2023-4-8 18:27

这个有趣，动感美。

雨中悄然 发表于 2023-4-8 18:31

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

{:4_170:}没看懂也跟了一个线圈贴，有空去瞧瞧

马黑黑 发表于 2023-4-8 19:31

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

{:4_181:}

小辣椒 发表于 2023-4-8 19:52

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

我是瞎捣鼓，还是瞎捣鼓{:4_170:}

小辣椒 发表于 2023-4-8 19:53

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

小辣椒一贯作风，不会就瞎蒙{:4_189:}

页: [1] 2 3 4 5 6

花潮论坛's Archiver

Leap