CSS是一个很独特的语言。看起来很是简单，可是某种特殊效果看似简单，实现起来就很有难度。这篇文章主要是给在学习前端的童鞋分享一些新的CSS技巧，一些在前端教程和培训课堂中不会讲到的知识。第二就是让还在前端开发这条道路上的童鞋们，从新燃起对前端排版和特效的热爱和热情！🔥javascript

1. 固定底部内容

这种是一个很是常见的布局方式，可是对于新手来讲是比较常见的难题。css

这种布局方式在后台管理系统中比较常见，当咱们内容不足浏览器窗口高度时，底部内容须要固定在底部。当内容超出了浏览器窗口高度，就会随着内容日后推。html

在有CSS3以前，实现这个效果是很有难度的。浏览器窗口高度是会根据不一样用户打开浏览器的状况，屏幕大小的差别和浏览器的缩放比例而变。咱们须要借助JavaScript来实时获取浏览器高度进行运算才能实现。虽说标题是说“固定”底部，可是咱们想要的效果不是position: fixed。使用固定定位，在内容高于窗口高度时，就会挡住咱们的内容。前端

随着CSS3的来临，最完美的实现方式是使用Flexbox。实现的关键就是使用不太被关注的flex-grow属性，能够在咱们的内容标签元素（好比div）中使用。在咱们下面的例子里使用了main标签。java

我来说解一下实现原理吧。jquery

flew-grow是用来控制一个flex元素相对它同等级flex元素的自身可扩充的空间。若是咱们使用flex-grow: 0，那这个flex元素就彻底不会扩展了。因此咱们须要把头部和底部之间的内容标签元素设置为flex-grow: 1或者flex-grow: auto，这样内容部分就会自动填充满头部和底部以外的全部空间。git

为了不底部内容受内容部分扩充空间的影响，咱们给footer底部元素flex-shrink: 0属性。flex-shrink的做用与flex-grow是偏偏相反，用来控制flex元素收缩的空间，这里咱们给了flex-shrink: 0就是为了底部footer的大小不受影响。程序员

咱们直接上HTML和CSS代码看看是怎么实现的。github

HTML

<div id="document">
	<nav>
		<h1>头部内容</h1>
	</nav>
	<main>
		<p>能够添加更多内容看看底部的变化哦！</p>
	</main>
	<footer>
		<h1>底部内容</h1>
	</footer>
</div>
复制代码

#document {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #202020;
    font-family: microsoft yahei,wenquanyi micro hei,sans-serif !important;
}

nav, footer {
    background: #494949;
    display: flex;
    justify-content: center;
}

main {
    color: #bdbdbd;
    flex: auto;
}

footer {
    flex-shrink: 0;
}

* {
    margin: 0;
}

h1,
p {
    padding: 15px;
}

nav > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px #00000080;
}

footer > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px #00000080;
}
复制代码

🌟知识点总结：web

flex-grow --- 是用来控制一个flex元素相对它同等级flex元素的自身可扩充的空间

flex-shrink --- 做用与flex-grow是偏偏相反，用来控制flex元素收缩的空间

预览实际效果 ｜ GitHub源码 ｜喜欢的童鞋 🌟star 一下谢谢

2. 悬停放大图片特效

悬停放大图片是一个特别吸引眼球的特效，比较经常使用于可点击的图片。当用户悬停鼠标在图片上，图片会稍微的放大。

其实实现这个特效是很是简单的。首先咱们须要一个div包裹这img标签，这个包裹层是用来遮挡住图片，当图片放大时不会出现图片超出咱们规定的宽高之外。

首先咱们来说讲div包裹的属性，咱们须要给它一个固定的width宽和height高。而后咱们必须给予这个元素overflow: hidden属性。让图片放大的时候不会超出这个div元素的宽高。有了这个包裹层，咱们就能够编写img的各类效果了。

个人例子里面用了transform: scale(1,1)做为悬停时的图片特效，这个transform是用于改变任何元素的属性的，而后scale是用于放大（整数就会放大）或者缩小（负数就会缩小）元素的。

