这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战

前言

我们以前传统的动画可以是用js写的多一点，但是随之css3的出现，对动画的开发也比js简单，代码量也相对的会少一点。那我们今天就搞几个动画看看到底有多神奇。

用到的知识点

伪元素：::before和::after
transform
animation
伪类选择器nth-child
@keyframes
skew 2D转换

3D文字

简单来说就是实现一个可以翻转的文字，悬浮字体，字体会产生一种感觉像立体的效果。其实是使用了skew2D转换加上一个rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

效果图

3d文字.gif

我们先来分析分析。

我们可以看到文字有两种，一个是黑色不动的，另一个是可以动的白色。那我们是写两份一样的还是怎么样呢？第二个就是翻转位置,我们这里是向左翻转的，这个也简单，transform-origin就能改变翻转位置的中心点。

其实不用这么复杂，这么我们直接使用伪元素就好了，伪元素里的content不就刚好可以自定义内容嘛，再配合一个自定义属性，方便快捷，我们只需写一份文字就搞定。

布局

自定义属性：data-xxx

<div class="text-box">
    <span data-text="A">A</span>
    <span data-text="B">B</span>
    <span data-text="C">C</span>
    <span data-text="D">D</span>
</div>

后面我们只需要对text-box下的span做处理即可

.text-box{
    margin-top: 100px;
    text-align: center;
    line-height: 1;
    font-size: 100px;
}
.text-box span{
    display: inline-block;
    position: relative;
}
.text-box span::before,.text-box span::after{
    /* attr(data-text)获取data-自定义标签中数据 */
    content: attr(data-text);
    position: absolute;
    top:0px;
    left:0px;
    transform-origin: left center ; /*翻转位置的中心点*/
    transition:all 1s;
}

.text-box span::before{
    z-index: 3;
    color:#fff;
    transform:rotateY(-15deg);
}
.text-box span::after{
    z-index: -1;
    color:#999;
}

.text-box:hover span::before{
    transform:rotateY(-40deg) skew(0deg,5deg);
}
.text-box:hover span::after{
    transform:skewY(15deg);
}

跳动的小球

主要实现的是一个上下回弹的小球，下面附带一个阴影。

效果图

首先我们可以写2个div，一个小球，一个背景。然后使用了 @keyframes创建动画。一个控制小球的上下（改变top值即可），一个控制阴影的缩放（scale），所以这两个都是使用绝对定位实现的，是不是很简单勒。

<div class="box">
    <div class="ball"></div>
    <div class="bg"></div>
</div>

css样式

.box{
    width:300px;
    margin:0 auto;
    position: relative;
}
.ball{
    width:200px;
    height: 200px;
    border-radius: 100px;
    background-image: radial-gradient(at 50px 50px ,rgba(255,255,255,0),rgba(96,197,241,1));
    position: absolute;
    top:0px;
    /* 添加动画 */
    animation: ball 1s ease-in alternate infinite;
}

.bg{
    width: 200px;
    height: 100px;
    border-radius: 100px/50px;
    background-image: radial-gradient(rgba(191,191,191,0.7),rgba(255,255,255,0)) ;
    position: absolute;
    top:300px;
    left:0px;
    /* 添加动画 */
    animation: bg 1s ease-in alternate infinite;
}

@keyframes动画

/* 小球的跳动 */
@keyframes ball{
    0%{
        top:0px;
    }
    100%{
        top:138px;
    }
}

/* 阴影缩放 */
@keyframes bg {
    0%{
        /* transform: scale(1) */
    }
    100%{
        transform: scale(0.4)
    }
}

这里有一点就是缩放，小球向上弹的时候，它的影子肯定是变大的，所以跳动和阴影缩放的动画之间要对应上，所以我们把缩放放在 100% 的时候刚好影子是向上的。

图片翻转

这个可以看得比较多一点，像那种翻卡牌啊，那个QQ的勋章也是可以翻转的那种感觉哈。

我这里使用的图片是在一起的，这样我们只需要翻转（rotateY）之后改变位置即可。

效果图

翻转图片.gif

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

这里我们都给两个div加上背景图片，当悬浮盒子的时候就立体翻转180°即可。刚好我们图片是横着放的，正面取left，反面取right

.box{
    width:300px;
    height: 300px;
    margin: 100px auto;
    position: relative;
}
.box>div{
    width:100%;
    height: 100%;
    position: absolute;
    /* 隐藏被旋转div元素的背面 */
    backface-visibility: hidden;
    transition: all 2s;

}
.box1{
    background: url(img/bg.png) left 0 no-repeat;
    transform: rotateY(-180deg);
}
.box2{
    background: url(img/bg.png) right 0 no-repeat;
}
.box:hover .box1{
    transform: rotateY(0deg);
}
.box:hover .box2{
    transform: rotateY(180deg);
}

重点是这个backface-visibility（隐藏被旋转div元素的背面），不加的话就是还是你正面的那个图片，但是是反面，就类似那种镜面的感觉（不知道形容的对不对...）

（不加backface-visibility属性）

宇宙

这个实现的是宇宙中有会动的星球的感觉

效果图

宇宙.gif

看起来复杂，其实就是给每个 li 加上了不同速度的旋转。如果有更好的方法欢迎留言。

<ul>
    <li></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
</ul>

伪类选择器nth-child(n)，n代表的是第几个。

 body{
    margin: 0px;
    padding:0px;
    background: #06071B url(img/bg.jpg) repeat;
}
ul{
    list-style: none;
    width:600px;
    height: 600px;
    margin:40px auto;
    position: relative;
    /* background-color: #fff; */
}
ul li{
    border: 2px solid #394057;
    position: absolute;
    border-radius: 50%;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    margin:auto;
    animation: ball 3s linear infinite;

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

ul li span{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    position: absolute;
}

ul li:nth-child(1){
    width: 60px;
    height: 60px;
    background-color: #c90;
    border:0px;
    box-shadow: 0 0 50px #c90;
}
ul li:nth-child(2){
    width: 120px;
    height: 120px;
}
ul li:nth-child(2) span{
    top:11px;
    left:11px;
    background-color: yellow;
}
ul li:nth-child(3){
    width: 180px;
    height: 180px;
    animation-duration: 30s;
}
ul li:nth-child(3) span{
    top:28px;
    left:11px;
    background-color: blue;
}
ul li:nth-child(4){
    width: 240px;
    height: 240px;
    animation-duration: 20s;
}

ul li:nth-child(4) span{
    top:28px;
    left:28px;
    background-color: green;
}
ul li:nth-child(5){
    background-image: url(./img/asteroids_meteorids.png);
    background-size: cover;
    width: 300px;
    height: 300px;
}
ul li:nth-child(5) span{
    top:28px;
    left:46px;
    background-color: aqua;
}
ul li:nth-child(6){
    width: 360px;
    height: 360px;
    animation-duration: 10s;
}
ul li:nth-child(6) span{
    top:45px;
    left:46px;
    background-color: #C785C8;
}

这些CSS3动画你get了吗？

前言

3D文字

跳动的小球

图片翻转

宇宙