如何通过CSS整些有趣的东西

=========================================
=========================================
=========================================
以下放置繁体
=========================================
=========================================
=========================================

你或许看到过这种亦或是这种给各种组件加上动画的组件，那么问题来了，这些组件的原理是什么？我该如何制作这些组件？

答案已经很明显了，是 CSS 中的 animation 以及 @keyframes，所以本文章将以最简洁的语言，教会你如何使用 CSS 中的 animation 以及 @keyframes 制作出这些组件，以及其他更多的东西。

本篇章仅限介绍什么是 CSS，若你已经了解了什么是 CSS 请直接跳转至篇章二。

CSS 指的是{{ 层叠样式表* (Cascading Style Sheets) }}，CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。.来自此处

好吧，或许你并没有理解上面的文字在说什么，但你只需要知道 CSS 是一种设置整个页面样式的代码(语法)，与其它网站不同的是在 wikidot 中使用 CSS 需要把 CSS 装在 wikidot 独有的 模块 之中，既 [[module css]] 之中，也就是下面这样。

而 CSS 的主体则是 CSS 选择器，CSS 选择器 主要用于用于“查找”（或选取）要设置样式的 HTML 元素，也就是 [[div class="CSS类名"]]，或 [[span class="CSS类名"]] 之类的代码。

注意：span 是行内元素，而 div 则是块级元素。

而 CSS 选择器 又分为 CSS id 选择器.CSS id 选择器使用 HTML 元素的 id 属性来选择特定元素，元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素。、CSS 类选择器.CSS 类选择器选择有特定 class 属性的 HTML 元素，如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名，例如lightblock(亮色块) 就是一个类名，如果需要更改亮色块的样式，就需要通过 CSS 类选择器，既 .lightblock{CSS代码(语法)} 就可以了。、CSS 通用选择器.通用选择器（*）会选择页面上的所有的 HTML 元素。、CSS 分组选择器.CSS 分组选择器选取所有具有相同样式定义的 HTML 元素。 以及 CSS 元素选择器.CSS 元素选择器根据元素名称来选择 HTML 元素，例如h1.标题，hr.分割线等。，常用的有 CSS 类选择器 与 CSS 元素选择器，除此之外还有 CSS 伪类选择器.CSS 伪类选择器会根据特定状态选取元素，例如点击时元素的状态，未点击时元素的状态等，应当配合 transition.CSS 过渡 使用 与 CSS 伪元素选择器.CSS 伪元素选择器可以选取元素的一部分并设置其样式。。.参考自此处

如果你还是看不懂，请看下例的实例。

当然，光知道了什么是 CSS 选择器 并没有什么用，你还需要了解什么是 CSS 声明。CSS 声明 每条都包含一个 CSS 属性名称和一个值，以冒号分隔，多条 CSS 声明则用分号分隔，而整个声明块又需要用花括号括起来。

一个完整的 CSS 声明 应当是这样的 .类名 { 属性名称:属性值;}。

通过修改 CSS 声明 中的属性值，即可更改使用该声明的元素样式。

CSS 动画主要通过更改一个类名或元素中的 animation 以及 @keyframes 这两个属性的属性值实现。

例如 animation 规定了需要多少时间完成动画、是否重复动画或重复的次数、动画的速度曲线、动画是否存在延迟、动画是向前播放、向后播放还是交替播放、元素在不播放动画时的样式（在开始前、结束后，或两者同时）、以及动画的名称和动画是运行还是暂停。

而 @keyframes 则规定了动画某一时刻的 CSS 样式，例如当动画播放至 50% 时整个元素是什么样式，又或者当动画播放至 100％ 时整个元素又是什么样式。

注意：  @keyframes 的属性则需要单独在一个完整的选择器下方独立的声明。

如果你实在还是不明白，请看下面的一个实例。

由于不知名原因，这使得部分情况下动画并不会加载出来，你可以点击此处查看该实例。

上述的实例通过 @keyframes 调整了不同进度下div块样式，以及通过设置不同的 position(定位) 属性让div看起在动。

属性	作用
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	规定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

由于大部分的组件使用的基本上都是 CSS 类选择器 与 CSS 元素选择器 制作组件，所以如果需要给组件添加上动画，就需要找到这些组件使用的 CSS 类名 或 CSS 元素。