上代码让你们看看：

html body中放入

<div class="img-wrapper">
  <img src="https://img-blog.csdnimg.cn/2020032122230564.png"/>
</div>
复制代码

.img-wrapper {
  width: 400px;
  height: 400px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.img-wrapper img {
  height: 400px;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.img-wrapper img:hover {
  transform: scale(1.1);
}

.img-wrapper {
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #000;
}
复制代码

若是大家想让图片更加炫酷能够加上图片过滤属性filter，让图片变灰或者变深褐色，而后悬停时候出现更加炫酷的颜色变幻。灰化的属性是filter: grayscale(100%);，而后深褐色化的属性是filter: sepia(100%)。其实图片还有不少过滤属性的，你们有兴趣也能够去尝试一下哦！

加入特殊效果的代码以下：

HTML

<!-- 灰度过滤 -->
<div class="img-wrapper">
  <img class="grayscale-img" src="https://img-blog.csdnimg.cn/2020032211021728.png" />
</div>

<!-- 深褐色过滤 -->
<div class="img-wrapper">
  <img class="sepia-img" src="https://img-blog.csdnimg.cn/2020032122230564.png" />
</div>
复制代码

/* ============== * 灰度过滤 * ==============*/
.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* ============== * 深褐色过滤 * ==============*/
.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}
复制代码

🌟知识总结

transform --- 用于改变元素

scale --- 对元素进行放大和缩小

filter --- 图片过滤器

grayscale --- 灰度过滤

sepia --- 深褐色过滤

预览实际效果 ｜ GitHub源码 ｜喜欢的童鞋 🌟star 一下谢谢

3. 瞬间黑暗模式

最近微信也逃脱不了黑暗时代的到来，网页也不少都作了黑暗模式的兼容和主题。若是咱们在作的一个网站想瞬间实现黑暗模式能够怎么实现呢？

其实有一个很快的方式，咱们可使用invert和hue-rotate两个CSS3过滤器来实现。

filter: invert() — 是从0到1的刻度，1是从白变黑。 filter: hue-rotate() — 用于改变你元素的颜色，同时或多或少保持本来相同的色系。这个属性的值能够从0deg到360deg。

在咱们页面的body标签上添加这两个属性，咱们就能够快速尝试把咱们的网站变成"黑暗模式"。这里须要注意的是，若是body和html上没有设置background背景颜色，这个过滤就会不起效了哦。

CSS的代码以下：

html {
  background: #fff;
}

body {
  background: #fff;
  filter: invert(1) hue-rotate(270deg);
}
复制代码

实现效果这里咱们会发现图片的颜色会受影响，并非很美观，使用css过滤器是没法完美切换黑暗模式的。不过使用JavaScript辅助就能够完美的切换黑暗模式。

最近出了一个JavaScript辅助插件叫Darkmode.js。

🌓 Darkmode.js

其实Darkmode.js运用的也是css里面的一个特性叫mix-blend-mode — “CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合“。加上Javascript的辅助判断哪些页面上的元素须要黑化的，哪些是不须要黑化的。就会想咱们以前那种作法，致使其余不须要黑化的元素，好比图片，受到影响致使颜色出现问题。

使用Darkmode.js很是简单，只要在脚本里面添加如下代码就能够立刻加入一个插件，

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script> // 这些是这个插件的可配置项： var options = { bottom: "32px", // 定位底部距离 - 默认: '32px' right: "32px", // 定位右边距离 - 默认: '32px' left: "unset", // 定位左边距离 - 默认: 'unset' time: "0.5s", // 默认动画时间: '0.3s' mixColor: "#fff", // 须要改变的颜色 - 默认: '#fff' backgroundColor: "#fff", // 背景颜色 - 默认: '#fff' buttonColorDark: "#262728", // 黑暗模式下按钮颜色 - 默认: '#100f2c' buttonColorLight: "#fff", // 日间模式下按钮颜色 - 默认: '#fff' saveInCookies: true, // 是否在cookie保存当前模式 - 默认: true, label: "🌓", // 切换模式按钮图标 - 默认: '' autoMatchOsTheme: true // 是否自动根据系统适应模式 - 默认: true }; let darkmode = new Darkmode(options); darkmode.showWidget(); </script>
复制代码

若是你不但愿用这个插件的默认按钮，你能够在你的JavaScript代码中自主控制。咱们能够经过.toggle()方法来切换模式，同时可使用.isActivated()来检测是否已经进入黑暗模式。

const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated()) // 若是已经进入黑暗模式会返回 true
复制代码

