今天看啥 热点：
background-size:cover与-webkit-background-size，
在使用jade和styl写手机页面时，且元素为背景图片时，常会使用到background-size cover，它的意思是使背景图片铺满整个元素，且保证背景图片的宽高比。
即当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用将背景图片放大到适合容器的大小
或者是设定元素的宽高分别为背景图片的宽高，且设置margin-left为元素宽度的一半来使元素居中于手机屏幕。
我们解决这个问题的方法是用img；***window的resize事件。resize的回调函数逻辑如下：当window的宽高比大于图片的宽高比的时候， 图片的width设为100%，height设为auto当window的宽高比小于图片的宽高比的时候， 图片的height设为100%，width设为autodom loaded的时候先调一下这个resize回调函数。
ie9之后才支持css3的，之前是不支持的
相关搜索：
相关阅读：
相关频道：
&&&&&&&&&&&&&&&&&&
WEB前端教程最近更新CSS3变形与动画的相关属性
CSS3提供的变形支持可以对HTML组件进行常见的几何变换。CSS3变形与动画的相关属性。
3提供的变形支持可以对HTML进行常见的几何变换
旋转 缩放 倾斜 位移
CSS3位变形支持提供了如下两个属性值:
transform：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。CSS3提供了如下变形函数
transform-origin:该属性摄者变形的中心点 该属性值应该指定为xCenter yCenter,其中xCe
nter,yCenter支持如下几种属性:
left top right bottom center 长度值 百分比:分别指定旋转中心点位于HTML组件的哪边界
其中left right只能指定给xCenter
right bottom只能指定给yCenter
四种基本变形
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&动画&/title&
display: inline-
height: 60
margin: 20
background-color: #
&div&文字&/div&
&div&文字&/div&&br/&
&div&文字&/div&
&div style="-moz-transform: rotate(30deg);-webkit-transform: rotate(30deg);-o-transform: rotate(30deg);"&文字&/div&&br/&
&div&文字&/div&
位移120px -80px
&div style="-moz-transform: translate(120px,-80px);-webkit-transform: translate(120px,-80px);-o-transform:translate(120px,-80px);"&文字&/div&&br/&
&div&文字&/div& 缩放1.9 0.4
&div style="-moz-transform: scale(1.9,0.4);-webkit-transform: scale(1.9,0.4);-o-transform:scale(1.9,0.4);"&文字&/div&&br/&
&div&文字&/div& 缩放0.8 2.1 &div style="-moz-transform: scale(0.8,2.1);-webkit-transform: scale(0.8,2.1);-o-transform:scale(0.8,2.1);"&文字&/div&&br/&
&div&文字&/div& 横向倾斜30度 &div style="-moz-transform:skew(30deg);-webkit-transform: skew(30deg);-o-transform:skew(30deg);"&文字&/div&&br/&
&div&文字&/div& 纵向倾斜30度 &div style="-moz-transform:skewY(30deg);-webkit-transform: skewY(30deg);-o-transform:skewY(30deg);"&文字&/div&&br/&
同时应用多种变形
如果希望我们为HTML组件同时应用多种变形 可以为transform同时指定多个变形函数
比如看如下代码:
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&动画&/title&
width: 140
height: 140
margin: 20
background-color: #
&div&文字&/div&
&div style="-moz-transform: rotate(30deg) translate(260px,60px) scale(2.4,0.4);-webkit-transform: rotate(30deg) translate(260px,60px) scale(2.4,0.4);-o-transform: rotate(30deg) translate(260px,60px) scale(2.4,0.4);"&文字&/div&&br/&
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&动画&/title&
width: 140
height: 140
margin: 20
background-color: #
&div&文字&/div&
&div style="-moz-transform: translate(260px,60px) scale(2.4,0.4) rotate(30deg) ;-webkit-transform: translate(260px,60px) scale(2.4,0.4) rotate(30deg) ;;-o-transform: translate(260px,60px) scale(2.4,0.4) rotate(30deg) ;"&文字&/div&&br/&
仅仅把翻转放到最后 效果就不一样了
所以需要注意下 3种同样的变换 如果变换的顺序不同 那么效果也是不同的
指定变形中心点
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&动画&/title&
height: 80
background-color: #
&div class="a"&未变换前&/div&
&div class="a" style="-moz-transform-origin:-moz-transform: rotate(-30deg) ;
-webkit-transform-origin:-webkit-transform: rotate(-30deg) ;
-o-transform-origin:-o-transform: rotate(-30deg) ;"&左上角变形中心&/div&&br/&
&div class="b"&未变换前&/div&
&div class="b" style="-moz-transform-origin:-moz-transform: rotate(65deg) ;
-webkit-transform-origin:-webkit-transform: rotate(65deg) ;
-o-transform-origin:-o-transform: rotate(65deg) ;"&右下角变形中心&/div&&br/&
&div class="c"&未变换前&/div&
&div class="c" style="-moz-transform-origin:-moz-transform: rotate(-90deg) ;
-webkit-transform-origin:-webkit-transform: rotate(-90deg) ;
-o-transform-origin:-o-transform: rotate(-90deg) ;"&右边界的中心为变形中心&/div&&br/&
CSS3提供的Transition动画
CSS3提供了Transition动画支持 可以控制HTML组件的某个属性发生改变时会经理一段时间 以平滑渐变的方式发生改变 这就产生了动画效果
Transition属性值包括如下4个:
transition-property可以指定background-color,width,height等
transition-duration:平滑渐变的时间
transition-timing-function:渐变的速度 值可以由如下图几种
transition-delay:指定延迟时间
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&动画&/title&
height:100
background:
transition:background-color 4
-moz-transition:background-color 4 /* Firefox 4 */
-webkit-transition:background-color 4 /* Safari and Chrome */
-o-transition:background-color 4 /* Opera */
background-color:
&div&鼠标移上来会发生颜色渐变&/div&
鼠标移上来会发生颜色渐变
效果不言而喻 鼠标移上去div区从红色渐变***
多个属性同时渐变
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&动画&/title&
transition: left 5s linear,top 5
-moz-transition: left 5s linear,top 5
-webkit-transition: left 5s linear,top 5
-o-transition: left 5s linear,top 5
&img src="1.png" alt="气球" id="target"&
var target=document.getElementById("target");
target.style.left="0px";
target.style.top="0px";
document.onmousedown=function (evt) {
alert(evt.pageX);
alert(evt.pageY);
target.style.left=evt.pageX+"px";
target.style.top=evt.pageY+"px";
鼠标点击网页上哪里 这个图片就会移向哪里
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&动画&/title&
width: 200
height: 180
background-color:
transition: background-color 2s linear 2s,width 2s linear 2s,height 2s linear 2s;/*延迟了两秒*/
-moz-transition:background-color 2s linear 2s,width 2s linear 2s,height 2s linear 2s;
-webkit-transition: background-color 2s linear 2s,width 2s linear 2s,height 2s linear 2s;
-o-transition: background-color 2s linear 2s,width 2s linear 2s,height 2s linear 2s;
&div id="target"&&/div&
&button onclick="zoom(2.0,'blue')"&放大&/button&
&button onclick="zoom(0.5,'yellow')"&缩小&/button&
&button onclick="zoom(1,'red')"&恢复&/button&
var target=document.getElementById("target");
var Width=200;
var Height=180;
function zoom(scale,bgColor) {
target.style.width=Width*scale+"px";
target.style.height=Height*scale+"px";
target.style.backgroundColor=bgC
CSS3中提供的Animation动画
animation 属性是一个简写属性，用于设置六个动画属性：
@keyframes 动画名 {
百分比{...}
...:hover{
animation-name:调用动画名;
看下面的例子:
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&animation动画&/title&
@-webkit-keyframes donghua {
@-o-keyframes donghua {
@-moz-keyframes donghua {
height: 90
background-color: #FF9A66;
div:hover{
animation-name:
animation-duration: 5s;
animation-iteration-count:3;
&div&移动到div出现动画效果&/div&
以下附一个鱼眼效果的代码:
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&鱼眼效果&/title&
margin-left: 30
display: inline-
text-align:
border-radius: 20
padding: 5
background-color: #
text-decoration:
@-webkit-keyframes change{
-webkit-transform: scale(1);
background-color: #
border-radius: 10
-webkit-transform: scale(1.5);
background-color: #
border-radius: 10
-webkit-transform: scale(1);
background-color: #
border-radius: 10
@-moz-keyframes change {
-moz-transform: scale(1);
background-color: #
border-radius: 10
-moz-transform: scale(1.5);
background-color: #
border-radius: 10
-moz-transform: scale(1);
background-color: #
border-radius: 10
@-o-keyframes change {
-o-transform: scale(1);
background-color: #
border-radius: 10
-o-transform: scale(1.5);
background-color: #
border-radius: 10
-o-transform: scale(1);
background-color: #
border-radius: 10
animation-name:
animation-duration: 3s;
animation-iteration-count:
&a&J***ASE从入门到放弃&/a&
&a&J***AEE从入门到放弃&/a&
&a&javasrcipt从入门到放弃&/a&
&a&css从入门到放弃&/a&CSS3知识的细化与巩固
1.CSS3基础
& && &1.1 属性选择器
& && && && & E[attr]& &只使用属性名
& && && && & E[attr=&value&]&&指定属性名，并且该属性的值为value
& && && && & E[attr~=&value&]&&指定属性名，并且具有属性值，并且此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词
& && && && & E[attr^=&value&]&&属性值是以value开头的
& && && && & E[attr$=&value&]&&属性值是以value值结束的
& && && && & E[attr*=&value&]&&属性值中包含value值
& && && && & E[attr|=&value&]&&属性值是以value或是以value-开头的值
& && && && & 例子：百度文库；
& && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
p{height:30 line-height:30 font-size:12border:1px solid #000;}
p a{background:url(img/w.gif) no-repeat 3padding-left:20 display:}
p a[href*=text]{ background-image:url(img/text.gif);}
p a[href*=pdf]{ background-image:url(img/swf.gif);}
p a[href*=exl]{ background-image:url(img/x.gif);}
&a href=&doc/1.html&&doc&/a&
&a href=&text/2.html&&text&/a&
&a href=&pdf/3.html&&pdf&/a&
&a href=&exl/4.html&&exl&/a&
& && &1.2 结构选择器
& && && && &E:nth-child(n)&&表示E的父元素的第n个元素
& && && && &E:nth-child(odd)&&所有奇数行
& && && && &E:nth-child(even)&&所有偶数行
& && && && &E:nth-child(3n+1)& &
& && && && &E:nth-last-child(n)&&表示E的父元素的第n个元素,从后往前数
& && && && &E:nth-of-type(n)& & 表示E的父元素的第n个E元素,并且类型为E
& && && && &E:nth-last-of-type(n)& &表示E的父元素的第n个E元素,并且类型为E,从后往前数
& && && && &E:empty 表示E元素中没有子节点，注：子节点包含文本节点
& && && && &E:first-child&&表示E元素中的第一个子节点
& && && && &E:last-child&&表示E元素中的最后一个子节点
& && && && &E:first-of-type&&表示E的父元素中的第一个子节点且节点类型是E的
& && && && &E:last-of-type&&表示E的父元素中的最后一个子节点且节点类型是E的
& && && && &E:only-child&&表示E元素中只有一个子节点，注意：子节点不包含文本节点
& && && && &E:only-of-tyoe&&表示E的父元素只有一个子节点，且这个唯一的子节点的类型是E，注意：子节点不包含文本节点
& && && && &
& && && && &例子：新浪头部导航；
& && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
.list{margin:0;padding:0; list-style:}
.list li{width:150border-right:1px solid #000;float:}
.list li:last-of-type{border:}
.list a{float:width:40margin:0 5 font:12px/30px &宋体&; text-align:}
.list li a:nth-of-type(3n+1){ font-weight:}
.list li:nth-child(3) a:nth-child(2){ color:}
&ul class=&list&&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
&a href=&#&&请问&/a&
&a href=&#&&请问&/a&
&a href=&#&&企鹅&/a&
& && &1.3 伪类与伪元素
& && && && &E:target&&表示当前的URL片段的元素类型，这个元素必须是E
& && && && &E:disabled&&表示不可点击的表单控件
& && && && &E:enabled&&表示可点击的表单控件
& && && && &E:checked&&表示已选中的checkbox或radio
& && && && &E:first-line&&表示E元素的第一行
& && && && &E:first-letter&&表示E元素的第一个字符
& && && && &E::selection&&表示E元素在用户选中文字时
& && && && &E::before 生成内容在E元素前
& && && && &E::after&&生成内容在E元素后
& && && && &E:not(s)&&表示E元素不被匹配
& && && && &E~F&&表示E元素毗邻的F元素
& && && && &content&&属性
& && &1.4 文本新增属性
& && && && &1. 颜色，透明，rgba()
& && && && &2. 文字阴影& & text-shadow:可以设置多层；text-shadow:2px 2px 0px red, 2px 2px 4
& && && && &3. 文字描边&&-webkit-text-stroke:宽度&&颜色；
& && && && &4. Direction&&定义文字排列方式(全兼容)
& && && && && && && && && && && &Rtl 从右向左排列
& && && && && && && && && && && &Ltr 从右向左排列
& && && && && && && && && && && &注意要配合unicode-bidi：bidi-override；一块使用
& && && && & 5. Text-overflow 定义省略文本的处理方式
& && && && && && && & white-space:
& && && && && && && & overflow:
& && && && && && && &&&text-overflow:
& && && && &&&6. 自定义字体
& && && && && &&&html 代码效果预览@font-face {
font-family: ‘sm';
src: url('111-webfont.eot');
src: url('111-webfont.eot?#iefix') format('embedded-opentype'),
url('111-webfont.woff') format('woff'),
url('111-webfont.ttf') format('truetype'),
url('111-webfont.svg#untitledregular') format('svg');
font-weight:
font-style:
& && && && && &转换字体格式生成兼容代码&&/fontface/generator
2.盒模型设计、响应式布局
& && & 2.1 弹性盒模型
& && && && &详情请见：& && && && &父元素设置：display:-webkit- display:-moz-display:
& && && && && && && &&&box-orient&&定义盒模型的布局方向& && &horizontal&&水平显示& & vertical&&垂直方向
& && && && && && && && && && && &-webkit-box-orient:&&
& && && && && && && && && && && &-moz-box-orient:
& && && && && && && && && && && &box-orient:& &&&
& && && && && && && &&&box-direction&&元素排列顺序& &&&normal&&正序& && &reverse&&反序
& && && && && && && && && && && &-webkit-box-direction:& && &&&
& && && && && && && && && && && &-moz-box-direction:
& && && && && && && && && && && &box-direction:
& && && && && && && &&&box-ordinal-group 设置元素的具体位置
& && && && && && && && && && && && & -webkit-box-ordinal-group: 1;
& && && && && && && && && && && && & -moz-box-ordinal-group: 1;
& && && && && && && && && && && && & box-ordinal-group: 1;
& && && && && && && && &box-flex&&定义盒子的弹性空间
& && && && && && && && && && && && & 子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
& && && && && && && && && && && && && &-moz-box-flex:2;
& && && && && && && && && && && && &&&-webkit-box-flex:2;
& && && && && && && && && && && && &&&box-flex:2;
& && && && && && && && & box-pack 对盒子富裕的空间进行管理
& && && && && && && && && && && && &&&Start 所有子元素在盒子左侧显示，富裕空间在右侧
& && && && && && && && && && && && &&&End 所有子元素在盒子右侧显示，富裕空间在左侧
& && && && && && && && && && && && &&&Center 所有子元素居中
& && && && && && && && && && && && &&&Justify 富余空间在子元素之间平均分布
& && && && && && && && && && && && && &-webkit-box-pack:
& && && && && && && && && && && && && &-moz-box-pack:
& && && && && && && && && && && && && &box-pack:
& && && && && && && &&&box-align 在垂直方向上对元素的位置进行管理
& && && && && && && && && && && && &&&Star 所有子元素在据顶
& && && && && && && && && && && && &&&End 所有子元素在据底
& && && && && && && && && && && && &&&Center 所有子元素居中
& && && && && && && && && && && && &&&-webkit-box-align:&&
& && && && && && && && && && && && &&&-moz-box-align:
& && && && && && && && && && && && &&&box-align:
& && & 2.2 盒模型新增属性
& && && && & 阴影& &box-shadow:[inset]&&x&&y&&blur&&[spread]&&
& && && && && && && &inset：投影方式
& && && && && && && && &&&inset：内投影
& && && && && && && && &&&不给：外投影
& && && && && && && &x、y：阴影偏移
& && && && && && && &blur：模糊半径
& && && && && && && &spread：扩展阴影半径
& && && && && && && && && &&&先扩展原有形状，再开始画阴影
& && && && && && && & color
& && && && &&&倒影& &box-reflect& &&&-webkit-支持
& && && && && && && &direction&&方向& &&&above|below|left|
& && && && && && && &距离
& && && && && && && &渐变（可选）
& && && && && && && &-webkit-box-reflect: right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);
& && && && && &resize 自由缩放
& && && && && && && &&&Both 水平垂直都可以缩放
& && && && && && && &&&Horizontal 只有水平方向可以缩放
& && && && && && && &&&Vertical 只有垂直方向可以缩放
& && && && && && && &&&注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放
& && && && && && && && && && && & resize:
& && && && && && && && && && && & overflow:
& && && && && & box-sizing& & 盒模型解析模式
& && && && && && && && && && &Content-box&&标准盒模型 width/height=border+padding+content
& && && && && && && && && && &Border-box 怪异盒模型 width/height=content
& && & 2.3 响应式布局
& && && && & 分栏布局
& && && && && && && &column-width : 栏目宽度& &&&-webkit-column-width:1000
& && && && && && && &column-count : 栏目列数& & -webkit-column-count:3;
& && && && && && && &column-gap : 栏目距离& && & -webkit-column-gap:30
& && && && && && && &column-rule : 栏目间隔线& & -webkit-column-rule:1px solid #000;
& && && && & 媒体查询
& && && && && && && & &link rel=&stylesheet& type=&text/css& href=&indexa.css& media=&screen and (min-width:800px)&&
& && && && && && && & &link rel=&stylesheet& type=&text/css& href=&indexb.css& media=&screen and (min-width:400px) and (max-width: 800px)&&
& && && && && && && & &link rel=&stylesheet& type=&text/css& href=&indexc.css& media=&screen and (max-width: 400px)&&
& && && && && && && &
& && && && && && && & &link rel=&stylesheet& media=&all and (orientation:portrait)& href=&indexb.css&&&&//竖屏
& && && && && && && & &link rel=&stylesheet& media=&all and (orientation:landscape)& href=&indexa.css&&&&//横屏
& && && && && && && & @media screen and (min-width:800px) {}
& && && && && && && & @media screen and (min-width:400px and max-width:800px) {}
& && && && && && && & @media screen and (max-width:400px) {}
& && && && & 详细请见
3.新增UI样式
& && & 1. 圆角 border-radius
& && && && && && &x,y轴半径大小一样
& && && && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
&style type=&text/css&&
height:300
border:1px solid #000;
border-radius:30px 40px 50px 60
&div class=&box1&&&/div&
& && && && && && &x,y轴半径大小不一样&&则border-radius:x轴/y轴；
& && && && && && && &&&html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
&style type=&text/css&&
height:200
border:1px solid #000;
border-radius:30px/50
height:200
border:1px solid #000;
border-radius:30px 40px 50px 60px/10px 20px 30px 50
&div class=&box1&&&/div&
&div class=&box2&&&/div&
& && &&&简单案例：html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
&style type=&text/css&&
height:400
transition:5
background:#9F3;
height:180
-webkit-box-sizing:border-
-moz-box-sizing:border-
box-sizing:border-
.box div:nth-child(1){
border-radius:0 70%;
.box div:nth-child(2){
border-radius:70% 0 ;
.box div:nth-child(3){
border-radius:70% 0 ;
.box div:nth-child(4){
border-radius:0 70%;
.box:hover{
transform:rotate(720deg);
&div class=&box&&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
& && & 2.边框背景 border-image
& && && &&&border-image-sourceg 引入图片
& && && &&&border-image-slice 切割图片
& && && &&&border-image-width 边框宽度
& && && &&&border-image-repeat 图片的排列方式
& && && && && & round 平铺,repeat 重复,stretch拉伸
& && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
height:100
-webkit-border-image:url(&1.png&) 0 10;
border-left-width:10
border-right-width:10
height:100
border-width:20
-webkit-border-image:url(&1.png&) 10 10
&div class=&box&&
&div class=&box1&&
& && && &&&多颜色边框，只在火狐下实现了
& && && && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
height:100
border:10px solid #000;
-moz-border-left-colors:red blue yellow green red red b
&div class=&box&&&/div&
& && & 3.线性渐变
& && && && & 线性渐变格式
& && && && && && & linear-gradient([&起点& || &角度&,]? &点&, &点&…)
& && && && && && & 只能用在背景上
& && && && && && && && && &IE
& && && && && && && && && && & filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
& && && && && && &&&参数
& && && && && && && && &&&起点：从什么方向开始渐变& & & & & & & & 默认：top
& && && && && && && && && && && && && &left、top、left top
& && && && && && && && && &角度：从什么角度开始渐变
& && && && && && && && && && && && && &xxx deg的形式
& && && && && && && && && &点：渐变点的颜色和位置
& && && && && && && && && && && && && & black 50%，位置可选
& && && && && && & 线性平铺&&repeating-linear-gradient
& && && && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
margin-right:20
height:200
border:10px solid #000;
background-image:-webkit-linear-gradient(left top,red,blue);
background-image:-moz-linear-gradient(left top,red,blue);
height:200
border:10px solid #000;
background-image:-webkit-linear-gradient(60deg,red,blue);
background-image:-moz-linear-gradient(60deg,red,blue);
height:200
border:10px solid #000;
background-image:-webkit-linear-gradient(60deg,red 0,blue 50%,green 100%);
background-image:-moz-linear-gradient(60deg,red 0,blue 50%,green 100%);
height:200
border:10px solid #000;
background-image:-webkit-repeating-linear-gradient(60deg,red 0,blue 20px,green 40px);
background-image:-moz-repeating-linear-gradient(60deg,red 0,blue 20px,green 40px);
&div class=&box&&&/div&
&div class=&box1&&&/div&
&div class=&box2&&&/div&
&div class=&box3&&&/div&
& && && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
border:1px solid #000;
background:-webkit-repeating-linear-gradient(30deg,green 0,green 10px,#fff 10px,#fff 20px);
background:-moz-repeating-linear-gradient(30deg,green 0,green 10px,#fff 10px,#fff 20px);
transition:3s;
.wrap:hover .box{
margin-left:-100
&div class=&wrap&&
&div class=&box&&&/div&
& && && && &&&线性渐变实例(2)
& && && && && && && &加入点的位置
& && && && && && && && && && & top, red 40%, green 60%
& && && && && && && && && && & top, red 50%, green 50%
& && && && && && && && && && && && && & 同一个位置两个点----直接跳变
& && && && && && && && && && & 也可以用px
& && && && && && && & 配合rgba
& && && && && && && && && && & top, rgba(255,255,255,1), rgba(255,255,255,0)
& && && && && && && & 加入背景图片
& && && && && && && && && && & background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)
& && && && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
border:1px solid
height:300
background:url(&1.png&) no-repeat,url(&2.png&) repeat-y right 0;
height:300
background:-webkit-linear-gradient(-30deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 150px,rgba(0,0,0,0.9) 170px,rgba(0,0,0,0.9) 180px,rgba(0,0,0,0) 210px) no-repeat -220px
0,url(&1.png&) no-
background:-moz-linear-gradient(-30deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 150px,rgba(0,0,0,0.9) 170px,rgba(0,0,0,0.9) 180px,rgba(0,0,0,0) 210px) no-repeat -220px
0,url(&1.png&) no-
transition:1s;
.box1:hover{
background-position:300px 0,-100px -100
&div class=&box&&
&div class=&box1&&
& && & 4.径向渐变
& && && && &&&radial-gradient([&起点&]? [&形状& || &大小&,]? &点&, &点&…);
& && && && && && && &&&起点：可以是关键字（left,top,right,bottom），具体数值或百分比
& && && && && && && &&&形状： ellipse、circle
& && && && && && && &&&大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
& && && && && && && && && && &注意firefox目前只支持关键字
& && && && && && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
.box{width:300height:300border:1px solid #000;float:margin:10}
.box:nth-child(1){ background:-webkit-radial-gradient(100px 50px,closest-side,red,blue);background:-moz-radial-gradient(100px 50px,closest-side,red,blue);}
.box:nth-child(2){ background:-webkit-radial-gradient(100px 50px,closest-corner,red,blue);background:-moz-radial-gradient(100px 50px,closest-corner,red,blue);}
.box:nth-child(3){ background:-webkit-radial-gradient(100px 50px,farthest-side,red,blue);background:-moz-radial-gradient(100px 50px,farthest-side,red,blue);}
.box:nth-child(4){ background:-webkit-radial-gradient(100px 50px,farthest-corner,red,blue);background:-moz-radial-gradient(100px 50px,farthest-corner,red,blue);}
.box:nth-child(5){ background:-webkit-radial-gradient(100px 50px,contain ,red,blue);background:-moz-radial-gradient(100px 50px,contain ,red,blue);}
.box:nth-child(6){ background:-webkit-radial-gradient(100px 50px,cover ,red,blue);background:-moz-radial-gradient(100px 50px,cover ,red,blue);}
&div class=&box&&&/div&
&div class=&box&&&/div&
&div class=&box&&&/div&
&div class=&box&&&/div&
&div class=&box&&&/div&
&div class=&box&&&/div&
& && &&&5.背景
& && && && && &多背景
& && && && && && &&&逗号分开
& && && && && && && && && &background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
& && && && && &背景尺寸
& && && && && && && & background-size:x y
& && && && && && && && && &background-size:100% 100%
& && && && && && && && && &Cover 放大
& && && && && && && && && &Contain 缩小
& && && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
background:#
height:300
border:10px solid #000;
background:url(1.png) no-repeat,url(2.png) no-
background-size:contain,
&div class=&box&&&/div&
& && && &&&background-origin ： border | padding | content
& && && && && && && &border-box： 从border区域开始显示背景。
& && && && && && && &padding-box： 从padding区域开始显示背景。
& && && && && && && &content-box： 从content区域开始显示背景。
& && && &&&background-clip
& && && && && && && & border： 从border区域向外裁剪背景。
& && && && && && && & padding： 从padding区域向外裁剪背景。
& && && && && && && & content： 从content区域向外裁剪背景。
& && && && && && && & no-clip： 从border区域向外裁剪背景。
& && && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
background:#
height:300
background:url(1.png) no-repeat 0 0;
border:10px solid rgba(0,0,0,0.6);
padding:50
/*--background-origin:border-
background-origin:padding---*/
background-origin:content-
height:300
background:url(2.png) no-repeat 0 0;
border:10px solid rgba(0,0,0,0.6);
padding:50
background-origin:border-
background-clip:border-
height:300
background:url(2.png) repeat 0 0;
border:10px solid rgba(0,0,0,0.6);
padding:50
background-origin:border-
-webkit-background-clip:
font:bold 100px/150px &微软雅黑&;
text-align:
color:rgba(0,0,0,0);
transition:3s;
.box2:hover{
background-position:-200px -200
&div class=&box&&&/div&
&div class=&box1&&&/div&
&div class=&box2&&啦啦啦啦&/div&
& && && && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
background:#000;
text-align:
font:60px/200px &微软雅黑&;
display:inline-
color:rgba(255,255,255,0.3);
background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 150px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 240px) no-repeat -300px 0;
background:-moz-linear-gradient(-30deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 150px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 240px) no-repeat -300px 0;
-webkit-background-clip:
/*--transition:5s;--*/
/*-body:hover h1{
background-position:1200px 0;
&h1&的机会反击的广的话&/h1&
var oH1=document.getElementsByTagName(&h1&)[0];
var oTimer =
var iLeft = -300;
function toMove(){
oTimer = setInterval(function(){
iLeft+=10;
if(iLeft == 1000){
iLeft = -300;
clearInterval(oTimer);
oH1.style.backgroundPosition = iLeft + &px 0&;
setInterval(function(){toMove();},5000)
& && && && & 遮照
& && && && && && &Mask-image
& && && && && && &Mask-position
& && && && && && &Mask-repeat
& && && && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
width:1200
height:600
background:url(1.png) no-
background-size:100% 100%;
border:10px solid #000;
-webkit-mask:url(3.png) no-
transition:3s;
.box:hover{
-webkit-mask-position:100% 100%;
&div class=&box&&
4.过渡和2d转换
& && & 4.1 2d变换
& && && && & transform
& && && && && && & rotate()&&旋转函数 取值度数
& && && && && && && && °&&度数
& && && && && && && && &Transform-origin 旋转的基点
& && && && && && & skew() 倾斜函数 取值度数
& && && && && && && && & skewX()
& && && && && && && && & skewY()
& && && && && && & scale() 缩放函数 取值 正数、负数和小数
& && && && && && && && & scaleX()
& && && && && && && && & scaleY()
& && && && && && & translate() 位移函数
& && && && && && && && & translateX()
& && && && && && && && & translateY()
& && && && && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
border:1px solid #000;
height:400
margin-top:200
margin-left:20
height:100
background:
transition:2s;
body:hover .box{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
height:100
background:
transition:2s;
body:hover .box1{
-webkit-transform:skewX(45deg);
-moz-transform:skewX(45deg);
transform:skewX(45deg);
height:100
background:
transition:2s;
body:hover .box2{
-webkit-transform:skewY(45deg);
-moz-transform:skewY(45deg);
transform:skewY(45deg);
height:100
background:
transition:2s;
body:hover .box3{
-webkit-transform:skew(15deg,30deg);
-moz-transform:skew(15deg,30deg);
transform:skew(15deg,30deg);
padding:0;
list-style:
text-align:
border:1px solid #
background:
font:12px/30px &宋体&;
-webkit-transform:skewX(30deg);
-moz-transform:skewX(30deg);
transform:skewX(30deg);
text-decoration:
-webkit-transform:skewX(-30deg);
-moz-transform:skewX(-30deg);
transform:skewX(-30deg);
height:100
background:
transition:2s;
body:hover .box4{
-webkit-transform:scaleX(2);
-moz-transform:scaleX(2);
transform:scaleX(2);
height:100
background:
transition:2s;
body:hover .box5{
-webkit-transform:scaleY(0.5);
-moz-transform:scaleY(0.5);
transform:scaleY(0.5);
height:100
background:
transition:2s;
body:hover .box6{
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
transform:scale(0.5);
height:100
background:
transition:2s;
body:hover .box7{
-webkit-transform:translateX(100px);
-moz-transform:translateX(100px);
transform:translateX(100px);
height:100
background:
transition:2s;
body:hover .box8{
-webkit-transform:translateY(-100px);
-moz-transform:translateY(-100px);
transform:translateY(-100px);
height:100
background:
transition:2s;
body:hover .box9{
-webkit-transform:translate(100px,200px);
-moz-transform:translate(100px,200px);
transform:translate(100px,200px);
&div class=&box&&111&/div&
&div class=&box1&&111&/div&
&div class=&box2&&111&/div&
&div class=&box3&&111&/div&
&li&&a href=&#&&生生世世&/a&&/li&
&li&&a href=&#&&和和美美&/a&&/li&
&div class=&box4&&111&/div&
&div class=&box5&&111&/div&
&div class=&box6&&111&/div&
&div class=&box7&&111&/div&
&div class=&box8&&111&/div&
&div class=&box9&&111&/div&
& && & 4.2 transition过渡
& && && && & transition-property&&要运动的样式&&（all || [attr] || none）
& && && && & transition-duration 运动时间
& && && && & transition-delay 延迟时间
& && && && & transition-timing-function 运动形式
& && && && && && &&&ease：（逐渐变慢）默认值
& && && && && && &&&linear：（匀速）
& && && && && && &&&ease-in：(加速)
& && && && && && &&&ease-out：（减速）
& && && && && && &&&ease-in-out：（先加速后减速）
& && && && && && &&&cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） /ceaser/
& && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
margin-left:20
height:100
background:
transition:3s all ease-in-
.box:hover{
height:200
background:
height:100
background:
transition:3s all cubic-bezier(1.000, -0.600, 0.405, 1.650);
.box1:hover{
height:200
background:
height:100
background:
transition:3s width,5s 2s height,7s 2
.box2:hover{
height:400
background:
&div class=&box&&&/div&
&div class=&box1&&&/div&
&div class=&box2&&&/div&
& && & 4.3 transitionend事件
& && && && & 过渡完成事件
& && && && && && &&&Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){},false);
& && && && && && &&&firefox: obj.addEventListener('transitionend',function(){},false);
& && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
height:100
background:
transition:3s width,2
&div class=&box& id=&box&&&/div&
var oBox=document.getElementById(&box&);
oBox.onclick=function(){
this.style.width = this.offsetWidth+100+&px&;
this.style.height = this.offsetHeight+100+&px&;
addEnd(oBox,end);
function end(){
this.style.width = this.offsetWidth+100+&px&;
this.style.height = this.offsetHeight+100+&px&;
removeEnd(this,end)
function addEnd(obj,fn){
obj.addEventListener('webkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
function removeEnd(obj,fn){
obj.removeEventListener('webkitTransitionEnd',fn,false);
obj.removeEventListener('transitionend',fn,false);
& && && && & transform 变换基点& &transform-origin
& && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
height:100
background:
margin:150
transition:2s;
-webkit-transform-origin:
-moz-transform-origin:
transform-origin:
body:hover .box{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform-origin:
-moz-transform-origin:
transform-origin:
body:hover .box1{
-webkit-transform:rotate(360deg) scale(0.5);
-moz-transform:rotate(360deg) scale(0.5);
transform:rotate(360deg) scale(0.5);
-webkit-transform-origin:60px 60
-moz-transform-origin:60px 60
transform-origin:60px 60
body:hover .box2{
-webkit-transform:rotate(360deg) scale(0.5);
-moz-transform:rotate(360deg) scale(0.5);
transform:rotate(360deg) scale(0.5);
&div class=&box&&&/div&
&div class=&box1&&&/div&
&div class=&box2&&&/div&
& && && && &&&Transform 执行顺序问题 -- 后写先执行
& && && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
height:100
background:
transition:2s;
body:hover .box1{
-webkit-transform:translateX(100px) scale(0.5);
-moz-transform:translateX(100px) scale(0.5);
transform:translateX(100px) scale(0.5);
body:hover .box2{
-webkit-transform:scale(0.5) translateX(100px);
-moz-transform:scale(0.5) translateX(100px);
transform:scale(0.5) translateX(100px);
&div class=&box1&&
&div class=&box2&&
& && && && &&&
& && & 4.4 扇形导航
& && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
height:100%;
background:#f9f9f9;
#menuList{
#menuList span{
display:inline-
border-radius:20% 40%;
background:#0F3;
border-radius:30% 20%;
background:#f00;
window.onload=function(){
var oHome = document.getElementById(&home&);
var oSpan = document.getElementsByTagName(&span&);
oHome.off=
setCss(oHome,{$Transition:&0.5s ease all&});
for(var i=0;i&oSpan.i++){
oSpan[i].deg=90/(oSpan.length-1)*i
oSpan[i].index=i;
oSpan[i].onclick=function(){
setCss(obj,{$Transition:&0.5s ease all&,$Transform:&scale(2) rotate(-360deg)&,opacity:0.2});
setTimeout(function(){
setCss(obj,{$Transition:&0.1s ease all&,$Transform:&scale(1) rotate(-360deg)&,opacity:1});
oHome.onclick=function(){
if(this.off){
setCss(this,{$Transform:&rotate(-360deg)&});
setCss(this,{$Transform:&rotate(0deg)&});
for(var i=0;i&oSpan.i++){
if(this.off){
toMove(oSpan[i],i*50,this.off);
toMove(oSpan[i],(oSpan.length-i-1)*50,this.off);
this.off = !this.
function toMove(obj,delay,bType){
if(obj.timer){
clearTimeout(obj.timer);
obj.timer=setTimeout(function(){
if(bType){
var oXY = getXY(obj.deg,-150);
setCss(obj,{
$Transition:&0.3s all ease-in&,
left:Math.round(oXY.x*1.1)+&px&,
top:Math.round(oXY.y*1.1)+&px&,
$Transform:&rotate(-360deg)&
obj.timer=setTimeout(function(){
setCss(obj,{
$Transition:&0.3s all ease-in&,
left:Math.round(oXY.x*0.9)+&px&,
top:Math.round(oXY.y*0.9)+&px&,
$Transform:&rotate(-360deg)&
obj.timer=setTimeout(function(){
setCss(obj,{
$Transition:&0.3s all ease-in&,
left:Math.round(oXY.x)+&px&,
top:Math.round(oXY.y)+&px&,
$Transform:&rotate(-360deg)&
setCss(obj,{
MozTransition:&0.4s -moz-transform linear,0.3s 0.35s left ease,0.3s 0.35s top ease&,
OTransition:&0.3s 0.35s left ease,0.3s 0.35s top ease,0.4s -o-transform linear&,
WebkitTransition:&0.3s 0.35s left ease,0.3s 0.35s top ease,0.4s -webkit-transform linear&,
left:&0px&,
top:&0px&,
$Transform:&rotate(0deg)&
function getXY(iDeg,iRadius){
if(iDeg == 0){
return {x:0,y:iRadius};
}else if(iDeg == 90){
return {x:iRadius,y:0}
return {x:Math.sin(iDeg*Math.PI/180)*iRadius,y:Math.cos(iDeg*Math.PI/180)*iRadius};
function setCss(obj,oAttr){
var sName = '';
var aName = [&Webkit&,&Moz&,&O&];
for(sName in oAttr){
if(sName.charAt(0) === &$&){
for(var i=0;i&aName.i++)
obj.style[aName[i]+sName.substring(1)]=oAttr[sName];
obj.style[sName.substring(1)]=oAttr[sName];
obj.style[sName] = oAttr[sName];
&div id=&menu&&
&div id=&menuList&&
&span&&/span&
&span&&/span&
&span&&/span&
&span&&/span&
&span&&/span&
&div id=&home&&&/div&
& && & 4.5 钟表效果
& && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
&style id=&css&&
height:200
margin:100
border:1px solid #000;
border-radius:50%;
padding:0;
list-style:
background:#000;
-webkit-transform-origin:center 100
-moz-transform-origin:center 100
transform-origin:center 100
li:nth-child(5n+1){
background:#000;
-webkit-transform-origin:
-moz-transform-origin:
transform-origin:
background:#999;
-webkit-transform-origin:
-moz-transform-origin:
transform-origin:
background:#f00;
-webkit-transform-origin:
-moz-transform-origin:
transform-origin:
border-radius:50%;
background:#000;
&div class=&wrap&&
&ul id=&list&&
&div id=&hour&&&/div&
&div id=&min&&&/div&
&div id=&sec&&&/div&
&div class=&cir&&&/div&
var oList = document.getElementById(&list&);
var oCss = document.getElementById(&css&);
var oSec = document.getElementById(&sec&);
var oMin = document.getElementById(&min&);
var oHour = document.getElementById(&hour&);
var oLi='';
var sCss='';
for(var i=0;i&60;i++){
sCss+=&.wrap ul li:nth-of-type(&+(i+1)+&){-webkit-transform:rotate(&+i*6+°);-moz-transform:rotate(&+i*6+°);transform:rotate(&+i*6+°);}&;
oLi+='&li&&/li&';
oList.innerHTML = oLi;
oCss.innerHTML += sC
setInterval(toTime,1000);
function toTime(){
var date= new Date();
var iSec= date.getSeconds();
var iMin= date.getMinutes() + iSec/60;
var iHour= date.getHours() + iSec/60;
oSec.style.WebkitTransform='rotate('+iSec*6+'deg)';
oMin.style.WebkitTransform='rotate('+iMin*6+'deg)';
oHour.style.WebkitTransform='rotate('+iHour*30+'deg)';
oSec.style.MozTransform='rotate('+iSec*6+'deg)';
oMin.style.MozTransform='rotate('+iMin*6+'deg)';
oHour.style.MozTransform='rotate('+iHour*30+'deg)';
oSec.style.transform='rotate('+iSec*6+'deg)';
oMin.style.transform='rotate('+iMin*6+'deg)';
oHour.style.transform='rotate('+iHour*30+'deg)';
& && && &&&matrix(a,b,c,d,e,f) 矩阵函数
& && && && && && &&&通过矩阵实现缩放
& && && && && && && && && &x轴缩放 a=x*a& & c=x*c& &&&e=x*e;
& && && && && && && && && &y轴缩放 b=y*b& &d=y*d& &&&f=y*f;
& && && && && && &&&通过矩阵实现位移
& && && && && && && && && &x轴位移: e=e+x
& && && && && && && && && &y轴位移: f=f+y
& && && && && && &&&通过矩阵实现倾斜
& && && && && && && && && &x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
& && && && && && && && && &y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
& && && &&&matrix(a,b,c,d,e,f) 矩阵函数
& && && && && && &&&通过矩阵实现旋转
& && && && && && && && && & a=Math.cos(deg/180*Math.PI);
& && && && && && && && && & b=Math.sin(deg/180*Math.PI);
& && && && && && && && && & c=-Math.sin(deg/180*Math.PI);
& && && && && && && && && & d=Math.cos(deg/180*Math.PI);
& && && && && && && &变换兼容IE9以下IE版本只能通过矩阵来实现
& && && && && && && && && & filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
& && && && && && && && && & IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d
5.3d变换和动画
& && & 5.1 3d变换
& && && && & transform-style（preserve-3d） 建立3D空间
& && && && & Perspective 景深
& && && && & Perspective- origin 景深基点
& && && && & Transform 新增函数
& && && && && && && &rotateX()
& && && && && && && &rotateY()
& && && && && && && &rotateZ()
& && && && && && && &translateZ()
& && && && && && && &scaleZ()
& && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
height:100
padding:100
border:5px solid #000;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-perspective:100
.wrap div{
height:100
background:#9F0;
margin:20px 0;
transition:2s;
font-size:50
text-align:
line-height:100
.wrap:hover .box:nth-of-type(1){
-webkit-transform:rotateX(180deg);
-moz-transform:rotateX(180deg);
transform:rotateX(180deg);
.wrap:hover .box:nth-of-type(2){
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg);
.wrap:hover .box:nth-of-type(3){
-webkit-transform:rotateZ(180deg);
-moz-transform:rotateZ(180deg);
transform:rotateZ(180deg);
.wrap:hover .box:nth-of-type(4){
-webkit-transform:translateZ(5px);
-moz-transform:translateZ(5px);
transform:translateZ(5px);
.wrap:hover .box:nth-of-type(5){
-webkit-transform:translateZ(-100px);
-moz-transform:translateZ(-100px);
transform:translateZ(-100px);
&div class=&wrap&&
&div class=&box&&1
&div class=&box&&2
&div class=&box&&3
&div class=&box&&4
&div class=&box&&5
& && && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
height:100
padding:100
border:5px solid #000;
margin:100
-webkit-perspective:600
-moz-perspective:600
perspective:600
-webkit-perspective-origin:center center -50
-moz-perspective-origin:center center -50
perspective-origin:center center -50
height:100
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
transition:2s;
background:
height:100
font-size:50
text-align:
line-height:100
.box div:nth-of-type(1){
background:#090;
-webkit-transform-origin:
-moz-transform-origin:
transform-origin:
-webkit-transform:rotateX(90deg);
-moz-transform:rotateX(90deg);
transform:rotateX(90deg);
.box div:nth-of-type(2){
background:#09F;
-webkit-transform-origin:
-moz-transform-origin:
transform-origin:
-webkit-transform:rotateY(-90deg);
-moz-transform:rotateY(-90deg);
transform:rotateY(-90deg);
.box div:nth-of-type(3){
background:#9F0;
.box div:nth-of-type(4){
background:#F00;
-webkit-transform-origin:
-moz-transform-origin:
transform-origin:
-webkit-transform:rotateY(90deg);
-moz-transform:rotateY(90deg);
transform:rotateY(90deg);
.box div:nth-of-type(5){
background:#F0F;
-webkit-transform-origin:
-moz-transform-origin:
transform-origin:
-webkit-transform:rotateX(-90deg);
-moz-transform:rotateX(-90deg);
transform:rotateX(-90deg);
.box div:nth-of-type(6){
background:#0FF;
-webkit-transform:translateZ(-100px) rotateX(180deg);
-moz-transform:translateZ(-100px) rotateX(180deg);
transform:translateZ(-100px) rotateX(180deg);
.wrap:hover .box{
-webkit-transform:rotateX(180deg);
-moz-transform:rotateX(180deg);
transform:rotateX(180deg);
&div class=&wrap&&
&div class=&box&&
&div&1&/div&
&div&2&/div&
&div&3&/div&
&div&4&/div&
&div&5&/div&
&div&6&/div&
& && & 5.2 3d幻灯片
& && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
&style id=&css&&
body,ul,ol{
padding:0;
list-style:
margin:100px auto 0;
height:360
-webkit-perspective:800
-moz-perspective:800
perspective:800
#picList li{
height:360
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform-origin:center center -180
-moz-transform-origin:center center -180
transform-origin:center center -180
#picList li a{
width:100%;
height:100%;
#picList li a:nth-of-type(1){
background:url(3dimgs/1.jpg) no-
#picList li a:nth-of-type(2){
background:url(3dimgs/2.jpg) no-
-webkit-transform-origin:
-webkit-transform-origin:
-webkit-transform-origin:
-webkit-transform:rotateX(90deg);
-moz-transform:rotateX(90deg);
transform:rotateX(90deg);
#picList li a:nth-of-type(3){
background:url(3dimgs/3.jpg) no-
-webkit-transform:translateZ(-360px) rotateX(180deg);
-moz-transform:translateZ(-360px) rotateX(180deg);
transform:translateZ(-360px) rotateX(180deg);
#picList li a:nth-of-type(4){
background:url(3dimgs/4.jpg) no-
-webkit-transform-origin:
-webkit-transform-origin:
-webkit-transform-origin:
-webkit-transform:rotateX(-90deg);
-moz-transform:rotateX(-90deg);
transform:rotateX(-90deg);
#picList li span{
height:360
background:#333;
#picList li span:nth-of-type(1){
-webkit-transform-origin:
-webkit-transform-origin:
-webkit-transform-origin:
-webkit-transform:rotateY(90deg);
-moz-transform:rotateY(90deg);
transform:rotateY(90deg);
#picList li span:nth-of-type(2){
-webkit-transform-origin:
-webkit-transform-origin:
-webkit-transform-origin:
-webkit-transform:rotateY(-90deg);
-moz-transform:rotateY(-90deg);
transform:rotateY(-90deg);
padding:10px 0;
background:#000;
border-radius:50%;
font:italic 24px/40px &宋体&;
margin:0 10
text-align:
#btns li.active{
background:#F60;
window.onload=function(){
var oPicList = document.getElementById(&picList&);
var oCss = document.getElementById(&css&);
var aBtns = document.getElementById(&btns&).getElementsByTagName(&li&);
var iLiw=25;
var iLength = oPicList.clientWidth/iL
var oLi = '';
var sCss = '';
var iIndex = 0;
var iNow = 0;
for(var i=0;i&iLi++){
i&iLength/2?iIndex--:iIndex++;
sCss += '#picList li:nth-of-type('+(i+1)+') a{background-position:-'+i*iLiw+'px 0;}';
sCss += '#picList li:nth-of-type('+(i+1)+'){z-index:'+iIndex+'}';
oLi += '&li&&a href=&#&&&/a&&a href=&#&&&/a&&a href=&#&&&/a&&a href=&#&&&/a&&span&&/span&&span&&/span&&/li&';
oPicList.innerHTML = oLi;
oCss.innerHTML += sC
aLi = oPicList.
for(var i=0;i&aBtns.i++){
(function(a){
aBtns[a].onclick=function(){
for(var i=0;i&aLi.i++){
aLi[i].style.transition = '0.5s '+i*30+'ms';
aLi[i].style.WebkitTransform = 'rotateX(-'+a*90+'deg)';
this.className = 'active';
aBtns[iNow].className = '';
&div class=&wrap&&
&ul id=&picList&&
&ol id=&btns&&
&li class=&active&&1&/li&
&li&2&/li&
&li&3&/li&
&li&4&/li&
& && && && &&&
& && & 5.3 animation
& && && && &&&关键帧----keyFrames
& && && && && && & 类似于flash
& && && && && && && && &&&只需指明两个状态，之间的过程由计算机自动计算
& && && && && && & 关键帧的时间单位
& && && && && && && && &&&数字：0%、25%、100%等
& && && && && && && && &&&字符：from(0%)、to(100%)
& && && && && && & 格式
& && && && && && && &&&@keyframes 动画名称
& && && && && && && &&&{
& & & && && && && && && && && & 动画状态
& && && && && && && &&&}
& && && && &&&调用的标签(#div1、xxx:hover之类的)
& && && && && && &&&必要属性
& && && && && && && && && &animation-name& & & & & & & & 动画名称（关键帧名称）
& && && && && && && && && &animation-duration& & & & & & & & 动画持续时间
& && && && && && && &例如：
& && && && && && && && && & -webkit-animation-name: ‘move';
& && && && && && && && && & -webkit-animation-duration: 4s;
& && && && && && && & animation-play-state 播放状态（ running 播放 和paused 暂停 ）
& && && && && &可选属性
& && && && && && && & animation-timing-function& & & & 动画运动形式
& && && && && && && && && &&&linear& & & & 匀速。
& && && && && && && && && &&&ease& & & & & & & & 缓冲。
& && && && && && && && && &&&ease-in& & & & 由慢到快。
& && && && && && && && && &&&ease-out& & & & 由快到慢。
& && && && && && && && && &&&ease-in-out& & & & 由慢到快再到慢。
& && && && && && && && && &&&cubic-bezier(number, number, number, number)：& & & & 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
& && && && && & 可选属性(2)
& && && && && && && && && &animation-delay& & & & & & & & & & & & 动画延迟
& && && && && && && && && && && &&&只是第一次
& && && && && && && && && &animation-iteration-count& & & & & & & & 重复次数
& && && && && && && && && && && && &infinite为无限次
& && && && && && && && && &animation-direction& & & & & & & & & & & & 播放前重置
& && && && && && && && && && && &&&动画是否重置后再开始播放
& && && && && && && && && && && &&&alternate& & & & 动画直接从上一次停止的位置开始执行
& && && && && && && && && && && &&&normal& & & & 动画第二次直接跳到0%的状态开始执行
& && && && & animate----和JS结合
& && && && && &&&通过class
& && && && && && && &&&在class里加入animation的各种属性
& && && && && && && &&&直接给元素加-webkit-animation-xxx样式
& && && && && & animation的问题
& && && && && && && &&&写起来麻烦
& && && && && && && &&&没法动态改变目标点位置
& && && && &&&obj.addEventListener('webkitAnimationEnd', function (){}, false);
& && && && && &html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
height:100
background:
-webkit-animation:2
-moz-animation:2
animation:2
@-webkit-keyframes move{
background:
background:
background:
@-moz-keyframes move{
background:
background:
background:
@keyframes move{
background:
background:
background:
height:100
margin:10px 0;
background:
-webkit-animation:4s move2 ease-
-moz-animation:4s move2 ease-
animation:4s move2 ease-
@-webkit-keyframes move2{
background:
background:
background:
@-moz-keyframes move2{
background:
background:
background:
@keyframes move2{
background:
background:
background:
height:100
margin:10px 0;
background:
-webkit-animation:4s 2s move3 ease-
-moz-animation:4s 2s move3 ease-
animation:4s 2s move3 ease-
@-webkit-keyframes move3{
background:
background:
background:
@-moz-keyframes move3{
background:
background:
background:
@keyframes move3{
background:
background:
background:
height:100
margin:10px 0;
background:
-webkit-animation:4s 2s move4 ease-in 3;
-moz-animation:4s 2s move4 ease-in 3;
animation:4s 2s move4 ease-in 3;
@-webkit-keyframes move4{
background:
background:
background:
@-moz-keyframes move4{
background:
background:
background:
@keyframes move4{
background:
background:
background:
height:400
border:5px solid #000;
height:100
background:
-webkit-animation:4s domov
-moz-animation:4s domov
animation:4s domov
@-webkit-keyframes domove{
@-moz-keyframes domove{
@keyframes domove{
#wrap:hover #anBox{
-webkit-animation-play-state :
-moz-animation-play-state :
animation-play-state :
height:100
background:
@-webkit-keyframes move5{
background:
background:
background:
@-moz-keyframes move5{
background:
background:
background:
@keyframes move5{
background:
background:
background:
-webkit-animation:2s move5;
-moz-animation:2s move5;
animation:2s move5;
background:
&div class=&box1&&
&div class=&box2&&
&div class=&box3&&
&div class=&box4&&
&div id=&wrap&&
&div id=&anBox&&&/div&
&div class=&box5& id=&box5&&
document.getElementById(&box5&).onclick=function(){
this.className = &box5 move&;
addEnd(this,fn);
function fn(){
alert(&end&);
function addEnd(obj,fn){
obj.addEventListener('webkitAnimationEnd',fn, false);
obj.addEventListener('wanimationend',fn, false);
& && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
@-webkit-keyframes move{
@-moz-keyframes move{
@keyframes move{
height:100
border:1px solid #000;
margin:100
width:200%;
padding:0;
-webkit-animation:5s
-moz-animation:5s
animation:5s
border:1px solid #
list-style:
background:#000;
text-align:
font:40px/98px A
#wrap:hover #list{
-webkit-animation-play-state:
-moz-animation-play-state:
animation-play-state:
&div id=&wrap&&
&ul id=&list&&
&li&1&/li&
&li&2&/li&
&li&3&/li&
&li&4&/li&
&li&5&/li&
&li&1&/li&
&li&2&/li&
&li&3&/li&
&li&4&/li&
&li&5&/li&
& && & 5.4 3d图片轮换
& && && && &&&html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
height:300
-webkit-perspective:800
-moz-perspective:800
perspective:800
padding:0;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
#wrap ul li{
list-style:
height:300
-webkit-transform-origin:
-moz-transform-origin:
transform-origin:
-webkit-transform:rotateX(-180deg);
-moz-transform:rotateX(-180deg);
transform:rotateX(-180deg);
opacity:0;
#wrap ul li img{
height:300
#wrap span{
border-radius:50%;
text-align:
background:#0C6;
line-height:60
font-size:16
#wrap span:nth-of-type(1){
#wrap span:nth-of-type(2){
right:-100
@-webkit-keyframes show{
-webkit-transform:rotateX(180deg);
-moz-transform:rotateX(180deg);
transform:rotateX(180deg);
opacity:0;
-webkit-transform:rotateX(-25deg);
-moz-transform:rotateX(-25deg);
transform:rotateX(-25deg);
opacity:1;
-webkit-transform:rotateX(18deg);
-moz-transform:rotateX(18deg);
transform:rotateX(18deg);
opacity:1;
-webkit-transform:rotateX(-15deg);
-moz-transform:rotateX(-15deg);
transform:rotateX(-15deg);
opacity:1;
-webkit-transform:rotateX(8deg);
-moz-transform:rotateX(8deg);
transform:rotateX(8deg);
opacity:1;
-webkit-transform:rotateX(-6deg);
-moz-transform:rotateX(-6deg);
transform:rotateX(-6deg);
opacity:1;
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
opacity:1;
@-moz-keyframes show{
-webkit-transform:rotateX(180deg);
-moz-transform:rotateX(180deg);
transform:rotateX(180deg);
opacity:0;
-webkit-transform:rotateX(-25deg);
-moz-transform:rotateX(-25deg);
transform:rotateX(-25deg);
opacity:1;
-webkit-transform:rotateX(18deg);
-moz-transform:rotateX(18deg);
transform:rotateX(18deg);
opacity:1;
-webkit-transform:rotateX(-15deg);
-moz-transform:rotateX(-15deg);
transform:rotateX(-15deg);
opacity:1;
-webkit-transform:rotateX(8deg);
-moz-transform:rotateX(8deg);
transform:rotateX(8deg);
opacity:1;
-webkit-transform:rotateX(-6deg);
-moz-transform:rotateX(-6deg);
transform:rotateX(-6deg);
opacity:1;
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
opacity:1;
@keyframes show{
-webkit-transform:rotateX(180deg);
-moz-transform:rotateX(180deg);
transform:rotateX(180deg);
opacity:0;
-webkit-transform:rotateX(-25deg);
-moz-transform:rotateX(-25deg);
transform:rotateX(-25deg);
opacity:1;
-webkit-transform:rotateX(18deg);
-moz-transform:rotateX(18deg);
transform:rotateX(18deg);
opacity:1;
-webkit-transform:rotateX(-15deg);
-moz-transform:rotateX(-15deg);
transform:rotateX(-15deg);
opacity:1;
-webkit-transform:rotateX(8deg);
-moz-transform:rotateX(8deg);
transform:rotateX(8deg);
opacity:1;
-webkit-transform:rotateX(-6deg);
-moz-transform:rotateX(-6deg);
transform:rotateX(-6deg);
opacity:1;
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
opacity:1;
@-webkit-keyframes hide{
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
opacity:1;
-webkit-transform:rotateX(-180deg);
-moz-transform:rotateX(-180deg);
transform:rotateX(-180deg);
opacity:0;
@-moz-keyframes hide{
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
opacity:1;
-webkit-transform:rotateX(-180deg);
-moz-transform:rotateX(-180deg);
transform:rotateX(-180deg);
opacity:0;
@keyframes hide{
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
opacity:1;
-webkit-transform:rotateX(-180deg);
-moz-transform:rotateX(-180deg);
transform:rotateX(-180deg);
opacity:0;
#wrap ul li.show{
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
opacity:1;
-webkit-animation:1
-moz-animation:1
animation:1
#wrap ul li.hide{
-webkit-transform:rotateX(-180deg);
-moz-transform:rotateX(-180deg);
transform:rotateX(-180deg);
opacity:0;
-webkit-animation:0.6
-moz-animation:0.6
animation:0.6
window.onload=function(){
var aBtns = document.getElementById(&wrap&).getElementsByTagName(&span&);
var oLi = document.getElementById(&list&).getElementsByTagName(&li&);
var iNow = 0;
aBtns[0].onclick=function(){
oLi[iNow].className = 'hide';
if(iNow & 0){
iNow = oLi.length-1;
oLi[iNow].className = 'show';
aBtns[1].onclick=function(){
oLi[iNow].className = 'hide';
if(iNow &= oLi.length){
oLi[iNow].className = 'show';
&div id=&wrap&&
&span&上一张&/span&
&ul id=&list&&
&li class=&show&&&img src=&3dimgs/img1.jpg& /&&/li&
&li&&img src=&3dimgs/img2.jpg& /&&/li&
&li&&img src=&3dimgs/img3.jpg& /&&/li&
&li&&img src=&3dimgs/img4.jpg& /&&/li&
&li&&img src=&3dimgs/img5.jpg& /&&/li&
&span&下一张&/span&
& && && && &
& && & 5.5 css3折纸
& && && && & html 代码效果预览&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&无标题文档&/title&
padding:0;
-webkit-perspective:800
-moz-perspective:800
perspective:800
background:#F60;
text-align:
font:20px/40px &微软雅黑&;
z-index:10;
#wrap div{
width:100%;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform-origin:
-moz-transform-origin:
transform-origin:
-webkit-transform:rotateX(-120deg);
-moz-transform:rotateX(-120deg);
transform:rotateX(-120deg);
#wrap & div{
#wrap div span{
width:100%;
font:16px/30px &宋体&;
background:#0C3;
text-indent:20
box-shadow:inset 0 0 0 20px rgba(0,0,0,1);
transition:1s;
@-webkit-keyframes open{
-webkit-transform:rotateX(-120deg);
-moz-transform:rotateX(-120deg);
transform:rotateX(-120deg);
-webkit-transform:rotateX(30deg);
-moz-transform:rotateX(30deg);
transform:rotateX(30deg);
-webkit-transform:rotateX(-15deg);
-moz-transform:rotateX(-15deg);
transform:rotateX(-15deg);
-webkit-transform:rotateX(8deg);
-moz-transform:rotateX(8deg);
transform:rotateX(8deg);
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
@-moz-keyframes open{
-webkit-transform:rotateX(-120deg);
-moz-transform:rotateX(-120deg);
transform:rotateX(-120deg);
-webkit-transform:rotateX(30deg);
-moz-transform:rotateX(30deg);
transform:rotateX(30deg);
-webkit-transform:rotateX(-15deg);
-moz-transform:rotateX(-15deg);
transform:rotateX(-15deg);
-webkit-transform:rotateX(8deg);
-moz-transform:rotateX(8deg);
transform:rotateX(8deg);
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
@keyframes open{
-webkit-transform:rotateX(-120deg);
-moz-transform:rotateX(-120deg);
transform:rotateX(-120deg);
-webkit-transform:rotateX(30deg);
-moz-transform:rotateX(30deg);
transform:rotateX(30deg);
-webkit-transform:rotateX(-15deg);
-moz-transform:rotateX(-15deg);
transform:rotateX(-15deg);
-webkit-transform:rotateX(8deg);
-moz-transform:rotateX(8deg);
transform:rotateX(8deg);
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
@-webkit-keyframes clos{
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
-webkit-transform:rotateX(-120deg);
-moz-transform:rotateX(-120deg);
transform:rotateX(-120deg);
@-moz-keyframes clos{
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
-webkit-transform:rotateX(-120deg);
-moz-transform:rotateX(-120deg);
transform:rotateX(-120deg);
@keyframes clos{
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
-webkit-transform:rotateX(-120deg);
-moz-transform:rotateX(-120deg);
transform:rotateX(-120deg);
#wrap div.show{
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
transform:rotateX(0deg);
-webkit-animation:2
-moz-animation:2
animation:2
#wrap div.show&span{
box-shadow:inset 0 0 0 20px rgba(0,0,0,0);
#wrap div.hide{
-webkit-transform:rotateX(-120deg);
-moz-transform:rotateX(-120deg);
transform:rotateX(-120deg);
-webkit-animation:0.8
-moz-animation:0.8
animation:0.8
&div id=&wrap&&
&h1 id=&btn&&点击我&/h1&
&span&1111&/span&
&span&2222&/span&
&span&3333&/span&
&span&4444&/span&
&span&5555&/span&
&span&6666&/span&
&span&7777&/span&
&span&8888&/span&
window.onload = function(){
var oWrap = document.getElementById(&wrap&);
var oBtn = document.getElementById(&btn&);
var aDiv = document.getElementById(&wrap&).getElementsByTagName(&div&);
var iDelay = 200;
var oTimer =
var bOff =
var i = 0;
oBtn.onclick=function(){
if(oTimer){
oTimer = setInterval(function(){
aDiv[i].className=&show&;
if(i == aDiv.length){
clearInterval(oTimer);
i = aDiv.length-1;
oTimer = setInterval(function(){
aDiv[i].className=&hide&;
if(i & 0){
clearInterval(oTimer);
104 总笔记数
8.3万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：