Teyata

马黑黑 发表于 2024-7-29 07:41

马黑黑 发表于 2024-7-29 07:43

<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
.tiezi {
margin: 30px 0 30px calc(50% - 561px);
width: 960px;
height: 600px;
box-sizing: border-box;
border: 3px solid;
border-image: linear-gradient(to top right, orange, green, red, cyan) 3 3;
background: url('https://638183.freep.cn/638183/t24/1/teyata.jpg') no-repeat center/cover;
z-index: 1;
pointer-events: none;
position: relative;
}
.tiezi::before, .tiezi::after {
position: absolute;
content: '';
transition: all .45s;
}
.tiezi::before {
inset: 0;
background: rgba(255, 255, 255, 0.35);
backdrop-filter: hue-rotate(var(--hue));
}
.tiezi::after {
right: 260px;
top: 120px;
width: 50px;
height: 50px;
background: url('https://638183.freep.cn/638183/web/svg/flower_1.svg') no-repeat center/cover;
transform: rotate(var(--hue));
pointer-events: auto;
cursor: pointer;
}
.tiezi:hover::before { backdrop-filter: unset; }
</style>

<div class="tiezi" id="tzi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=17360999" autoplay loop></audio>
</div>

<script>
aud.ontimeupdate = () => tzi.style.setProperty('--hue', Math.floor(Math.random() * 360) + 'deg');
tzi.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-29 07:58

本帖最后由马黑黑于 2024-7-29 08:16 编辑

本帖：

（一）帖子容器使用渐变边框背景。border-image 属性中，后面的参数对于渐变背景可以随意，一般直接写一个合法数字即可，比如与边框厚度一致的一个数字，也可以写4个数字，例：3 3 3 3。该属性数字之前或之后还可以跟关键字 fill，举例如下：

border-image: linear-gradient(red, orange, plum, green, tan) 3 3 3 3 fill;

这将给整个元素加上背景渐变，其他的背景设置将无效，除非使用 background-blend-mode 等滤镜。

（二）帖子变色特效：使用 ::before 做蒙层，蒙层背景白色带65%的透明度并通过 backdrop-filter 滤镜的 hue-rotate 滤镜实体随音乐的播放随机转换色相。

CSS滤镜 filter 能用的滤镜实体，backdrop-filter 都能用。

（三）小播：帖子容器伪元素 ::after 加svg背景图做成，以菇凉的头饰出现，它巧妙地使用色相转换自定义变量作为自己的旋转依据（因为都是使用的 deg 单位）随音乐播放转动，转向灵活。

梦江南 发表于 2024-7-29 09:16

欣赏学习老师的精彩制作。{:4_187:}

南无月 发表于 2024-7-29 09:21

小播是头饰，很可爱的。。
转动节奏随音乐，方向随机，这个也好玩。。
色相变换跟小播节奏也一致，很神奇

南无月 发表于 2024-7-29 09:23

滤镜的灵活使用贴{:4_199:}怪好看的

竹溪发表于 2024-7-29 09:48

这美人好美，头上的小花转得也好看。

红影发表于 2024-7-29 10:52

用色相转换做小播的转动控制，得到的效果是这样的，这个真没想到呢{:4_204:}
这里面转动的时间间隔是默认值？

红影发表于 2024-7-29 10:59

渐变边框背景的设置也好看。欣赏黑黑好帖{:4_187:}

马黑黑 发表于 2024-7-29 13:40

红影发表于 2024-7-29 10:52
用色相转换做小播的转动控制，得到的效果是这样的，这个真没想到呢
这里面转动的时间间隔是默认 ...
滤镜的 hue-rotate 和 transform 的 rotate 都用到 ??deg，且也都在360之内。

旋转度数随机。当下一个旋转角度低于上一次的，就会回转。

马黑黑 发表于 2024-7-29 13:46

梦江南发表于 2024-7-29 09:16
欣赏学习老师的精彩制作。

{:4_190:}

马黑黑 发表于 2024-7-29 13:46

南无月发表于 2024-7-29 09:21
小播是头饰，很可爱的。。
转动节奏随音乐，方向随机，这个也好玩。。
色相变换跟小播节奏也一致，很神奇

这个可以看一下十楼

红影发表于 2024-7-29 20:31

马黑黑发表于 2024-7-29 13:40
滤镜的 hue-rotate 和 transform 的 rotate 都用到 ??deg，且也都在360之内。

旋转度数随机。当下一个 ...

嗯，得到的数字是随机的，转动方向也收到随机数的影响。

小辣椒 发表于 2024-7-29 23:24

马黑黑发表于 2024-7-29 07:58
本帖：

（一）帖子容器使用渐变边框背景。border-image 属性中，后面的参数对于渐变背景可以随意，一般 ...

这个要仔细看看的

小辣椒 发表于 2024-7-29 23:26

加滤镜效果苦变色吗？

绿叶清舟 发表于 2024-9-6 21:12

这个滤镜有点复杂了

马黑黑 发表于 2024-9-6 23:02

绿叶清舟发表于 2024-9-6 21:12
这个滤镜有点复杂了

会了就不复杂

绿叶清舟 发表于 2024-9-7 20:36

马黑黑发表于 2024-9-6 23:02
会了就不复杂

发现这个滤镜都没看过的了

马黑黑 发表于 2024-9-7 21:15

绿叶清舟发表于 2024-9-7 20:36
发现这个滤镜都没看过的了

这些滤镜我都有过介绍的

绿叶清舟 发表于 2024-9-7 21:29

马黑黑发表于 2024-9-7 21:15
这些滤镜我都有过介绍的

去搜着看了，好象这些滤镜功能很强大的

页: [1] 2

花潮论坛's Archiver

Teyata