『 CSS实战』CSS3 实现一些好玩的效果(2)

最新推荐文章于 2025-09-25 10:35:57 发布

原创最新推荐文章于 2025-09-25 10:35:57 发布 · 392 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

本文详细介绍了如何使用CSS3实现六边形效果和渐变进度条，通过HTML骨架和CSS样式，展示了利用伪类旋转及动画创建视觉效果的步骤，适合前端开发者进阶学习。

六边形效果

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3 - 六边形</title>
</head>
<body><section class="hexagon"><span></span><span></span><span></span><span></span><span></span><span></span></section><h1>css3 hexagon</h1>
</body>
</html>

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;}}
}

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

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

渐变进度条效果

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3 - 渐变进度条</title>
</head>
<body><section class="container"><div class="loading-bar"></div></section><h1>CSS3 Loading</h1>
</body>
</html>

进度条简单来说就是有两层，一层是外面的整体宽度，另外一层就是里面的动态进度，这个效果完全是通过 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;}
}

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

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

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