墨家神机

马黑黑 发表于 2024-7-18 07:42

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

<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#tiezi {
--width: 960px;
margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
width: var(--width);
height: 600px;
background:
url('https://638183.freep.cn/638183/t24/3/mzuj.jpg') no-repeat center/cover,
radial-gradient(transparent 25%, orange 30%, transparent 35%) center/30% 30%,
radial-gradient(circle, transparent 25%, green 26%, green 28%, transparent 29%) center/30% 10%;
background-blend-mode: overlay, color, difference;
box-shadow: 0 0 10px rgba(0,0,0,.5);
pointer-events: none;
position: relative;
}
#tiezi::before, #tiezi::after {
position: absolute;
content: '';
}
#tiezi::before {
inset: 0;
background: linear-gradient(to right, transparent, rgba(0,0,0,.3), transparent, rgba(0,0,0,.3), transparent) 0 0/200% 100%;
animation: bgmove 4s infinite alternate var(--state);
}
#tiezi::after {
left: 280px;
top: 10px;
content: url('https://638183.freep.cn/638183/t22/btn/star.png');
cursor: pointer;
pointer-events: auto;
opacity: .8;
transform: rotate(15deg);
animation: flash 1s infinite alternate var(--state);
}
@keyframes bgmove { to { background-position: -200% 0; } }
@keyframes flash { to { transform: rotate(-15deg); opacity: .1; } }
</style>

<div id="tiezi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=411356357" poster="https://638183.freep.cn/638183/t23/btn/f3.png" autoplay loop></audio>
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => tiezi.style.setProperty('--state', ['running','paused'][+aud.paused]);
tiezi.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-18 07:49

径向渐变椭圆的横着挖，圆的竖着挖，效果跟特种部队训器材似的，当过兵的就是有不一样的思路～

马黑黑 发表于 2024-7-18 07:53

本帖：

（一）圈圈串以抽象的方式代表墨家机巧。实现手段没能做到墨家的无神可超越的水平，仅利用帖子主元素的两个径向渐变背景组合而成，并利用背景融合属性（background-blend-mode）的设置与主图背景混合出帖子所见到的静态背景图样。

（二）帖子的左右移动光效，通过帖子主元素的伪元素 ::before 实现，伪元素设置向右伸展的线性背景，背景长度设为帖子尺寸的一倍，然后调用关键帧动画改变背景的水平方向位置。

南无月 发表于 2024-7-18 07:55

这次看代码有个线性渐变了～黑色和透明色交替的，左右移动中～

马黑黑 发表于 2024-7-18 07:56

南无月发表于 2024-7-18 07:55
这次看代码有个线性渐变了～黑色和透明色交替的，左右移动中～

眼光如鹰般犀利{:4_199:}

南无月 发表于 2024-7-18 07:58

猜的对不对不知道，小星星闪烁的也漂亮……很逗人～

南无月 发表于 2024-7-18 07:59

马黑黑发表于 2024-7-18 07:56
眼光如鹰般犀利

大白老师你的效果整的好，手机一样清晰显示～

南无月 发表于 2024-7-18 08:00

马黑黑发表于 2024-7-18 07:53
本帖：

（一）圈圈串以抽象的方式代表墨家机巧。实现手段没能做到墨家的无神可超越的水平，仅利用帖子主 ...

这个效果就是顶级品质～点赞108

马黑黑 发表于 2024-7-18 08:11

南无月发表于 2024-7-18 08:00
这个效果就是顶级品质～点赞108

{:4_180:}

马黑黑 发表于 2024-7-18 08:11

南无月发表于 2024-7-18 07:59
大白老师你的效果整的好，手机一样清晰显示～

理论上手机上的显示效果会更细腻

马黑黑 发表于 2024-7-18 08:12

南无月发表于 2024-7-18 07:58
猜的对不对不知道，小星星闪烁的也漂亮……很逗人～

对极对极

梦江南 发表于 2024-7-18 08:29

黑黑老师辛苦,请喝茶！https://www.huachaowang.com/static/image/smiley/hcbiaoqing2/115.gif

红影发表于 2024-7-18 10:22

用代码技巧展示墨家机巧，这个竟有奇妙的相通之处呢{:4_199:}

红影发表于 2024-7-18 10:26

bgmove { to { background-position: -200% 0; } }这个没看懂，为什么不是 -200% 100%呢，不是改变改变背景的水平方向的变化么，竖直方向应该不用动的吧？

红影发表于 2024-7-18 10:32

两个径向一个用了circle一个没用，更可对比看出缺省时是椭圆。
黑黑的细心体现在每个细节中{:4_199:}

马黑黑 发表于 2024-7-18 21:16

红影发表于 2024-7-18 10:32
两个径向一个用了circle一个没用，更可对比看出缺省时是椭圆。
黑黑的细心体现在每个细节中

{:4_203:}

马黑黑 发表于 2024-7-18 21:16

红影发表于 2024-7-18 10:26
bgmove { to { background-position: -200% 0; } }这个没看懂，为什么不是 -200% 100%呢，不是改变改变背景 ...

你可能没分清 background-position 和 background-size

马黑黑 发表于 2024-7-18 21:16

红影发表于 2024-7-18 10:22
用代码技巧展示墨家机巧，这个竟有奇妙的相通之处呢

{:4_172:}

马黑黑 发表于 2024-7-18 21:17

梦江南发表于 2024-7-18 08:29
黑黑老师辛苦,请喝茶！

晚上好

页: [1] 2 3 4 5

花潮论坛's Archiver

墨家神机