🌟知识总结

filter: invert() — 能够把页面从白变黑，也能够从黑变白。

filter: hue-rotate() — 用于改变你元素的颜色，同时或多或少保持本来相同的色系。

Darkmode.js — 瞬间实现黑暗模式。

Invert方式黑暗模式：预览实际效果｜ GitHub源码｜喜欢的童鞋 🌟star 一下谢谢 Darkmode.js黑暗模式：预览实际效果｜ GitHub源码｜喜欢的童鞋 🌟star 一下谢谢

4. 自定义列表符号

ul，li的无序列表有默认的符号·，可是在不少状况下咱们但愿能够给这个符号加入本身的样式和颜色，甚至是换成自定义的符号。默认的符号咱们是没法作任何的样式处理，并且默认的符号在CSS属性里面只有几个选择可使用，不少状况下都是没法知足咱们的设计。

其实自定义无序列表符号不难，咱们只须要使用伪元素::before加content属性就能够实现。

在我这个例子里面我作了两个任务列表，一个是待处理任务，一个是已完成任务，各自给了不同的列表符号和颜色。

实现原理

1、首先咱们禁用了ul的默认符号样式list-style: none

2、在li的:before伪元素上给予content内容值，待处理任务使用🗹，已完成任务li.completed:before使用✔

3、为了展现效果更加好看我分别给了li和li .completed两个不一样的颜色

上代码看看是怎么实现的吧：

HTML

<div>
  <h2>待处理</h2>
  <ul>
    <li>待办任务1</li>
    <li>待办任务2</li>
    <li>待办任务3</li>
    <li>待办任务4</li>
    <li>待办任务5</li>
  </ul>
</div>
<div>
  <h2>已完成</h2>
  <ul>
    <li class="completed">完成任务1</li>
    <li class="completed">完成任务2</li>
    <li class="completed">完成任务3</li>
  </ul>
</div>
复制代码

CSS

ul {
  list-style: none;
  color: #fff;
  font-size: 20px;
  border: 3px solid #000;
  padding: 1rem 2rem;
  min-height: 200px;
  margin: 15px 2rem 0 0;
  background: #323232;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  border-radius: 8px;
}

li {
  padding: 0.3rem 0;
}

li::before {
  content: "🗹 ";
  color: aqua;
}

li.completed::before {
  content: "✔ ";
  text-decoration: none;
  color: greenyellow;
}

li.completed {
  text-decoration: line-through;
  color: #bdbdbd;
}
复制代码

::before和::after伪元素加content属性能够用来作不少特殊的效果，也是当代前端排版比较经常使用的“魔法”。说到伪元素的使用，我再给你们说一个比较经常使用的使用场景。

在管理后台或者是文章展现中，咱们常常能够见到的“面包屑导航”也是用伪元素来插入每一个目录中间的符号的。

实现逻辑

1、这个导航含有3个a标签，首先给每一个a标签加入一个伪元素::after，而后在content属性插入 /符号。

2、而后使用a:first-child，这个伪类会选择到第一个a标签，而后使用content属性加入»符号。

3、由于咱们第一步在每一个a标签的后面插入了 /符号, 因此咱们须要在最后一个a标签清除掉。这里咱们使用:last-child选择到最后一个a标签，而后用content: " "属性把伪类的内容清楚掉。

