likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 20

在 CSS2 的时代，我们要实现一些炫酷的效果，一般都只能用图片或者flash，随着 CSS3 的兴起，以及浏览器的跟进，我们能够在现代的浏览器中直接运行由 CSS3 编写的效果，今天我们就一起来通过 CSS3 实现一些好玩又有趣的效果，让我们一起开始吧！

3D 文字效果

我们要实现一个 3D 文字效果，首先要做的当然是在 html 中将基本的骨架搭建好。我们都知道前端开发的三驾马车分别是：html、css 和 js，因此要完成一个效果，一般都是需要 html 和 css 进行配合，有些时候也会用到 js ，这里先不说 js 。让我们一起来先看一下具体的效果吧，如下图：

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

我们要实现这样的效果也很简单，只需要在 html 中添加一个对应的标签，包含相应的文字，然后添加相关的 css 即可，具体的代码如下：

<!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 - 3d 文字效果</title>
</head>
<body>
    <h1>css3 3d</h1>
</body>
</html>

我们在页面中新增了一个 h1 标签，然后在里面添加相关的文字，基本的架子搭建好了，接下来需要编写 css 代码了，如下：

h1 {
    margin: 20% auto;
    text-align: center;
    font-size: 6rem;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    transition: .1s;
    cursor: pointer;
}
h1:hover {
    text-shadow:
        0 1px 0 #ccc,
        0 1px 15px rgba(0, 0, 0, .2),
        0 2px 0 #ccc,
        0 3px 0 #ccc,
        0 4px 0 #ccc,
        0 5px 0 #ccc,
        0 6px 0 #ccc,
        0 7px 0 #ccc,
        0 8px 0 #ccc,
        0 9px 0 #ccc,
        0 10px 0 #ccc,
        0 11px 0 #ccc,
        0 12px 0 #ccc,
        0 13px 30px rgba(0, 0, 0, .5);
}

上面的代码中，我们主要关注的一个属性就是 text-shadow，这个属性是 CSS3 中添加的，主要用于给文字添加阴影，它的参数有四个，分别是：x轴宽度，y轴宽度，阴影的宽度以及阴影的颜色，灵活运用这个属性可以实现很多有趣有好玩的效果。

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

折叠文字效果

在上面我们通过 CSS3 中的 text-shadow 属性实现了一个 3D 的文字效果，下面我们再来实现一个文字折叠的效果，这个效果可以放在我们平时的页面中，也是很不错的，具体的效果如下图所示：

我们需要在页面中添加相关的 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="text">
        <span>H</span>
        <span>T</span>
        <span>M</span>
        <span>L</span>
        <span>A</span>
        <span>N</span>
        <span>D</span>
        <span>C</span>
        <span>S</span>
        <span>S</span>
    </section>
    <h1>html and css</h1>
</body>
</html>

然后我们再一起来看一下具体的 css 是如何实现的，代码如下：

*{
  margin: 0;
  padding: 0;
}

body {
  background-color: #ff90b3;
}

.text {
  width: 600px;
  margin: 100px auto 60px;
  text-align: center;
  transition: .5s;
  display: flex;
  span {
    background-color: #fff;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #A0A0A0;
    font-size: 40px;
    transition: .3s;
  }
  &:hover {
    cursor: pointer;
    span {
      &:nth-child(odd) {
        transform: skewY(-20deg);
        color: #b5b5b5;
        box-shadow: 0 60px 20px rgba(0, 0, 0, .1);
      }
      &:nth-child(even) {
        transform: skewY(20deg);
        color: #b5b5b5;
        box-shadow: 0 60px 20px rgba(0, 0, 0, .1);
      }
    }
  }
}
h1 {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

上述的代码使用的是 less，经过编译后最终还是会转换为 css，我们只需要注意给 span 标签添加的 transform: skewY(-20deg); 即可，主要是通过倾斜这个属性来实现的。

最终的实现效果可以在这里查看『 CSS实战』CSS3 实现一些好玩的效果(1)

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

最后

灵活运用 html + css 能够实现很多很有意思的效果，主要还是需要对 css3 中新增的一些属性有一定的了解，这样才能让我们不借助其它工具就实现相关的动画效果。

最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家

转载自:https://juejin.cn/post/7136558248898871333
评论
请登录