用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. 301.	Remove Invalid Parentheses
			
    题目: Remove the minimum number of invalid parentheses in order to make the input string valid. Return ...
    
			
    2. 
						
  2. form提交的时候使用method=get导致乱码
			
    一个a.jsp提交给b.jsp, b.jsp中使用 request.setCharacterEncoding("UTF-8"); 解决乱码 a.jsp中的form忘了写method ...
    
			
    3. 
						
  3. js学习之道：表单验证公共js
			
    /** 文件名称:CommonUtil.js 作者  : Yuce 编制时间: 2010-03-24 文件内容:一些常用的js公用类.工具类 包括方法: g_FormFieldIsNull    判断 ...
    
			
    4. 
						
  4. 京东商城发现了一枚Bug
			
    我在京东上买了几本书,发现了一个BUG.. 买书的时候,我选了京东自营的书和京东其他店的书,合在一起购买,填写了开具发票. 然后,京东处理流程是,将上面一笔订单拆分成两笔,然后发票信息没有转到其他店那 ...
    
			
    5. 
						
  5. 自定义Eclipse的 “宏命令”
			
    在Eclipse中有些常用的固定的东西可以定义一个“宏命令”,就不用重复地做一些工作.就像在 Preferences > Java > Code Style > Code Templ ...
    
			
    6. 
						
  6. 标准类型内建函数   type（）介绍
			
    我们现在来正式介绍一下 type().在Python2.2 以前, type() 是内建函数.不过从那时起,它变成了一个“工厂函数”.在本章的后面部分我们会讨论工厂函数, 现在你仍然可以将type() ...
    
			
    7. 
						
  7. Finalization
			
    1.what is the main disadvantage of garbage collection? Typically, garbage collection has certain dis ...
    
			
    8. 
						
  8. [HDOJ2196]Computer （树直径, 树DP）
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2196 给一棵树,求树上各点到某点的距离中最长的距离.注意每个点都要求. 和普通求树的直径不一样,要求每 ...
    
			
    9. 
						
  9. c#获取机器唯一识别码
			
    前言 在客户端认证的过程中,我们总要获取客户机的唯一识别信息,曾经以为MAC地址是不会变的,但是现在各种改,特别是使用无线上网卡,MAC地址插一次变一次,所以这样使用MAC就没有什么意义了,怎么办,又 ...
    
			
    10. 
						
  10. CodeForces ZeptoLab Code Rush 2015
			
    拖了好久的题解,想想还是补一下吧. A. King of Thieves 直接枚举起点和5个点之间的间距,进行判断即可. #include <bits/stdc++.h> using na ...
    
			
    11.