HTML

<div class="breadcrumb">
  <a>三钻</a>
  <a>前端</a>
  <a>教程</a>
</div>
复制代码

CSS

.breadcrumb {
  font-size: 1.6rem;
  color: #fff;
}
.breadcrumb a:first-child {
  color: #82fcfd;
}
.breadcrumb a:first-child::before {
  content: " » ";
}
.breadcrumb a::after {
  content: " /";
  color: #ef6eae;
}
.breadcrumb a:last-child::after {
  content: "";
}
复制代码

🌟知识总结

::before | ::after — 伪元素用于向某些选择器添加特殊的效果。

content — CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。

:first-child — CSS伪类表示在一组兄弟元素中的第一个元素。

:last-child — CSS伪类表明父元素的最后一个子元素。

自定义无序列表：预览实际效果 ｜ GitHub源码 ｜喜欢的童鞋 🌟star 一下谢谢 面包屑导航：预览实际效果 ｜ GitHub源码 ｜喜欢的童鞋 🌟star 一下谢谢

5. 图片视差效果

这个超级炫酷的效果在官网中很是的受欢迎，这种效果能够给用户带来视觉冲击，也给咱们的网站带来了活力。普通的网页图片会跟随着网页一块儿滑动，可是视觉差效果图就会固定在底部，只有图片所在的窗口上的元素会移动。

仅使用CSS

对你没有看错，这个效果只须要用到CSS就能轻易的实现！咱们只要使用一个CSS背景图的属性background-attachment: fixed，这个特性会把背景相对于视口固定。即便一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

实现理论：

1、在含有图片的元素中加入background: url()和background-size: cover（第二个属性适用于定义图片为封面，可让图片大小自动适应，在很大的屏幕也会显示完整的图片）

2、而后附加固定背景图的属性background-attachment: fixed

3、最后给这个元素加入一个高度height: 100%或者任意的高度height: 400px

就那么简单哦！不用怀疑，立刻上代码，你们均可以本身去试试哦！

HTML

<div class="wrapper">
   <div class="parallax-img"></div>
   <p>这里填写一堆文字就能够了，尽可能多一点哦</p>
</div>
复制代码

CSS

.wrapper {
  height: 100wh;
}
.parallax-img {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {
  font-size: 20px;
  padding: 1.5rem 3rem;
  min-height: 1000px; // 当你的文字内容不够，也能撑出足够的高度来看到效果，固然若是你文字足够多，就不须要了
}
复制代码

若是想作到我动图里面同样的效果，或者想看是怎么实现的，能够查看下面总结里面的“预览实际效果”或者看“GitHub源码”。

🌟知识总结

background-attachment: fixed — 把背景相对于视口固定。即便一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

background-size: cover — 可让图片大小自动适应，在很大的屏幕也会显示完整的图片。

预览实际效果 ｜ GitHub源码 ｜喜欢的童鞋 🌟star 一下谢谢

使用CSS + JavaScript

有些童鞋可能没有被这个震撼到或者仍是以为不够刺激。那咱们再来一个高级例子，上面的例子在滑动的时候图片是固定死的。若是咱们加上JavaScript的助力，咱们可让窗口的图片缓慢的跟随这个页面滑动，使得效果更有动力和更有冲击感。

实现理论 首先讲一下排版，由于咱们须要在咱们滑动页面的时候使用JavaScript偏移图片，因此咱们须要给图片一个CSS属性让咱们可让图片能够根据一个速度来往上或者往下移动。这个例子里面咱们让全部图片包裹在一个div里面，class名为block。这个div给予相对定位属性position: relative，这个时候咱们就能够在里面加入图片，而后让图片绝对定位position: absolute在这个div盒子里面。

可是图片是可能很大的，咱们须要把图片不超出咱们定义个盒子，因此咱们的div同时也给予了overflow: hidden和一个高度height: 100%。这样图片超出div盒子就会被隐藏。

布局代码以下：

<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax" />
  <h2>视差速度 -1</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax" />
  <h2>视差速度 1</h2>
</div>
复制代码

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Amatic SC', cursive;
}
.block{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 16px;
}
.block h2{
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10vw;
  color: white;
  font-weight: 400;
}
.img-parallax {
  width: 100vmax;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  pointer-events: none
}
复制代码