例如生存难度组件主要使用的元素便有：sd-container、top-box、header-diamond、diamondy、diamond-pattern、diamond-image、diamond-color、gradient-box、top-text、bottom-text、bottom-box 以及使用CSS 分组选择器定义的 class-xxx。

好吧，看起来是不是有点太多了？不不，我们先看看这些元素都有什么作用。

类名	作用
sd-container	包裹在所有元素的上方，并通过套娃 CSS 分组选择器与CSS 伪元素选择器使引用组件时可以自动生成文字与图片。
top-box	修正了未填写组件参数时或组件参数错误时所出现的样式。
header-diamond	修改了组件元素的边框，并添加多条斜线位于图片的两旁
所有 diamondy 标题的类	添加了图标位于组件的上方
top-text	既 生存难度： 一栏
bottom-box	修改了原有的列表样式
class-xxx	使使用组件时不同的组件参数，会有不同的文字与图片

部分未在本展格中指出的类名，是因为我并没有发现其作用。

好，那么我们再来看看层级等级系统动画组件都给这些类添加了哪些 CSS 语法。

类名	添加的动画
top-box, title-bar	通过 clip-path 裁剪了部分元素，并在结束时显示所有元素。
bottom-box、bottom-text 以及 top-text	通过 transform 将整个元素向 X轴 的方向移动 -1rem，并设置为诱明，在结束时设置成不透明。
所有 diamondy 标题的类	通过 transform 将整个元素向 Y轴 的方向移动 -1rem，并设置为透明，在结束时设置成不透明。

我们可以发现层级等级系统动画组件利用了 transform 属性使图片以从下向上升起并逐渐不透明的方式浮现，而文字则以从页面的边缘向内平行并逐渐不透明的方式浮现，这比单纯的设置 浮动(float) 或者 定位(position) 可以使动画更加的平滑，但也对制作者技术力的考验更大。

但同样的，由于层级等级系统动画组件并没有添加 header-diamond 的动画，这导致在更宽的屏幕上层级等级系统动画组件看上去过于简陋了，而在手机端上面受 CSS 属性 @media 影响并不会显示等级图片使层级等级系统动画组件看上去比更宽的屏幕上的效果更好。

所以在制作动画类组件时，应当多次分析正在添加动画的组件源代码，并根据 CSS 属性 @media 给不同屏幕大小的设备添加不同的动画，从而使组件在电脑端与手机端都可以正常的使用。

略简陋，感觉就是ppt动画常见的切入+浮动效果。就只是动起来而已，现在的人有那么容易满足了吗……－来自 用户 'Etinjat' 不存在 对层级等级系统动画组件的评价，来源见此。

是的，大部分的动画类组件事实都是ppt动画中常见的切入+浮动效果，只不过是换了一种方式通过 CSS 语法实现了而已，这并没有什么新意，或许我们应当换一种方式使用 CSS 动画，CSS 动画也不应该局限于给 XXX 组件添加一堆乱七八糟，而且多余又没用的动画。

而从Level 10与Level 37这俩篇文章中，我看到了一种新的可能性，这俩篇文章通过 CSS 动画 设计出了一种全新的背景图片类div块，这种div块比一般的div块更加的美观，也更加实用，比如在Level 37中，作者就通过 CSS 动画 设计出了一种背景图片不断移动div块，如果搭配上类似花纹类型的图片就更好了。

而Level 10中所设计的div块则适用范围更广，更美观的同时更简洁，尽管在移动端的效果并不理想，但仍有改进空间。

或者在未来会有更好、更美观的动画类组件，比如以 CSS 动画 为基础的轮播框 CSS 动画 组件就十分的实用，并成为了中分第一个精品组件，这代表着 CSS 动画 还有很多可以挖掘的东西，可以设置的东西。

例如我们可以把Level 10中的div块与轮播框 CSS 动画 组件结合起来，让背景图片在上下移动的同时缓慢地逐渐模糊后变换成另一个图片。

如果有时间的话，我或许会真把这玩意整出来。

---

作者： wd:yuyi_ad ，版式由 wd:yuyi_ad 修改自SCP基金会中的如影随光 主题版式，修改后的版式的原代码详见此处，背景图片来自Level R-1。