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

马黑黑 发表于 2024-7-27 19:10

源

马黑黑 发表于 2024-7-27 19:11

<div class="hE"><pre>
<style>
#mydiv {
margin: 130px 0 30px calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/3/origin.jpg') no-repeat center/cover;
box-shadow: 0 0 6px rgba(0,0,0,.6);
overflow: hidden;
z-index: 1;
display: grid;
place-items: center;
position: relative;
}
#mydiv::before {
position: absolute;
content: '';
inset: -100px;
background: repeating-conic-gradient(at 50px 50px , transparent 0%, rgba(0,255,255,.25) 4%, transparent 8%);
transform-origin: 50px 50px;
animation: swear 5s infinite alternate var(--state);
}
#player {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
border: 12px double rgba(55,144,177,.7);
cursor: pointer;
animation: rot 12s linear infinite var(--state);
}
#player::before, #player::after {
position: absolute;
content: '';
border-radius: inherit;
border: inherit;
}
#player::before {
inset: 12px;
border-style: double solid;
border-color: rgba(68,205,241,.65);
}
#player::after { inset: 48px; border-style: dotted; }
li-zi {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: inset 0 0 10px lightblue;
animation: up 4s linear infinite var(--state);
}
@keyframes swear {
from { transform: rotate(-6deg); }
to { transform: rotate(6deg); }
}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes up {
to { transform: translateY(var(--yy)); opacity: 0; }
}
</style>

<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2053239064" autoplay loop></audio>
<div id="player"></div>
</div>

<script>
Array.from({length: 60}).forEach(i => {
i = document.createElement('li-zi');
i.style.cssText += `
left: ${50 + Math.floor(Math.random() * 100)}px;
top: 95px;
background: #${Math.random().toString(16).substring(2,8)};
animation-delay: -${Math.random() * 4}s;
--yy: ${500 * }px;
`;
player.appendChild(i);
});
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-7-27 19:17

本帖：

（一）使用帖子容器伪元素 ::before 实现光影；
（二）小播利用 border* 属性营造容器与两个伪元素的样式，让它们在外观上层层嵌套；
（三）li-zi 选择器对标的自定义HTML标签追加到 id="player" 即小播容器中，它们的关键帧动画使用 transform 的 translateY 实现位移，位移方向随机取正负距离（代码74行）。

马黑黑 发表于 2024-7-27 19:20

li-zi 标签作为 player 的子元素，它们本来做上下位移运动，但 player 元素在旋转中，整体动态效果就是帖子呈现的那样了

南无月 发表于 2024-7-27 19:57

马黑黑发表于 2024-7-27 19:17
本帖：

（一）使用帖子容器伪元素 ::before 实现光影；

{:4_173:}
盲猜完来看说明，原来我的问题这里都有解答

place-items: center;父元素里有这个，没见过。。
原来光线不是视频是代码写的锥形渐变。。
transform-origin: 50px 50px;但这句又是新的。。不认识

南无月 发表于 2024-7-27 20:00

马黑黑发表于 2024-7-27 19:20
li-zi 标签作为 player 的子元素，它们本来做上下位移运动，但 player 元素在旋转中，整体动态效果就是帖子 ...

还是子元素继承父元素的特性。。
所以除了直线跑动之外，就跟着小播一起转了

li-zi 这个标签前面既无#也无.，跟着谁就是谁家的这样理解可以么。
{:4_170:}

南无月 发表于 2024-7-27 20:01

马黑黑发表于 2024-7-27 19:20
li-zi 标签作为 player 的子元素，它们本来做上下位移运动，但 player 元素在旋转中，整体动态效果就是帖子 ...

我去试试让它跟着个视频看看。。{:4_173:}

红影发表于 2024-7-27 20:34

马黑黑发表于 2024-7-27 19:20
li-zi 标签作为 player 的子元素，它们本来做上下位移运动，但 player 元素在旋转中，整体动态效果就是帖子 ...

跟前一个帖子比较了一下，貌似粒子在css里设置动画就会跟着小播走，在js里就会自己走自己的，是这样么？

红影发表于 2024-7-27 20:35

500 * 这个随机取正负，就可以往两边跑了呢{:4_199:}

红影发表于 2024-7-27 20:38

那个锥形渐变带来的光影真美，一下子让帖子的背景色彩变得更漂亮了。
中心取在左上角，只留了1/4，看着像光柱一样，真美{:4_187:}

红影发表于 2024-7-27 20:43

前面那个帖子用border-color: transparent gold;得到有断开的线，这个用border-style: double solid;得到了另一种效果呢。学习了{:4_187:}

马黑黑 发表于 2024-7-27 20:58

南无月发表于 2024-7-27 19:57
盲猜完来看说明，原来我的问题这里都有解答

place-items: center;父元素里有这个，没见过 ...

一、父元素规定子元素的布排方式

display: grid; /* 网格布局 */
place-items: center; /* 居中 */

这样，当子元素 absolute 定位，且不设置 left、top 等值时，它们绝对居中于父元素。但可以使用 left、top 等重新定位。

二、运动原点 transform-origin 设置

一个元素做 transform 转换时，默认运动的原点在元素的中心，可以设置，比如设置在左上角——

transform-origin: 0 0;

马黑黑 发表于 2024-7-27 21:01

南无月发表于 2024-7-27 20:00
还是子元素继承父元素的特性。。
所以除了直线跑动之外，就跟着小播一起转了

li-zi 是自定义标签。HTML代码：

<li-zi></li-zi>

CSS选择器：

li-zi { ... }

自定义标签以div为蓝本，它就像div一样。自定义标签命名的时候分两部分，使用 - 做连接符。

马黑黑 发表于 2024-7-27 21:03

红影发表于 2024-7-27 20:34
跟前一个帖子比较了一下，貌似粒子在css里设置动画就会跟着小播走，在js里就会自己走自己的，是这样么？
前一个帖子，小播主元素没有旋转动作，是它的两个伪元素做旋转；这个，小播旋转，伪元素不做旋转设置，它们跟着小播旋转，粒子也是作为小播的子元素跟着旋转同时有自己的升或降运动。

马黑黑 发表于 2024-7-27 21:06

红影发表于 2024-7-27 20:35
500 * 这个随机取正负，就可以往两边跑了呢

这个是偷懒写法。反正就是获得 1 或 -1 然后乘500

愤怒的葡萄 发表于 2024-7-27 21:12

音乐非常好听。

红影发表于 2024-7-27 21:53

马黑黑发表于 2024-7-27 21:03
前一个帖子，小播主元素没有旋转动作，是它的两个伪元素做旋转；这个，小播旋转，伪元素不做旋转设置，它 ...

哦，原来前一个是伪元素在转，去比了半天，还没说到点子上{:4_173:}

红影发表于 2024-7-27 21:54

马黑黑发表于 2024-7-27 21:06
这个是偷懒写法。反正就是获得 1 或 -1 然后乘500

很简洁，特别好{:4_187:}

梦江南 发表于 2024-7-28 07:46

谢谢黑黑老师无私奉献，辛苦了！{:4_187:}

海笑发表于 2024-7-28 08:19

欣赏老师佳作！

页: [1] 2

花潮论坛's Archiver

源