实现这个布局，在你滑动的时候，图片是不会移动的。由于最后一步就是加入JavaScript的辅助，让图片活起来。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script> // 循环获取每个图片元素 $(".img-parallax").each(function () { var img = $(this); var imgParent = $(this).parent(); function parallaxImg() { var speed = img.data("speed"); // 获取每张图片设置了的偏移速度 var imgY = imgParent.offset().top; // 获取图片盒子所在的Y位置 var winY = $(this).scrollTop(); // 获取当前滑动到的位置 var winH = $(this).height(); // 获取浏览器窗口高度 var parentH = imgParent.innerHeight(); // 获取图片盒子的内高度 // 浏览器窗口底部的所在位置 var winBottom = winY + winH; // 当前图片是否进入浏览器窗口 if (winBottom > imgY && winY < imgY + parentH) { // 运算图片须要开始移动的位置 var imgBottom = (winBottom - imgY) * speed; // 运算出图片须要中止移动的位置 var imgTop = winH + parentH; // 获取从开始移动到结束移动的%（根据开始与结束像素 + 移动速度） var imgPercent = (imgBottom / imgTop) * 100 + (50 - speed * 50); } img.css({ top: imgPercent + "%", transform: "translate(-50%, -" + imgPercent + "%)", }); } $(document).on({ scroll: function () { parallaxImg(); }, ready: function () { parallaxImg(); }, }); }); </script>
复制代码

🌟知识总结

position: relative — 相对定位。

position: absolute — 绝对定位。

overflow: hidden — 若是须要，内容将被剪裁以适合填充框。不提供滚动条。

预览实际效果 ｜ GitHub源码 ｜喜欢的童鞋 🌟star 一下谢谢

6. 裁剪图像的动画

在有CSS3以前裁剪图片实现也是很有难度的。如今咱们有了两个很是方便简单的CSS3属性能够实现裁剪，那就是object-fit和object-position, 这两个属性可让咱们改变图片的大小，可是不影响图片的长宽比。

固然咱们可使用图片处理工具或者使用JavaScript等插件来实现图片裁剪功能。可是由于有了CSS3的属性，咱们不仅能够裁剪，咱们还能够用裁剪的属性来作图片的动态效果。

为了让咱们的例子更加简单，咱们这里使用了<input type="checkbox">复选框元素，这样咱们就可使用:checked的伪元素来触发启动效果。因此在例子里面咱们彻底不须要JavaScript的协助。

实现原理：

1、首先给予图片一个宽高height: 1080px，width: 1920px。

2、而后用CSS选择器，锁定当input被选中后img标签的样式变化。当被选中时，给图片设定一个新的宽高，这里咱们给宽高各自500像素：width: 500px，height: 500px。

3、而后咱们加上了过渡效果和时间让图片改变宽高时有动画过渡效果：transition: width 2s, height 4s;。

4、最后加上object-fit: cover和object-position: left-top这两个属性来保持图片的宽高比例，这样就大功告成了！

咱们来看看完成的代码：

勾选裁剪图片 <input type="checkbox" />
<br />
<img src="https://img-blog.csdnimg.cn/2020032122230564.png" alt="Random" />
复制代码

input {
  transform: scale(1.5); /* 只是用来放大复选框大小 */
  margin: 10px 5px;
  color: #fff;
}

img {
  width: 1920px;
  height: 1080px;
  transition: 0s;
}

/* css选择器锁定复选框被选中时的状态 */
input:checked + br + img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  object-position: left-top;
  transition: width 2s, height 4s;
}
复制代码

🌟知识总结

object-fit — CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度肯定的框。

