六边形效果

要实现任何一个效果，都需要先有 html 的骨架，基础的 html 代码如下:

css3 hexagon

 
1
2
3
4
5
6
7

html 的基本骨架搭建好以后，我们需要继续来编写 css ，代码如下:

*{margin: 0;padding: 0;
}

body {background-color: #000;
}

h1 {width: 100%;color: #fff;text-align: center;position: absolute;top: 75%;text-transform: uppercase;font-family: Arial, Helvetica, sans-serif;letter-spacing: 3px;font-weight: normal;text-shadow: 0 0 10px rgba(178,77,255, 0.8);
}

.hexagon {width: 200px;height: 115px;border: 1px solid #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);box-shadow: 0 0 300px rgba(255,83,77,.5);&::before, &::after {content: "";width: 100%;height: 100%;position: absolute;border: 1px solid #fff;}&::before {transform: rotate(60deg);}&::after {transform: rotate(-60deg);}background-color: rgba(177, 77, 255, .5);box-sizing: border-box;&::before, &::after {background-color: rgba(177, 77, 255, .5);border: 1px solid #fff;box-sizing: border-box;}> span {position: absolute;width: 10px;height: 10px;border-radius: 50%;background-color: #fff;z-index: 2;&:nth-child(1) {left: -4px;top: -4px;}&:nth-child(2) {right: -4px;top: -4px;}&:nth-child(3) {left: -4px;bottom: -4px;}&:nth-child(4) {right: -4px;bottom: -4px;}&:nth-child(5) {left: calc(50% - 5px);bottom: -62px;}&:nth-child(6) {left: calc(50% - 5px);top: -62px;}}
} 
1
2
3
4
5
6
7
8
9
10
11

最终完成的效果如下图所示：

在这个例子中，我们主要是使用了两个伪类，一个 after ，一个 before，通过设置元素的伪类来旋转一定的角度，然后添加上背景色就可以了，是不是很简单呢？代码可以在这里进行查看

渐变进度条效果

在上面的例子中我们通过使用 CSS 的伪类和 CSS3 中的旋转属性完成了一个 六边形效果，接下来我们再来实现一个 渐变进度条效果。我们可以先看一下具体的效果，如下图所示：

首先还是需要先编写对于的 html ，将基础的骨架搭建好才能开始编写 css 内容，html 相关的代码如下:

CSS3 Loading

 
1
2
3
4
5
6
7

进度条简单来说就是有两层，一层是外面的整体宽度，另外一层就是里面的动态进度，这个效果完全是通过 css 实现的，css 代码如下：

*{margin: 0;padding: 0;
}
html,body{width: 100%;height: 100%;
}
body {animation: body-animate infinite 5s;h1{width: 100%;text-align: center;color: #fff;text-transform: uppercase;font-family: Arial, Helvetica, sans-serif;font-size: 3em;letter-spacing: 3px;}
}
.container {width: 50%;background-color: #fff;margin: 280px auto 100px;padding: 20px 40px;border-radius: 4px;box-shadow: 0 10px 20px rgba(0,0,0,.5);.loading-bar {display: inline-block;position: relative;width: 100%;height: 10px;background-color: #f1f1f1;box-shadow: inset 0 0 5px rgba(0,0,0,.2);border-radius: 5px;overflow: hidden;&::after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 5px;box-shadow: inset 0 0 5px rgba(0,0,0,.2);animation: load-animate infinite 5s;}}
}

@keyframes load-animate {0% {width: 0%;background-color: #ff6369;}70% {width: 70%;background-color: #ffe669;}100% {width: 100%;background-color: #d6e663;}
}

@keyframes body-animate {0% {background-color: #ff6369;}70% {background-color: #ffe669;}100% {background-color: #d6e663;}
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这个效果中，主要是通过 CSS3 中的 animation 属性来完成动画的制作，而背景色也跟随进度条的颜色而变化，其实也是给 body 添加了一个 CSS3 的动画。

最终的实现效果可以在这里查看代码

看了上述的代码，是不是很简单呢？快快动手实现一下吧！

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享