《网》之创作笔记

马黑黑 · 发表于 2022-4-16 09:53

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-4-16 09:54 编辑

野外漫步，看到一张蛛网，网内有一只丝纹不动的蜘蛛。我就想，这是个好意境，可以做一个帖子，题目就叫网。

我想表达时间的流逝与昼夜的更替，时钟、色彩变幻是表达这些最为简单的元素。时钟随手写一个，象征意义的便可，div元素做主体，两个伪元素分别做里内的表盘、指针，加一个@keyframes就好；色彩当然依托主帖的背景及其子元素进行变幻，一张网是底图，蜘蛛是img，加上已经做好的时钟，这些，都会跟随着主体元素变幻自己的颜色。

主元素 .s-net 调用 @keyframes 色彩变幻的动画，可带动所有子元素跟着变幻自己的色彩。色彩变幻使用CSS filter滤镜之sepia。

整体帖子弄好后，时钟要修饰一下，用混合滤镜之multiply让它更融入整体。

<style>
.s-net {
   width: 1024px;
   height: 788px;
   position: relative;
   display: flex; justify-content: center;
   align-items: center;
   background: url('https://638183.freep.cn/638183/Pic/spidernet.jpg') no-repeat center/cover;
   animation: sepia 20s ease infinite alternate;
}
.s-net img { width: 400px; }
.s-net div {
   position: absolute;
   width: 100px;
   height: 100px;
   left: 1px;
   top: 1px;
   background: darkgreen;
   border-radius: 50%;
   mix-blend-mode: multiply;
}
.s-net div::before, .s-net div::after { content: ''; position: absolute; }
.s-net div::before {
   width: 90px;
   height: 90px;
   left: calc(50% - 45px);
   bottom: calc(50% - 45px);
   background: green;
   border-radius: 50%;
}
.s-net div::after {
   width: 2px;
   height: 40px;
   left: calc(50% - 1px);
   top: 10px;
   background: darkgreen;
   transform-origin: center bottom;
   animation: rol 2s linear infinite;
}
@keyframes sepia { to { filter: sepia(100%); } }
@keyframes rol { to { transform: rotate(1turn); } }
</style>

<div class="s-net">
   <div></div>
   <img alt="" src="https://638183.freep.cn/638183/Pic/spider.png" />
</div>

<script>
let au = document.createElement('iframe');
au.src = 'https://music.163.com/outchain/player?type=2&id=521090083&auto=1&height=66';

au.style.display = 'none';
document.querySelector('.s-net').appendChild(au);
</script>