object-position — 用来切换被替换元素的内容对象在元素框内的对齐方式。

transition — 过渡能够为一个元素在不一样状态之间切换的时候定义不一样的过渡效果。

预览实际效果 ｜ GitHub源码 ｜喜欢的童鞋 🌟star 一下谢谢

7. 混合模式（Blend）

若是有使用过Photoshop的同窗对blend混合模式应该是很是熟悉了，咱们都知道混合模式是很是强大，也是p图时很是经常使用的一个功能。可是大家有没有想象过能够在浏览器的CSS中直接使用呢？对咱们不须要设计师给咱们作图，咱们前端也能够实现混合模式了。

在CSS中咱们不仅能够对background背景加入混合模式，咱们能够对任何一个元素的自带背景加入混合模式，让你能够作出不少以前没有想过的效果和排版。

往一个元素加入混合模式，咱们只须要使用到一个CSS属性mix-blend-mode便可。

简单实现原理：

首先咱们只须要加一个h1标题标签

<h1>混合模式：颜色减淡</h1>
复制代码

而后咱们给h1标签加入mix-blend-mode中的颜色减弱模式color-dodge，可是要注意的是咱们须要给body和html加入背景颜色background: white，要不你会发现这个效果会无效。由于h1咱们没有给颜色，会自动往上级继承，而且混合模式是针对背景颜色的过滤，因此body和html须要有背景颜色才行。

h1 {
   mix-blend-mode: color-dodge;
   font-family: yahei;
   font-size: 5rem;
   text-align: center;
   margin: 0; 
   padding: 20vh 200px;
   color: #D1956C;
 }

 html,
 body {
   margin: 0;
   background-color: white;
 }

 body {

   background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
   overflow: hidden;
 }
复制代码

换换背景图和h1标签的字体颜色就能够弄出各类不一样的特效了。

🌟知识总结

mix-blend-mode — CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

预览实际效果 ｜ GitHub源码 ｜喜欢的童鞋 🌟star 一下谢谢

8. 瀑布流布局

CSS Grid和Flexbox让咱们能够更简便，更容易和更快的实现各式各样的响应布局，而且让咱们快捷方便的在布局中实现横向剧中和竖向剧中。可是回想一下之前是颇为困难的。

虽然这些新出的布局方式可让咱们解决不少之前的布局难题，可是像瀑布流布局这种，就没法用它们简单来实现了。由于瀑布流通常来讲都是宽度一致，可是高度是根据图片自适应的。而且图片的位置也是根据在上方图片的位置而定的。

其实最好实现瀑布流布局的办法就是用CSS的列属性套件，这套属性大多数都是用于排版杂志中的文本列。可是用于布局瀑布流也是特别实用哦。由于之前须要实现瀑布流，就必须有JavaScript的辅助来计算图片高度而后决定每张图片的定位和位置，因此如今有了列属性就可使用纯CSS实现了。

实现原理：

实现这个布局，首选咱们须要把全部的内容先包裹在一个div元素里面，而后给这个元素column-width和column-gap属性。

而后，为了防止任何元素被分割到两个列之间，将column-break-inside: avoid添加到各个元素中。

神奇的效果就完美实现了，零JavaScript。

咱们来看看代码：

<div class="columns">
  <figure>
    <img src="https://source.unsplash.com/random?city" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?night" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?developer" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?building" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?water" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?coding" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?stars" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?forest" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?girls" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?working" alt="" />
  </figure>
</div>
复制代码

.columns {
  column-width: 320px;
  column-gap: 15px;
  width: 90%;
  max-width: 1100px;
  margin: 50px auto;
}
.columns figure {
  display: inline-block;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  column-break-inside: avoid;
  border-radius: 8px;
}
.columns figure img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 8px;
}
复制代码

🌟知识总结

column-width — CSS属性建议一个最佳列宽。列宽是在添加另外一列以前列将成为最大宽度。

column-width — 该 CSS 属性用来设置元素列之间的间隔 (gutter) 大小。

