css之昼夜交替

在看了B站up主阿阳热爱前端的一个HTML+CSS教程实例后，跟着做了一遍，具体的代码和效果如下：

效果： 昼夜交替
源码： 阿阳热爱前端 / alternately

对于此篇，我只是总结我学到或需要复习的一些知识点，可能价值并不大。

flex布局

具体详细介绍，请移步阮一峰的网络日志。

flex布局即为弹性布局，为盒状模型提供灵活性，其子元素会成为容器成员。内置的属性能够实现页面元素垂直水平居中。

定位

在网页中实现列式布局，将一切元素设为盒子，就要实现对盒子位置的控制。

• 相对定位：relative
  设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

• 绝对定位：absolute
  设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

元素堆叠

堆叠顺序决定元素的显示层次，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index属性来设置元素的堆叠顺序

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

过渡

transition为动画提供过渡效果，在W3C的案例中，鼠标悬浮改变长度，此时添加transition将长度改变时间延长至2秒，为界面提供一个良好的效果。

transition的四个属性：

label标签

label标签为input元素定义标记。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

label 标签的 for 属性应当与相关元素的 id 属性相同

动画 animation

使用css来添加动画来取代图片以及脚本

animation的属性：

在定义动画名称的时候需要使用@keyframes 来规定。因此先定义好动画名称，然后在使用的时候直接引用名称即可。

• Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
• Chrome 和 Safari 需要前缀 -webkit-。
• 注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

伪类与伪元素

CSS伪类和伪元素是用来添加一些选择器的特殊效果。其语法很多，一般在使用的时候比较常用的是 :link、:visited、:hover、:active等伪类，伪元素采用双冒号是采用css3的兼容性写法，伪元素常用的::after、::before等。

注意：

• 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
• 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
• 伪类的名称不区分大小写。

很是感谢up主的源码教程，可能是使用框架太多了，原本一些熟悉的css都忘了怎么使用的了，关于使用css做一些动画以及效果，仍然是我的弱势，但这次发现了弱势，就要努力的补回来了！