关于segmentfault-技术周刊:SegmentFault-思否技术周刊-程序员如何用编程展现艺术

41次阅读

共计 1870 个字符，预计需要花费 5 分钟才能阅读完成。

本期技术周刊小编带大家康康程序员如何用编程展示艺术哒～

`文章举荐`

手写一个有点意思的电梯小程序

点击楼层，催动电梯回升或者降落

电梯达到对应楼层，电梯左右门关上

门关上之后，外面的美女就进去啦

提示信息: 本美女就要进去了，请速速来迎接

按钮会有一个点击选中的成果

依据以上的剖析，咱们就能够很好的实现电梯小程序啦，接下来让咱们进入编码阶段吧。

PS: 这里的楼层数是动静生层的，不过倡议值不要设置太大，能够在代码里做限度。

那些你不晓得的 CSS 自定义形态网格布局

在失常的开发中，咱们会遇到很多元素块排列对齐的需要，如九宫格抽奖，多张图片上传后等分布局预览，微信朋友圈多张图片展现等。这都是失常的正方形很规整的布局。

如果图像不是齐全正方形，而是形态像六边形或菱形怎么办？咱们怎么做呢。事实上，咱们将联合咱们曾经钻研过的 CSS 网格技术，并退出一些 CSS clip-path 和 mask 魔法，为您能够设想的任何形态创立精美的图像网格！

高阶切图技巧！基于单张图片的任意色彩转换

明天，要介绍一种基于 CSS mask-composite 的高级技巧。
通过把握它，咱们能够通过一张图片，失去对于它的各种变换，甚至乎，失去各种不同色彩的变换。

Windows 滚动条如何丑化成 macOS 那样？

思考到桌面端当初曾经是 -webkit- 的天下了，以下自定义均以 chrome 为例
自定义滚动条须要用到两个要害的伪元素::-webkit-scrollbar 和::-webkit-scrollbar-thumb

::-webkit-scrollbar 滚动容器款式

::-webkit-scrollbar-thumb 滑块款式

妙啊！纯 CSS 实现拼图游戏

本文，将向大家介绍一种将多个 CSS 技巧使用到极致的技巧，利用纯 CSS 实现拼图游戏。
咱们拆解一下外围的难点：

如何让一个元素变得能够拖拽？

如何让一个元素从一个固定的地位通过拖拽，停留在另外一个地位？

最难的是，基于（2），拖拽元素后开释，只有开释在特定的地位，元素才会固定到新地位，否则，返回到原先的地位

Oh No，下面的 (2)、(3) 怎么看也不像是单纯的 CSS 能解决的问题。
那么，到底是如何奇妙的搭配、组合，最终可能利用 CSS 来实现这样的成果呢？让咱们一步一步来拆解这个过程。

晋升 web 输出体验！JS 如何主动配对标点符号？

原理其实非常简单，能够分为以下几个步骤

检测输出的内容，如果是以上标点符号就下一步

依据输出的标点，主动补全与之对应的后半局部

将光标移到两个标点之间

是不是十分好了解呢？然而，外面的细节远不止这些，波及到十分多的比拟生僻的原生办法，一起看看如何实现的吧

有意思的鼠标指针交互探索

有一点须要留神的是，利用模仿的鼠标指针去 Hover 元素，Click 元素的时候，会发现这些事件都无奈触发。

这是因为，此时被暗藏的指针上面，其实悬浮的咱们模仿鼠标指针，因而，所有的 Hover、Click 事件都触发在了这个元素之上。

当然，这个也十分好解决，咱们只须要给模仿指针的元素，增加上 pointer-events: none，阻止默认的鼠标事件，让事件透传即可：
{pointer-events: none;}

实现聚焦成果