本期技术周刊小编带大家康康程序员如何用编程展现艺术哒～
文章推荐
- 点击楼层，催动电梯上升或者下降
- 电梯到达对应楼层，电梯左右门打开
- 门打开之后，里面的美女就出来啦
- 提示信息: 本美女就要出来了，请速速来迎接
- 按钮会有一个点击选中的效果
根据以上的分析，我们就可以很好的实现电梯小程序啦，接下来让我们进入编码阶段吧。
PS: 这里的楼层数是动态生层的，不过建议值不要设置太大，可以在代码里做限制。
在正常的开发中，我们会遇到很多元素块排列对齐的需求，如九宫格抽奖，多张图片上传后等分布局预览，微信朋友圈多张图片展示等。这都是正常的正方形很规整的布局。
如果图像不是完全正方形，而是形状像六边形或菱形怎么办？我们怎么做呢。事实上，我们将结合我们已经研究过的 CSS 网格技术，并加入一些 CSS clip-path和mask魔法，为您可以想象的任何形状创建精美的图像网格！
今天，要介绍一种基于 CSS mask-composite 的高级技巧。
通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。
考虑到桌面端现在已经是-webkit-的天下了，以下自定义均以chrome为例
自定义滚动条需要用到两个关键的伪元素::-webkit-scrollbar和::-webkit-scrollbar-thumb
- ::-webkit-scrollbar滚动容器样式
- ::-webkit-scrollbar-thumb滑块样式
本文，将向大家介绍一种将多个 CSS 技巧运用到极致的技巧，利用纯 CSS 实现拼图游戏。
我们拆解一下核心的难点：
- 如何让一个元素变得可以拖拽？
- 如何让一个元素从一个固定的位置通过拖拽，停留在另外一个位置？
- 最难的是，基于（2），拖拽元素后释放，只有释放在特定的位置，元素才会固定到新位置，否则，返回到原先的位置
Oh No，上面的 (2)、(3) 怎么看也不像是单纯的 CSS 能解决的问题。
那么，到底是如何巧妙的搭配、组合，最终能够利用 CSS 来实现这样的效果呢？让我们一步一步来拆解这个过程。
原理其实非常简单，可以分为以下几个步骤
- 检测输入的内容，如果是以上标点符号就下一步
- 根据输入的标点，自动补全与之对应的后半部分
- 将光标移到两个标点之间
是不是非常好理解呢？但是，里面的细节远不止这些，涉及到非常多的比较生僻的原生方法，一起看看如何实现的吧
有一点需要注意的是，利用模拟的鼠标指针去 Hover 元素，Click 元素的时候，会发现这些事件都无法触发。
这是由于，此时被隐藏的指针下面，其实悬浮的我们模拟鼠标指针，因此，所有的 Hover、Click 事件都触发在了这个元素之上。
当然，这个也非常好解决，我们只需要给模拟指针的元素，添加上 pointer-events: none，阻止默认的鼠标事件，让事件透传即可：
{ pointer-events: none; }
这是之前朋友问我的一个功能：他觉得看网页有时候注意力会被转移，希望可以有个蒙层帮助他集中注意力
反手我就用 box-shadow 把功能写了出来。
这个效果的灵感来自某些网站，当鼠标移动时，鼠标箭头周围出现气泡、红心或水波的扩散图案，这种效果对网页的访问者有很强的视觉吸引力
我们用原生的 HTML，JavaScript 和 CSS 就能实现这种效果
本周活动推荐
细心观察的小伙伴们可能已经发现，在 SegmentFault 首页悄悄上线了一个全新的版块 ☕ 极客观点。
不同于技术问答，社区中非具体技术问题的讨论可以在此发起，但「极客观点」 并不是一个灌水、摸鱼区哦~ 我们希望大家聚焦于技术方向、程序员职业发展等话题，发起有价值的讨论，输出有价值的观点，希望这里可以成为陪伴大家一起成长的阵地。🤗️
🌟 🌟 🌟 重点来咯！！！「思否小姐姐」向大家发起新的打卡挑战啦！截止本月底完成「极客观点」打卡活动，即可获得稀有限量周边喔～
快来打卡领取稀有限量周边，一键传送：https://segmentfault.com/a/11...
活动奖品概览：
# SegmentFault 技术周刊 #
「技术周刊」是社区特别推出的技术内容系列，一周一主题。
每周二更新，欢迎「关注」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。
如有问题可以添加小姐姐微信~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。