携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 33 天，点击查看活动详情
在上一节，我们通过 CSS 中的两个伪类 &::before 和 &::after 实现了一个六边形效果，并且使用 CSS3 中的 animation 属性实现了一个渐变进度条的效果，这一节我们继续来学习 animation ，让我们开始吧！
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>
<h1 class="title">
<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>
</h1>
</body>
</html>
html 的代码很简单，接下来我们再来看看 CSS 的代码如何编写，代码如下：
*{ margin: 0;padding: 0;}
html, body {width: 100%; height: 100%;}
body {
background-color: #ff5757;
overflow: hidden;
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
span {
color: #262626;
background-color: #fff;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
text-transform: uppercase;
box-shadow: 0 0 5px #ccc, inset 0 0 3px rgba(0, 0, 0, .2);
animation: animate .5s infinite;
&:nth-child(1) {
animation-delay: .1s;
}
&:nth-child(2) {
animation-delay: .2s;
}
&:nth-child(3) {
animation-delay: .3s;
}
&:nth-child(4) {
animation-delay: .4s;
}
&:nth-child(5) {
animation-delay: .5s;
}
&:nth-child(6) {
animation-delay: .6s;
}
&:nth-child(7) {
animation-delay: .7s;
}
&:nth-child(8) {
animation-delay: .8s;
}
&:nth-child(9) {
animation-delay: .9s;
}
&:nth-child(10) {
animation-delay: 1s;
}
}
}
@keyframes animate {
0% {
transform: translateY(0);
box-shadow: 0 0 5px #ccc, inset 0 0 3px rgba(0, 0, 0, .2), 0 15px 15px rgba(0, 0, 0, 0);
}
50% {
transform: translateY(-30px);
box-shadow: 0 0 5px #ccc, inset 0 0 3px rgba(0, 0, 0, .2), 0 15px 15px rgba(0, 0, 0, 0.6);
}
100% {
transform: translateY(0);
box-shadow: 0 0 5px #ccc, inset 0 0 3px rgba(0, 0, 0, .2), 0 15px 15px rgba(0, 0, 0, 0);
}
}
其中比较关键的主要是控制每一个 span 的动画延迟执行时间，只有单独控制每一个 span 的执行时间，才能让动画有规律的跳动，否则就会造成所有的 span 一起上下跳动了，具体的代码可以在这里进行查看
弹跳小球运动效果
接下来我们再来看一下 CSS3 实现 弹跳小球运动效果 的案例，我们还是先来看一下最终实现的效果，如下图：
按照惯例，我们先来实现一下基础的 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>
<div class="center">
<span class="ball"></span>
<span class="shadow"></span>
</div>
</body>
</html>
在这个效果中，主要也是通过 CSS3 中的 animation 属性来完成动画的制作，CSS 代码如下：
*{ margin: 0;padding: 0;}
html, body {width: 100%; height: 100%;}
body {
background-color: #c2b5fa;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.center {
position: relative;
top: 100px;
.ball {
display: block;
width: 50px;
border-top: 25px solid #b04eff;
border-bottom: 25px solid #8300ff;
border-radius: 50%;
animation: animateBall 1s infinite linear;
}
.shadow {
position: absolute;
top: 40px;
left: 0px;
width: 50px;
height: 10px;
border-radius: 50%;
background-color: #6643b0;
opacity: .8;
animation: animateShadow 1s infinite linear;
}
}
@keyframes animateBall {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-200px) rotate(180deg);
}
100% {
transform: translateY(0) rotate(360deg);
}
}
@keyframes animateShadow {
0% {
transform: scale(1);
opacity: .8;
}
50% {
transform: scale(.4);
opacity: .1;
}
100% {
transform: scale(1);
opacity: .8;
}
}
最终的实现效果可以在这里查看代码
看了上述的代码，是不是很简单呢？快快动手实现一下吧！
最后
灵活运用 html + css 能够实现很多很有意思的效果，主要还是需要对 css3 中新增的一些属性有一定的了解，这样才能让我们不借助其它工具就实现相关的动画效果。
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家
