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

CSS3动画效果核心代码

 @keyframes slideLeft {
0% {
left: -500px;
}
100% {
left:;
}
}
@keyframes slideBottom {
0% {
top: 350px;
}
100% {
top:;
}
}
@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

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

实际静态效果图如下(图片引自空中网)

CSS3幻灯片制作心得的更多相关文章

  1. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  2. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  3. 太可爱了!CSS3 & SVG 制作的米老鼠钟表

    米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...

  4. CSS3 圆角制作的消息提示图标

    CSS3 圆角制作的消息提示图标,如果你想知道它是如何被开发的,请点击连接查看.http://www.gbtags.com/gb/rtreplayerpreview/142.htm

  5. css3幻灯片换位效果

    <title>css3幻灯片换位效果</title> <style type="text/css">  .flowGallery {width: ...

  6. css3 3d学习心得

    css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...

  7. 超漂亮的CSS3按钮制作教程分享

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 利用CSS3属性制作按钮,我们只需要用到G ...

  8. CSS3咖啡制作全过程动画

    CSS3咖啡制作全过程动画是一款利用纯CSS3实现的咖啡制作全过程动画特效,从把咖啡豆导入杯子,到把咖啡煮好,整个动画还比较流畅. 源码:http://www.huiyi8.com/sc/8788.h ...

  9. CSS3背景 制作导航菜单综合练习题

    CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...

随机推荐

  1. UITableViewHeaderFooterView的封装

    UITableViewHeaderFooterView的封装 特点 1. 封装的 UITableViewHeaderFooterView 能够让用户更好的自定义自己的 headerView; 2. 封 ...

  2. fmdb 数据库的基本操作

    /** *  创建表 */ - (void)createTable { //1.初始化数据库对象 并且 2.打开数据库 BOOL isOpenSuccess = [self.database open ...

  3. AMD规范与CMD规范的区别是什么?

    AMD规范与CMD规范的区别是什么?    在比较之前,我们得先来了解下什么是AMD规范?什么是CMD规范?当然先申明一下,我个人也是总结下而已,也是网上看到的资料,自己总结下或者可以说整理下而已,供 ...

  4. 【Swift】iOS 9 Core Spotlight

    前言 感觉 Spotlight 这个功能还是蛮有用的,能提升用户活跃,增加应用内容曝光几率. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: ...

  5. Sphinx安装配置应用

    Sphinx 是由俄罗斯人Andrew Aksyonoff开发的一个全文搜索引擎.意图为其他应用提供高速.地空间占用.高结果相关度的全文搜索功能.Sphinx可以非常容易的与SQL数据库和脚本语言集成 ...

  6. 分布式集群系统下的高可用session解决方案

    目前,为了使web能适应大规模的访问,需要实现应用的集群部署. 而实现集群部署首先要解决session的统一,即需要实现session的共享机制. 目前,在集群系统下实现session统一的有如下几种 ...

  7. Oracle 11g 单实例安装文档

    这里介绍在Red Hat Enterprise Linux Server release 5.7 (Tikanga)下安装ORACLE 11.2.0.1.0的过程,本文仅仅是为了写这样安装指导文档而整 ...

  8. List tuple 类型转成数组

    SKlearning大部分的输入数据都是M * N数组. 然而我们从数据库或文件读取得来的通常是Python内定的类型tuple或list 它们的优势就不说了,但是直接把list或tuple构成的二维 ...

  9. 【转】js 关键字 in 的使用方法

    js 关键字 in 的使用方法  原文地址:http://sunct.iteye.com/blog/1709017   1.For...In 声明用于对数组或者对象的属性进行循环/迭代操作. 对于数组 ...

  10. 深入理解java内存模型系列文章

    转载关于java内存模型的系列文章,写的非常好. 深入理解java内存模型(一)--基础 深入理解java内存模型(二)--重排序 深入理解java内存模型(三)--顺序一致性 深入理解java内存模 ...