《网》之创作笔记
本帖最后由 马黑黑 于 2022-4-16 09:54 编辑 <br /><br /><p>野外漫步，看到一张蛛网，网内有一只丝纹不动的蜘蛛。我就想，这是个好意境，可以做一个帖子，题目就叫网。<br><br></p><p>我想表达时间的流逝与昼夜的更替，时钟、色彩变幻是表达这些最为简单的元素。时钟随手写一个，象征意义的便可，div元素做主体，两个伪元素分别做里内的表盘、指针，加一个@keyframes就好；色彩当然依托主帖的背景及其子元素进行变幻，一张网是底图，蜘蛛是img，加上已经做好的时钟，这些，都会跟随着主体元素变幻自己的颜色。<br></p><p><br></p><p>主元素 .s-net 调用 @keyframes 色彩变幻的动画，可带动所有子元素跟着变幻自己的色彩。色彩变幻使用CSS filter滤镜之sepia。</p><p><br></p><p>整体帖子弄好后，时钟要修饰一下，用混合滤镜之multiply让它更融入整体。</p><p><br></p>
<pre style="font-size: 12px;"><style>
<span style="color: red;">.s-net </span>{
<span style="color: blue;">width</span>: 1024px;
<span style="color: blue;">height</span>: 788px;
<span style="color: blue;">position</span>: relative;
<span style="color: blue;">display</span>: flex; <span style="color: blue;">justify-content</span>: center;
<span style="color: blue;">align-items</span>: center;
<span style="color: blue;">background</span>: url(<span style="color: magenta">'<span style="color: blue;">https</span>://638183.freep.cn/638183/Pic/spidernet.jpg'</span>) no-repeat center/cover;
<span style="color: blue;">animation</span>: sepia 20s ease infinite alternate;
}
<span style="color: red;">.s-net img </span>{ <span style="color: blue;">width</span>: 400px; }
<span style="color: red;">.s-net div </span>{
<span style="color: blue;">position</span>: absolute;
<span style="color: blue;">width</span>: 100px;
<span style="color: blue;">height</span>: 100px;
<span style="color: blue;">left</span>: 1px;
<span style="color: blue;">top</span>: 1px;
<span style="color: blue;">background</span>: darkgreen;
<span style="color: blue;">border-radius</span>: 50%;
<span style="color: blue;">mix-blend-mode</span>: multiply;
}
<span style="color: red;">.s-net <span style="color: blue;">div</span>:<span style="color: blue;"></span>:before, .s-net <span style="color: blue;">div</span>:<span style="color: blue;"></span>:after </span>{ <span style="color: blue;">content</span>: <span style="color: magenta">''</span>; <span style="color: blue;">position</span>: absolute; }
<span style="color: red;">.s-net <span style="color: blue;">div</span>:<span style="color: blue;"></span>:before </span>{
<span style="color: blue;">width</span>: 90px;
<span style="color: blue;">height</span>: 90px;
<span style="color: blue;">left</span>: calc(50% - 45px);
<span style="color: blue;">bottom</span>: calc(50% - 45px);
<span style="color: blue;">background</span>: green;
<span style="color: blue;">border-radius</span>: 50%;
}
<span style="color: red;">.s-net <span style="color: blue;">div</span>:<span style="color: blue;"></span>:after </span>{
<span style="color: blue;">width</span>: 2px;
<span style="color: blue;">height</span>: 40px;
<span style="color: blue;">left</span>: calc(50% - 1px);
<span style="color: blue;">top</span>: 10px;
<span style="color: blue;">background</span>: darkgreen;
<span style="color: blue;">transform-origin</span>: center bottom;
<span style="color: blue;">animation</span>: rol 2s linear infinite;
}
<span style="color: red;">@keyframes sepia </span>{ to { <span style="color: blue;">filter</span>: sepia(100%); } }
<span style="color: red;">@keyframes rol </span>{ to { <span style="color: blue;">transform</span>: rotate(1turn); } }
</style>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"s-net"</span>>
<<span style="color:darkred">div</span>><<span style="color: darkred">/div</span>>
<<span style="color:darkred">img</span> alt="" <span style="color: red">src</span><span style="color: blue">=</span><span style="color: magenta">"https://638183.freep.cn/638183/Pic/spider.png"</span> />
<<span style="color: darkred">/div</span>>
<script>
<span style="color: blue">let</span> au = <span style="color: red">document</span>.createElement(<span style="color: magenta">'iframe'</span>);
au.src = <span style="color: magenta">'https:<span style="color: green">//music.163.com/outchain/player?type=2&id=521090083&auto=1&height=66'</span>;
</span>
au.style.display = <span style="color: magenta">'none'</span>;
<span style="color: red">document</span>.querySelector(<span style="color: magenta">'.s-net'</span>).appendChild(au);
</script>
</pre>
<p>OK，简简单单的元素与呈现方式，把偶然得来的灵感渲染在了帖子里。</p><p><br></p><p>是的，网上的蜘蛛，是我们的人生写真。</p> 黑黑老师真聪明，很想学，但看起来好难的样子。。{:5_102:} 红芍药 发表于 2022-4-16 10:12
黑黑老师真聪明，很想学，但看起来好难的样子。。
嗯，难是不太难，字母好像也不超过26个的，学学便会 果然还是马术{:4_173:} 樵歌 发表于 2022-4-16 13:13
果然还是马术
后空翻没学会{:4_170:} 马黑黑 发表于 2022-4-16 13:14
后空翻没学会
那就卷身上呗{:4_173:} 来学习。 sepia是比较新的，记得动画名称都能自己设的，在滤镜动画里看起来是不可以的，{:4_187:} 这个帖子里有mix-blend-mode运用，还有filter，都是滤镜，感觉有点迷糊{:4_173:} 红影 发表于 2022-4-16 14:53
这个帖子里有mix-blend-mode运用，还有filter，都是滤镜，感觉有点迷糊
blend是融合滤镜，filter是另一个类型的各种效果的滤镜，二者性质不同 马黑黑 发表于 2022-4-16 15:01
blend是融合滤镜，filter是另一个类型的各种效果的滤镜，二者性质不同
嗯嗯，我赶紧对它们熟悉起来{:4_187:} 红影 发表于 2022-4-18 14:23
嗯嗯，我赶紧对它们熟悉起来
CSS属性，冒号前后是不一样的，冒号前的东东是总属性名称，如
filter: ...
filter 是总属性名，它刚好就是滤镜，然后，省略号部分就是具体的滤镜了，这就属性赋值。 马黑黑 发表于 2022-4-18 19:23
CSS属性，冒号前后是不一样的，冒号前的东东是总属性名称，如
filter: ...
还是有点复杂的，一下子要理解挺难。 红影 发表于 2022-4-19 16:35
还是有点复杂的，一下子要理解挺难。
嗯，滤镜是很多的。有的主要是基于图像的，像filter，但它也能用于其它元素；有的是基于背景的，像background-blend-mode；有些是基于元素间的，像mix-blend-mode. 马黑黑 发表于 2022-4-19 18:11
嗯，滤镜是很多的。有的主要是基于图像的，像filter，但它也能用于其它元素；有的是基于背景的，像backgr ...
嗯，这么多，只能慢慢熟悉了。 红影 发表于 2022-4-20 18:51
嗯，这么多，只能慢慢熟悉了。
嗯，不容易的 马黑黑 发表于 2022-4-20 18:56
嗯，不容易的
记住加理解，然后运用。 红影 发表于 2022-4-20 20:20
记住加理解，然后运用。
对的
页:
[1]