likes
comments
collection
share

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

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

在上一节中，我们通过 CSS3 中的 transform-style 属性实现了两个 3D 的效果，这一节咱们继续来盘一下 CSS3 中的 animation 属性，实现几个有意思的效果，让我们开始吧！

水波浪球体动画效果

在日常的开发中，当页面在加载时，我们一般都会添加一个 loading 效果，避免让用户长时间处于一个白屏的状态。今天我们就来实现一个 水波浪球体动画效果，用于日常的 loading 效果是非常不错的。首先我们还是先来看一下最终的实现效果，如下图所示：

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

通过一个水波的效果来作为页面加载的状态，给用户一个心理预期，不至于让用户绝对网站崩溃或者不能用了。

要实现这个效果，我们首先还是需要先添加相应的 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 - 3D水波浪球体动画效果</title>
</head>
<body>
    <section class="circle">
        <span class="wave"></span>
    </section>
</body>
</html>

html 代码相对来说比较简单，页面中的元素也只有两层，那么我们要如何通过这简单的两层元素实现一个水波效果呢？下面一起来看一下 css 的具体实现，代码如下：

*{ margin: 0;padding: 0;list-style: none;}
html, body {width: 100%; height: 100%;}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;

  .circle {
    width: 150px;
    height: 150px;
    border: 5px solid #fff;
    box-shadow: 0 0 0 5px #4973ff;
    border-radius: 50%;
    overflow: hidden;

    .wave {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #4973ff;
      border-radius: 50%;
      box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);

      &::after, &::before {
        content: '';
        position: absolute;
        width: 200px;
        height: 200px;
        top: 0;
        left: 50%;
        transform: translate(-50%, -75%) rotate(0);
        background-color: #000;
      }

      &::before {
        border-radius: 45%;
        background-color: rgba(255, 255, 255, 1);
        animation: animateWave 5s linear infinite;
      }

      &::after {
        border-radius: 40%;
        background-color: rgba(255, 255, 255, .5);
        animation: animateWave 5s linear infinite;
      }
    }
  }
}

@keyframes animateWave {
  0% {
    transform: translate(-50%, -75%) rotate(0); 
  }
  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}

以上样式通过 less 编写，编译后会自动转换为 css 代码。在这个效果中，主要是通过设置内层元素的伪类，将伪类覆盖在父级元素上，然后通过 animation 属性给伪类元素添加相应的动画，其中最重要的一点是需要设置伪类的偏移和旋转角度，即 transform: translate(-50%, -75%) rotate(0)，通过不断变化这两个数值，就实现了这个 水波浪球体动画效果。

最终的代码实现可以在这里进行查看

阴阳八卦阵

在上面我们通过 CSS3 中的 animation 属性和 transform 属性制作了一个 水波浪球体动画 的效果，下面我们继续来实现一个更有趣的 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 - 3D立体阴阳无极八卦阵</title>
</head>
<body>
    <section class="container">
        <span class="shape"></span>
    </section>
</body>
</html>

这个效果的 html 代码跟上面的一样，都比较简单，最终实现还是通过 css 来完成的，下面我们一起来看 css 的代码，如下：

*{ margin: 0;padding: 0;list-style: none;}
html, body {width: 100%; height: 100%;}

body {
  display: grid;
  justify-content: center;
  align-items: center;
  background-color: #fff;

  .container {
    background-color: #000;
    border-radius: 50%;
    border: 10px solid #000;
    transform: perspective(800px) rotateX(45deg);
    box-shadow: 0 10px 0 #383838, 0 10px 15px rgba(0, 0, 0, .5);
    position: relative;
    top: -30px;

    .shape {
      display: block;
      width: 200px;
      height: 100px;
      border-bottom: 100px solid #fff;
      border-radius: 50%;
      position: relative;
      animation: animate infinite linear 3s;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 20px;
        height: 20px;
        background-color: #000;
        border: 40px solid #fff;
        border-radius: 50%;
      }

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border: 40px solid #000;
        border-radius: 50%;
      }
    }
  }
}

@keyframes animate {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0);
  }
}

这个效果中，主要也是运用 CSS3 中的 perspective 属性，将视口往后拉伸了 800px，因此看起来像睡倒在页面中，然后通过内层元素的伪类实现阴阳无极，最后再使用 animation 属性是阴阳无极转动起来，最终的实现代码可以在这里进行查看『 CSS实战』CSS3 实现一些好玩的效果(5)

怎么样，上面的实现是不是很简单呢？快快动手实现一下吧！

最后

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

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

往期回顾

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

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

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

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

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