用css3和javascript做一个翻页动画<知识准备部分>

如有更多疑问请参照：http://www.imooc.com/learn/77

这是用css3的-webkit-transition属性做的渐变颜色动画，下面是三张截图：

怎么样？好看吧，下面是它的代码：



-webkit-transition: background-color 2s;


-webkit-是用chrome或safari打开的一个前缀，transition时表示渐变的属性，它的值是 渐变属性 和 渐变时间，上面注释的部分只是把渐变属性和渐变时间分开写而已了。






<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css transition</title>
    <style>
        #block {
            width: 400px;
            height: 300px;
            background-color: deepskyblue;
            margin: 0 auto;

            /*-webkit-transition-property: background-color;*/
            /*-webkit-transition-duration: 2s;*/
            -webkit-transition: background-color 2s;
        }
        #block:hover {
            background-color: lawngreen;
        }
    </style>
</head>
<body>
<div id="block"></div>
</body>
</html>




其实，表示渐变的transition后可以有第三个部分属性值，它表示渐变过程




上面的颜色是番茄的颜色，其实也就是西红柿了


代码如下：




<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>transition timing</title>
    <style>
        #wraper {
            width:1024px;
            margin: 0 auto;
        }

        .progress-bar {
            width: 40px;
            height:40px;
            background-color: tomato;
        }
        .progress-bar:hover {
            width: 960px;
        }

        #linear {
            -webkit-transition: width 15s linear;
        }
        #ease {
            -webkit-transition: width 15s ease;
        }
        #ease-in {
            -webkit-transition: width 15s ease-in;
        }
        #ease-out {
            -webkit-transition: width 15s ease-out;
        }
        #ease-in-out {
            -webkit-transition: width 15s ease-in-out;
        }
    </style>
</head>
<body>
    <div id="wraper">
        <p>linear</p>
        <div class="progress-bar" id="linear"></div>

        <p>ease</p>
        <div class="progress-bar" id="ease"></div>

        <p>ease-in</p>
        <div class="progress-bar" id="ease-in"></div>

        <p>ease-out</p>
        <div class="progress-bar" id="ease-out"></div>

        <p>ease-in-out</p>
        <div class="progress-bar" id="ease-in-out"></div>
    </div>
</body>
</html>




准备部分结束，我们首先要搭建一个三维的场景


perspective: 观察平面距离屏幕的距离;
perspective-origin: 观察者的视线落在屏幕上的点;


观察平面上画了一个正方形后绕Y轴旋转45degree后的投影




<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Perspective</title>
    <style>
        #expriment {
            -webkit-perspective: 800px;
            -webkit-perspective-origin: 50% 50%;
            -webkit-transform-style: -webkit-perspective-3d;
        }
        #block {
            width: 400px;
            height: 400px;
            background-color: cadetblue;
            margin: 100px auto;

            -webkit-transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div id="expriment">
        <div id="block"></div>
    </div>
</body>
</html>






这个是在视频教程上截下来的图，这里对以上两个参数有说明




这一篇写了不少了，就先到此吧


