CSS3幻灯片制作心得

大神勿喷，这是小弟自己学习的痕迹。

CSS3动画效果核心代码

@keyframes slideLeft {
    0% {
        left: -500px;
    }
    100% {
        left: 0;
    }
}
@keyframes slideBottom {
    0% {
        top: 350px;
    }
    100% {
        top: 0;
    }
}
@keyframes zoomIn {
    0% {
        transform: scale(0.1);
    }
    100% {
        transform: none;
    }
}
@keyframes rotate {
    0% {
        transform: rotate(-360deg) scale(0.1);
    }
    100% {
        transform: none;
    }
}

技术名词

1.height:auto 与 height: 100%

height:auto，是指根据块内内容自动调节高度。

height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。

2. z-index （参考自 http://www.cnblogs.com/dolphinX/p/3262469.html）

z-index是针对网页显示中的一个特殊属性。

因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。

为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。

z-index值 较大 的元素将叠加在z-index值 较小 的元素之上。

对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。

★ 只对定位元素有效

z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），

用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。

 

3.伪元素 ::after 和 ::before

::after是一个CSS伪元素，使用::after，你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。

虽然最终生成的东西并不是真正的DOM里的内容，但这些内容能像普通内容一样显示

::before跟::after完全类似，只是它插入的内容会出现在其它内容之前。

这两者的区别可以简单描述为：

想让插入的内容出现在其它内容前，使用::before，否者，使用::after。

在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上。

content的值可以为：

　　字符串： content: "字符串"; – 特殊字符串需要转义或unicode编码。
　　图片：content: url(/path/to/image.jpg); – 图片会按原尺寸大小的插入，不能改变，因为渐变色实际上也是图像，所以，这些伪元素里也可以使用渐变色。
　　空： content: ""; – 可以用于清除左右浮动元素，也能够用于使用背景图片(这是可以设置高和宽，甚至使用background-size。)
　　计数器： content: counter(li); – 在列表时计算行数非常方便。
　　需要注意的是，你不能用它们插入HTML(至少这些HTML代码会被转义输出)。content: "<h1>nope</h1>";

4.background-size: length | percentage | cover | contain;
　　一：length

　　该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;

　　二：percentage

　　该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;

　　三：cover （通常用于图片自适应缩放）

　　把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

　　四：contain

　　把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。

实际静态效果图如下（图片引自空中网）