我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

👨‍🎓作者简介：一位喜欢写作，计科专业大三菜鸟

🏡个人主页：starry陆离

🕒首发日期：2022年9月13日星期二

🌌上期文章：16个实用的CSS样式之文本填充

📚订阅专栏：『16个实用的CSS样式』

1.简介

对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于CSS代码的编写，能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式，因为自己也是初学者，所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是翻转卡片加载动画

首先我们来看看最终的效果

css003

2.布局设计

这次的布局同样的超级简单，就是div区块，DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。<div>标签可以把文档分割为独立的、不同的部分。

3.样式美化

3.1body美化

body背景色我们设计成天蓝色，主要是为了与div区块形成颜色反差。

 body{
     margin: 0;
     padding: 0;
     background:#39abe8;
 }

此时我们在浏览器看一下运行出来的效果，咦？？？为什么没看到区块呢。因为我们暂时只定义了区块div没有设置它的大小，所以它就看不到啊。所以接下来就是div的美化

3.2div美化

我们通过类选择器loader来设置div的样式，这里我们复习一下position的使用：

css position属性允许你定位一个元素，通过使用top，left，bottom，right属性，在这之前我们必须先设定position的属性值，以便告诉浏览器依据什么方式进行定位。position - CSS（层叠样式表） | MDN (mozilla.org)

static 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative 相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。
absolute 相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。因此绝对定位会影响其他元素的偏移
fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

通过设置position: absolute;此时top和left的值都是相对于body而言，那么div区块的左上顶点位于整个屏幕的中心，为了能让div的中心点位于整个屏幕的中心我们用到了translate

设置translate位移的元素是相对于自己原来的位置来改变位置，不脱离文档流，translate 位移时，默认原点是元素的中心位置。所以我们只需要将div区块往左平移50%，往上平移50%即可。（这个50%是相对于自己原来的位置来改变位置）最终效果如下图所示。

 .loader{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     width: 100px;
     height: 100px;
     background: #fff;
     border-radius: 10px;
     animation: animate 2s linear infinite;
 }

3.3动画制作

最后就是我们的动画控制，我们还是来回顾一下animation的使用。在.loader中我写了这么一行代码animation: animate 2s linear infinite;，意义如下：

 /* 举例：animation: animate 2s linear infinite; */
 
 动画名称 
 animation-name: animate;
 持续时间
 animation-duration: 2s;
 速度曲线
 animation-timing-function: linear;
 重复次数
 animation-iteration-count: infinite;

定义好了动画，然后通过关键帧来定义动画序列的动画效果

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

到这里都是旧知识。今天来点新东西：在悬浮卡片章节中我们提到

transform：旋转rotate，缩放scale，倾斜skew或平移translate给定元素

可以看到今天我们要用的效果主要是旋转。

首先我们定义三个关键帧，分别是0%，50%和100%。然后分别定义对应的动画效果

0%：原位置不动
50%：绕x轴旋转-180°（向外旋转）
100%：在50%的基础上绕y轴旋转-180°（向右旋转）

假设需要围绕x轴做旋转，那么我们将x轴的正向指向我们自己，然后再看顺时针和逆时针，顺时针为正的角度，逆时针为负的角度。

为了能有更好的3D视觉效果，我们利用**perspective**透视属性来指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。

z>0 的三维元素比正常大，
z<0 时则比正常小，大小程度由该属性的值决定。

一般设置为正值，这符合我们日常生活中近大远小的常识。

 @keyframes animate{
     0%{
         transform: translate(-50%,-50%) perspective(200px) 
         rotateX(0deg) rotateY(0deg);
     }
     50%{
         transform: translate(-50%,-50%) perspective(200px) 
         rotateX(-180deg) rotateY(0deg);
     }
     100%{
         transform: translate(-50%,-50%) perspective(200px) 
         rotateX(-180deg) rotateY(-180deg);
     }
 }

4.结语

到此为止一个简单的翻转卡片加载动画就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得点赞支持哈。

16个实用的CSS样式之翻转卡片