更多好文请关注：http://www.cnblogs.com/kodoyang/
												


											
css3 --- 翻页动画 --- javascript --- 3d --- 准备的更多相关文章
	

    
						
  1. css3 --- 翻页动画 --- javascript --- 3d --- Action
		
    用css3和javascript做一个翻页动画<Action> 如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_Car ...
    
		
    2. 
								
  2. jquery css3问卷答题卡翻页动画效果
		
    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...
    
		
    3. 
						
  3. 6个超炫酷的HTML5电子书翻页动画
		
    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...
    
		
    4. 
						
  4. flex布局构建大屏框架并支持翻页动画、滚动表格功能
		
      本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...
    
		
    5. 
						
  5. 通过js实现整屏滑动+全屏翻页+动画展示+线性图
		
    技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js   概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...
    
		
    6. 
						
  6. WPF中ListBox ListView数据翻页浏览笔记（强调：是数据翻页，非翻页动画）
		
    ListBox和ListView在应用中,常常有需求关于每页显示固定数量的数据,然后通过Timer自动或者手动翻页操作,本文介绍到的就是该动作的实现. 一.重点 对于ListBox和ListView来 ...
    
		
    7. 
						
  7. 如何用纯 CSS 创作一个记事本翻页动画
		
    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKOPGw 可交互视频教 ...
    
		
    8. 
						
  8. swiper.animate--css3翻页动画
		
    基于swiper 的 animate动画,适用于Swiper2.x和Swiper3.x . 1. 使用Swiper Animate需要先加载swiper.animate.min.js和animate. ...
    
		
    9. 
						
  9. [原创]纯CSS3打造的3D翻页翻转特效
		
    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. android调试工具DDMS
			
    DDMS工作机制    DDMS全称Dalvik Debug Monitor Service.DDMS为IDE和emultor及真正的android设备架起来了一座桥梁,Android DDMS将捕捉 ...
    
			
    2. 
						
  2. Android 实现Path2.0中绚丽的的旋转菜单
			
    上图先: 那么下面开始吧~ 首先,将整个菜单动画分解开来. 1.       一级菜单按钮的旋转动画2个,十字和叉叉状态的转换. 2.       二级菜单按钮的平移动画2个,弹簧效果的in和out  ...
    
			
    3. 
						
  3. 忘记导入struts2-xxx-plugin-x.x.x.jar导致服务器启动报Unable to load configuration.Caused by: Parent package is not defined: xxx-default
			
    今天做的一个Struts2+MyFaces(JSF)+Spring的应用,为了使用JSF,我的struts.xml中使用了如下代码 <package name="jsf" e ...
    
			
    4. 
						
  4. MySQL的数据库引擎
			
    Mysql的数据库引擎有很多,最重要的就是MyISAM.InnoDB.heap(memory),此外还有BDB.archive数据表.csv.ndb.federated InnoDB   优点: 1. ...
    
			
    5. 
						
  5. AE开发 入门教程
			
    此过程说明适合那些使用.NET建立和部署应用的开发者,它描述了使用ArcGIS控件建立和部署应用的方法和步骤. 你可以在下面的目录下找到相应的样例程序: <安装目录>/DeveloperK ...
    
			
    6. 
						
  6. Python  学习记录
			
    记录一些 学习python 的过程 -------------------------------------- 1. 初始学习 @2013年10月6日 今天开始学习python 了 遇到好多困难但是 ...
    
			
    7. 
						
  7. poj-2376  Cleaning Shifts （排序+贪心）
			
    http://poj.org/problem?id=2376 john有n头牛做打扫工作,他想在t时间内每个时间都至少有一头牛在做打扫工作,第一头牛在1,最后一头牛在t时间,每一头牛工作都有一个开始时 ...
    
			
    8. 
						
  8. emplace_back减少内存拷贝和移动
			
    --------<深入应用C++11:代码优化与工程级应用>第2章使用C++11改进程序性能,本章将分别介绍右值引用相关的新特性.本节为大家介绍emplace_back减少内存拷贝和移动. ...
    
			
    9. 
						
  9. Indoor Positioning System & Real time location system
			
    背景 惨痛的背景,正如我前面提到的,参加了公司的一个训练营.刚进来公司的新人,内心充满着对未来的美好憧憬,期待自己能闯出属于自己的天地.更何况,作为一名程序员,无比的希望所有人对自己写得代码或者App ...
    
			
    10. 
						
  10. 【转载】Redis的一些使用场景
			
    看了一些文章,关于Redis的使用场景,觉得挺好的.Redis肯定远远不止作为缓存而使用.Redis更像是一个实现很好的数据结构服务器,通过TCP栈协议提供服务.下面进行详细描述. http://da ...
    
			
    11.