column-break-inside — 设置或检索对象内部是否断。

预览实际效果 ｜ GitHub源码 ｜喜欢的童鞋 🌟star 一下谢谢

总结

我但愿这8个前端小技巧和特效对你们有帮助，或多或少有吸取一点新的前端知识。这篇文章提到的内容，其实不少都是值得深挖和学习的。有一些例子我作的比较简单，可是实际上是有无限的可能性。喜欢前端的童鞋们，让咱们继续在前端领域中一块儿深挖，让咱们的热爱无限的燃烧起来吧！

在最后我想给你们讲一下我对前端的热爱和态度。

回想前端这几年，发展真的是日新月异，从前端排版，HTML5+CSS3作H5页面，到前端组件化，各类UI框架满天飞。

一开始我随着热潮用起了UI框架，起初以为特别方便，来一个新的项目就直接上一个UI框架，研发速度也很是快。可是长此以往就以为前端开发变成了处理数据，对接接口，实现交互。

某天在阅览国外的一些前端设计和框架的时候，我忽然发现国内多数的前端开发者都再也不怎么使用CSS3作出一些很好玩的布局和特效了。如今市面上的系统和页面都是千篇一概，广泛都是用一些知名的UI框架搭建系统和APP，基本本身动手去排版已经少之又少。前端已再也不是之前的前端，缺乏了灵魂。

可是咱们回想一下，咱们刚刚开始学习前端的时候，让咱们最有成就感，以为前端特别有意思的那种感受。就是那种让咱们以为神乎奇迹，难以想象的布局，特效和交互。那种感受本身成功实现了很优美，很炫酷的页面和特效的感受，让咱们越作越来劲，越作越是兴奋。

可是在某些公司，研发部都是要求快速开发，UI设计部门也是受到时间的控制和限制，因此逐步走进了UI框架的限制之中。都是围绕这一些UI框架来设计和开发系统和应用。

做为一名热爱前端的开发者，我仍是坚持在绝大多数的项目中，本身排版和实现页面交互特效。而后使用UI框架做为辅助，主要是用来减轻一些小组件和经常使用组建的快速实现。（能够说我是比较追求完美和外貌协会的程序员 😂）

好文推荐

🔥《VSCode经常使用快捷键大全｜VSCode高级玩家宝典之第一篇》 --- 因此对于个好的程序员，一个好的代码编辑器能够起到很大的做用，在开发的过程当中能够给咱们带来不少便利、帮助、效率和影响。甚至一个好的编辑器能够给开发者平常编程中带来更高的喜悦感。
🔥《写给想学和在学编程的大家，学习编程的7个好处》 --- 其实选择学编程是能改变人生的。可能起初不少人学编程，报了一个编程培训班，为了就是能拿到更高的工资或者有更好的工做环境。最后坚持着坚持着，最后会发现编程还会给咱们带来不少我的能力和技能上的提高。
🔥《5大法则助你成为更出色的开发者》 --- 这篇文章传授5大法则助咱们成为更出色的开发者，在众多开发者中脱颖而出的诀窍，也会在咱们的技术职业生涯中给咱们不少的帮助。
🔥《用“易于改编”原则，提高编程水平，写出更好的代码》 --- 不管新手仍是资深开发者都会常常问一个问题，“怎么写好的代码？”，要知道怎么写好代码，首先咱们要知道怎么样才是好的代码。要有明确的目标，才能知道如何达成目标。在《程序员修炼之道》中提到的“ETC Principle” -- 易于改编原则。这个原则看似简单，可是咱们越是深刻思考越是以为“简约而不简单”。

前端必看的8个HTML+CSS技巧

1. 固定底部内容

2. 悬停放大图片特效

3. 瞬间黑暗模式

🌓 Darkmode.js

4. 自定义列表符号

5. 图片视差效果

仅使用CSS

使用CSS + JavaScript

6. 裁剪图像的动画

7. 混合模式（Blend）

8. 瀑布流布局

总结

好文推荐