@fantaghiro
2014-12-01T09:33:56.000000Z
字数 60651
阅读 1891
学习笔记 js 前端 妙味课堂 CSS3
学习CSS3之前先讲几个问题：
属性选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS3选择器</title><style>p {height: 30px; border: 1px solid #000;}/*p[miaov] {background: red;} */ /*所有四个*//*p[miaov=g-xM] {background: red;}*/ /*第四个小美*//*p[miaov~=old] {background: red;}*/ /*第一个leo*//*p[miaov^=g] {background: pink;}*/ /*第四个小美*//*p[miaov$=M] {background: #cc0;}*/ /*第三、四个：子鼠和小美*//*p[miaov*=d] {background: purple;}*/ /*第一、二个：leo和杜鹏*//*p[miaov|=b] {background: purple;}*/ /*第一、二、三和最后一个：leo、杜鹏和子鼠、无名氏*/</style></head><body><p miaov="b-leo old">leo</p><p miaov="b-dp">杜鹏</p><p miaov="b-zM">子鼠</p><p miaov="g-xM">小美</p><p miaov="b">无名氏</p></body></html>
实例：百度文库
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>百度文库</title><style>p {height: 30px; line-height: 30px; font-size: 12px; border: 1px solid #000;}p a {background: url(img/w.gif) no-repeat 3px center; padding-left: 20px; display: block;}p a[href*=text]{background: url(img/text.gif) no-repeat 3px center;}p a[href*=pdf]{background: url(img/swf.gif) no-repeat 3px center;}p a[href*=exl]{background: url(img/x.gif) no-repeat 3px center;}</style></head><body><p><a href="http://www.miaov.com/doc/javascript.html">妙味课堂</a></p><p><a href="http://www.miaov.com/text/javascript.html">妙味课堂</a></p><p><a href="http://www.miaov.com/pdf/javascript.html">妙味课堂</a></p><p><a href="http://www.miaov.com/doc/javascript.html">妙味课堂</a></p><p><a href="http://www.miaov.com/exl/javascript.html">妙味课堂</a></p></body></html>
结构性伪类
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>结构性伪类</title><style>p {height: 30px; border: 1px solid #000;}span {display: block; height: 20px;}/*p:nth-child(1) {background: red;} *//*注意nth-child是从1开始计数的*//*p:nth-child(odd) {background: red;} *//*奇数*//*p:nth-child(even) {background: blue;} *//*偶数*//*p:nth-child(2n) {background: green;}*//*p:nth-child(2n-1) {background: yellow;}*//*p:nth-child(3n) {background: purple;}*//*p:nth-child(2) : 找到p标签父级下的第二个子元素，并且这个元素还得是p标签*//*body *:nth-child(2) {background: red;}*//*body *:nth-last-child(2) {background: green;} */ /*:nth-last-child()代表从后往前找。:nth-child()括号中写什么，:nth-last-child()里面也可以写，都支持，只不过查找顺序变成了从后向前*//*p:nth-of-type(2) {background: red;}*/ /*找到p标签的父级下的第二个p标签*//*body *:nth-of-type(2) {background: brown;}*/ /*body下的第二个p标签和第二个h1标签都会被找到*//*p:nth-last-of-type(2) {background: purple;}*/ /*:nth-last-of-type()与:nth-of-type()都一样，只不过顺序反过来而已*//*p:first-child {background: green;}*/ /*:first-child == :nth-child(1)*//*:last-child == :nth-last-child(1)*//*:first-of-type == :nth-of-type(1)*//*:last-of-type == :nth-last-of-type(1)*//*p:empty {background: black;}*/ /*不包含子元素（子元素包括文本节点）的p标签*//*span:only-of-type {background: gray;}*//*p *:only-of-type {background: red;}*//*p *:only-child {background: blue;}*/</style></head><body><p>p1</p><h1>h1</h1><p>p2</p><h1>h2</h1><p>p3</p><h1>h3</h1><p></p><p>p5<span></span></p><p><span></span><a href="#">链接</a></p></body></html>
新浪头部导航
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>新浪头部导航</title><style>.list {margin: 0; padding: 0; list-style: none;}.list li {width: 150px; border-right: 1px solid #000; float: left;}.list li:last-of-type {border: none;}.list a {float: left; width: 40px; margin: 0 5px; font: 12px/30px "宋体"; text-align: center;}.list li a:nth-of-type(3n+1) {font-weight: bold;}.list li:nth-child(3) a:nth-child(2) {color: red;}</style></head><body><ul class="list"><li><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></li><li><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></li><li><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></li><li><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></li><li><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></li><li><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></li><li><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></li></ul></body></html>
:target伪类
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>伪类和伪元素</title><style>div {width: 300px; height: 200px; background: #000; font: 50px/200px "微软雅黑"; color: #fff; text-align: center; display: none;}div:target {display: block;}/* :target哈希值对应的东西，点击第一个a标签，第一个div就会显示出来，因为相当于给#div1设置了display: block;的样式，点击后面两个a标签同理 */</style></head><body><a href="#div1">div1</a><a href="#div2">div2</a><a href="#div3">div3</a><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div></body></html>
:disabled与:enabled
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>伪类和伪元素</title><style>input {width: 100px; height: 30px; color: #000;}input:enabled {color: red;}input:disabled {background: gray;}</style></head><body><input type="text" value="请输入" disabled></body></html>
:checked
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>伪类和伪元素</title><style>input:checked {width: 100px; height: 100px;}</style></head><body><input type="checkbox" /></body></html>
E~F
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>伪类和伪元素</title><style>p~h1 {background: red;}</style></head><body><h1>h1</h1><p>p</p><h1>h1</h1><h1>h1</h1></body></html>
模拟单选框
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>模拟单选框</title><style>label {float: left; margin: 0 5px; overflow: hidden; position: relative;}label input {position: absolute; left: -50px; top: -50px;}span {float: left; width: 50px; height: 50px; border: 3px solid #000;}input:checked~span {background: red;}</style></head><body><label><input type="radio" name="tab"><span></span></label><label><input type="radio" name="tab"><span></span></label><label><input type="radio" name="tab"><span></span></label></body></html>
文本新增伪类
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文本新增</title><style>p {width: 300px; border: 1px solid #000; font: 12px/30px "宋体"; padding: 10px;}p:first-line {background: red;}p:first-letter {font-size: 30px;} /*注意：通过:first-letter设置样式的文本是选不中的*/p::selection {background: #f60; color: #690;} /*文本被选中的样式 注意使用双冒号*/p::before {content: "MiaoV"; display: block; border: 1px solid #000;} /*::before和::after 单冒号和双冒号都认*/p::after {content: "MiaoV"; display: block; border: 1px solid #000;}</style></head><body><p>前端开发的世界从未有过无声的寂静，精彩纷呈的互联网也不曾出现片刻安宁，在HTML5&CSS3被炒至沸沸扬扬的今天，全面系统地掌握此项技能，是加重技术含金量的重要砝码！妙味课堂现已为你开启一个崭新的职业规划……</p></body></html>
排除元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>h1:not(.h2) {background: red;}</style></head><body><h1>h1</h1><h1 class="h2">h1</h1><h1>h1</h1></body></html>
背景透明、文字不透明
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>rgba</title><style>body {background: green;}.box {width: 200px; height: 200px; background: rgba(0, 0, 0, 0.5); color: #fff; font: 40px/100px "微软雅黑"; text-align: center;} /*背景透明但文字不透明*/</style></head><body><div class="box">妙味课堂</div></body></html>
背景不透明、文字透明
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>rgba</title><style>.box {width: 200px; height: 200px; background: green; color: rgba(255, 255, 255, 0.5); font: 80px/100px "微软雅黑"; text-align: center;} /*背景不透明但文字透明*/</style></head><body><div class="box">妙味课堂</div></body></html>
背景不透明、边框透明
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>rgba</title><style>.box {width: 200px; height: 190px; background: green; color: rgba(255, 255, 255, 0.5); font: 80px/90px "微软雅黑"; text-align: center; border: 10px solid rgba(0, 0, 0, 0.3);} /*边框颜色透明，会把后面背景露出来*/</style></head><body><div class="box">妙味课堂</div></body></html>
text-shadow基本应用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文字阴影</title><style>h1 { font: 100px/200px "微软雅黑"; text-align: center; text-shadow: 0 0 10px red; }</style></head><body><h1>妙味课堂</h1></body></html>
文字阴影的叠加
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文字阴影的叠加</title><style>h1 { font: 100px/200px "微软雅黑"; text-align: center; text-shadow: -5px -10px 1px red, 5px 10px 2px green, 1px 1px 5px yellow; }</style></head><body><h1>妙味课堂</h1></body></html>
浮雕文字效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文字阴影</title><style>h1 { font: 100px/200px "微软雅黑"; text-align: center; color: #fff; text-shadow: 2px 2px 4px #000; }</style></head><body><h1>妙味课堂</h1></body></html>
文字模糊效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文字模糊</title><style>h1 { font: 100px/200px "微软雅黑"; text-align: center; color: #000; text-shadow: 0 0 0 rgba(0, 0, 0, 1); border: 1px solid #000; transition: 1s; }h1:hover {color: rgba(0, 0, 0, 0); text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);}</style></head><body><h1>妙味课堂</h1></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文字描边</title><style>h1 { font: 100px/200px "微软雅黑"; text-align: center; color: #000; -webkit-text-stroke: 3px red; }</style></head><body><h1>妙味课堂</h1></body></html>
direction 定义文字排列方式(全兼容)
text-overflow 定义省略文本的处理方式
direction
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文字排版</title><style>p {width: 300px; border: 1px solid #000; font: 14px/30px "宋体"; direction: rtl; unicode-bidi: bidi-override;}</style></head><body><p>妙味课堂</p></body></html>
超出显示省略号
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文字排版</title><style>p {width: 300px; border: 1px solid #000; font: 14px/30px "宋体"; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}</style></head><body><p>妙味课堂具有人性化的IT培训机构妙味课堂具有人性化的IT培训机构</p></body></html>
@font-face {font-family: 'miaov';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: normal;font-style: normal;}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>弹性盒模型</title><style>.box {height: 100px; border: 10px solid #000; font-size: 20px; color: #fff; padding: 10px; display: -webkit-box; -webkit-box-orient: horizontal; }.box div {width: 100px; height: 100px; background: red; border: 1px solid #fff;}/* .box div:nth-of-type(1){-webkit-box-ordinal-group:2;}.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}.box div:nth-of-type(5){-webkit-box-ordinal-group:3;} */.box div:nth-of-type(1){width: 300px;}.box div:nth-of-type(2){-webkit-box-flex:2;}.box div:nth-of-type(3){-webkit-box-flex:3;}.box div:nth-of-type(4){-webkit-box-flex:4;}.box div:nth-of-type(5){-webkit-box-flex:5;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>弹性盒模型</title><style>.box {height: 200px; border: 10px solid #000; font-size: 20px; color: #fff; padding: 10px; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-box-pack: justify; -webkit-box-align: end;}.box div {width: 100px; height: 100px; background: red; border: 1px solid #fff;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>盒模型阴影</title><style>.box {width: 100px; height: 100px; margin: 100px; background: red; box-shadow: 0 0 30px 30px #000, inset 0 0 30px yellow;}</style></head><body><div class="box"></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>box-reflect 倒影</title><style>img {display: block; margin: 30px auto; -webkit-box-reflect: below 10px -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0) 70%)}</style></head><body><img src="images/Green Nature Wallpapers 10.jpg" width="400"></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>resize 自由缩放</title><style>.box {width: 100px; height: 100px; background: url('images/Green Nature Wallpapers 10.jpg'); border: 5px solid red; resize: both; overflow: auto;}</style></head><body><div class="box"></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>box-sizing</title><style>.box {width: 200px; height: 200px; padding: 50px; border: 10px solid #000; box-sizing: border-box;}.div {height: 50px; background: red;}</style></head><body><div class="box"><div class="div"></div></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>分栏布局</title><style>/* .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋体"; color: #000; text-indent: 2em; -webkit-column-width: 250px;} */.wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋体"; color: #000; text-indent: 2em; -webkit-column-count: 4; -webkit-column-gap: 30px; -webkit-column-rule: 1px dashed red;}</style></head><body><div class="wrap"><p>按校科研处部署，我社2014年科研工作量统计工作安排如下：1. 申报者按要求如实填写《个人科研工作量计分表（2014）》（附件1）。2. 成果计分方法和科研工作量考核指标请参照《上海外国语大学科研工作量化标准与奖惩办法》（附件2）。成果奖励标准请参照《上海外国语大学优秀科</p><p>按校科研处部署，我社2014年科研工作量统计工作安排如下：1. 申报者按要求如实填写《个人科研工作量计分表（2014）》（附件1）。2. 成果计分方法和科研工作量考核指标请参照《上海外国语大学科研工作量化标准与奖惩办法》（附件2）。成果奖励标准请参照《上海外国语大学优秀科</p><p>按校科研处部署，我社2014年科研工作量统计工作安排如下：1. 申报者按要求如实填写《个人科研工作量计分表（2014）》（附件1）。2. 成果计分方法和科研工作量考核指标请参照《上海外国语大学科研工作量化标准与奖惩办法》（附件2）。成果奖励标准请参照《上海外国语大学优秀科</p><p>按校科研处部署，我社2014年科研工作量统计工作安排如下：1. 申报者按要求如实填写《个人科研工作量计分表（2014）》（附件1）。2. 成果计分方法和科研工作量考核指标请参照《上海外国语大学科研工作量化标准与奖惩办法》（附件2）。成果奖励标准请参照《上海外国语大学优秀科</p><p>按校科研处部署，我社2014年科研工作量统计工作安排如下：1. 申报者按要求如实填写《个人科研工作量计分表（2014）》（附件1）。2. 成果计分方法和科研工作量考核指标请参照《上海外国语大学科研工作量化标准与奖惩办法》（附件2）。成果奖励标准请参照《上海外国语大学优秀科</p><p>按校科研处部署，我社2014年科研工作量统计工作安排如下：1. 申报者按要求如实填写《个人科研工作量计分表（2014）》（附件1）。2. 成果计分方法和科研工作量考核指标请参照《上海外国语大学科研工作量化标准与奖惩办法》（附件2）。成果奖励标准请参照《上海外国语大学优秀科</p><p>按校科研处部署，我社2014年科研工作量统计工作安排如下：1. 申报者按要求如实填写《个人科研工作量计分表（2014）》（附件1）。2. 成果计分方法和科研工作量考核指标请参照《上海外国语大学科研工作量化标准与奖惩办法》（附件2）。成果奖励标准请参照《上海外国语大学优秀科</p><p>按校科研处部署，我社2014年科研工作量统计工作安排如下：1. 申报者按要求如实填写《个人科研工作量计分表（2014）》（附件1）。2. 成果计分方法和科研工作量考核指标请参照《上海外国语大学科研工作量化标准与奖惩办法》（附件2）。成果奖励标准请参照《上海外国语大学优秀科</p></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>圆角</title><style>/* .box {width: 200px; height: 200px; border: 1px solid #000; border-radius: 20px;} *//* .box {width: 200px; height: 200px; border: 1px solid #000; border-radius: 20px 40px;} *//* .box {width: 200px; height: 200px; border: 1px solid #000; border-radius: 20px 40px 60px;} */.box {width: 200px; height: 200px; border: 1px solid #000; border-radius: 20px 40px 60px 80px;}</style></head><body><div class="box"></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>圆角</title><style>/* .box {width: 200px; height: 300px; border: 1px solid #000; border-radius: 100px/150px;} */ /*X轴半径/y轴半径*/.box {width: 200px; height: 300px; border: 1px solid #000; border-radius: 20px 40px 60px 80px/10px 20px 30px 40px;}</style></head><body><div class="box"></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>圆角</title><style>.box {width: 200px; height: 300px; border: 1px solid #000; border-radius: 50%;}</style></head><body><div class="box"></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>圆角</title><style>.box {width: 400px; height: 400px; margin: 50px auto; transition: 5s linear;}.box div {width: 180px; height: 180px; margin: 10px; border: 1px solid #000; box-sizing: border-box; float: left; background: url('images/Green Nature Wallpapers 10.jpg') no-repeat;}.box div:nth-child(1), .box div:nth-child(4) {border-radius: 0 70%;}.box div:nth-child(2), .box div:nth-child(3) {border-radius: 70% 0;}.box:hover {-webkit-transform: rotate(720deg);}</style></head><body><div class="box"><div></div><div></div><div></div><div></div></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>线性渐变</title><style>/* .box {width: 300px; height: 300px; border: 10px solid #000; background-image: -webkit-linear-gradient(left top, red, blue);} *//* .box {width: 300px; height: 300px; border: 10px solid #000; background-image: -webkit-linear-gradient(30deg, red, blue, yellow, green);} *//* .box {width: 300px; height: 300px; border: 10px solid #000; background-image: -webkit-linear-gradient(30deg, red 30px, blue 100px);} *//* .box {width: 300px; height: 300px; border: 10px solid #000; background-image: -webkit-linear-gradient(30deg, red 0, blue 50%, green 100%);} */.box {width: 300px; height: 300px; border: 10px solid #000; background-image: -webkit-repeating-linear-gradient(30deg, red 0, blue 30px);}</style></head><body><div class="box"></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>线性渐变</title><style>.wrap {width: 200px; height: 30px; overflow: hidden; border: 1px solid #000;}.box {width: 400px; height: 30px; background: -webkit-repeating-linear-gradient(15deg, green 0, green 10px, #fff 10px, #fff 20px); transition: 3s linear;}.wrap:hover .box {margin-left: -100px;}</style></head><body><div class="wrap"><div class="box"></div></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>线性渐变</title><style>.box {width: 300px; height: 300px; background: url(img/ppt.gif) no-repeat, url(images/1.png) repeat-y right 0;}</style></head><body><div class="box"></div></body></html>
百度音乐图片光影效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>线性渐变</title><style>.box {width: 300px; height: 300px; background: -webkit-linear-gradient(-30deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 155px, rgba(255, 255, 255, 0.9) 170px, rgba(255, 255, 255, 0.9) 180px, rgba(255, 255, 255, 0) 200px) no-repeat -190px, url('images/Green Nature Wallpapers 10.jpg') no-repeat; transition: 1s;}.box:hover {background-position: 300px 0, 0 0;}</style></head><body><div class="box"></div></body></html>
线性渐变——IE兼容
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>线性渐变——IE兼容</title><style>.box {width: 300px; height: 300px; background: -webkit-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue); background: linear-gradient(red, blue); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0');}</style></head><body><div class="box"></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>径向渐变</title><style>.box {width: 300px; height: 300px; border: 1px solid #000; float: left; margin: 10px;}.box:nth-child(1) {background: -webkit-radial-gradient(100px 50px, closest-side, red, blue);}.box:nth-child(2) {background: -webkit-radial-gradient(100px 50px, closest-corner, red, blue);}.box:nth-child(3) {background: -webkit-radial-gradient(100px 50px, farthest-side, red, blue);}.box:nth-child(4) {background: -webkit-radial-gradient(100px 50px, farthest-corner, red, blue);}.box:nth-child(5) {background: -webkit-radial-gradient(100px 50px, contain, red, blue);}.box:nth-child(6) {background: -webkit-radial-gradient(100px 50px, cover, red, blue);}</style></head><body><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></body></html>
iphone开机动画
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>iphone开机动画</title><style>body {background: #000; text-align: center; font: 50px/200px "微软雅黑";}h1 {display: inline-block; color: rgba(255, 255, 255, 0.3); background: -webkit-linear-gradient(-30deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 1) 180px, rgba(255, 255, 255, 1) 240px, rgba(255, 255, 255, 0) 300px) no-repeat -300px; -webkit-background-clip: text;}</style><script>window.onload = function(){var oH1 = document.getElementsByTagName('h1')[0];var oTimer = null;var iLeft = -300;function toMove(){oTimer = setInterval(function(){iLeft+=10;if(iLeft == 1000){iLeft = -300;clearInterval(oTimer);}oH1.style.backgroundPosition = iLeft + 'px 0px';}, 20)}setInterval(function(){toMove();}, 4000)}</script></head><body><h1>MiaoV妙味课堂</h1></body></html>
transition的基本操作
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transition</title><style>.box {width: 100px; height: 100px; background: red;}/* .box {transition: 1s;} *//*.box {transition: 500ms width;}*//*.box {transition: 1s all;}*//*.box {transition: 3s width ease;}*//*.box {transition: 3s width ease-in-out;}*//*.box {transition: 3s width cubic-bezier(0.930, 0.415, 0.000, 1.610);}*//* .box {transition: 1s width, 2s height, 3s background;} */ /*多样式过渡*//*.box {transition: 1s width, 2s 1s height, 3s 3s background;}*/ /*延迟过渡*/.box:hover {background: blue; width: 500px; height: 300px;}</style><script></script></head><body><div class="box"></div></body></html>
过渡完成的事件以及问题一
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transition</title><style>.box {width: 100px; height: 100px; background: red; transition: 1s width, 2s height;}</style><script></script></head><body><div class="box" id="box"></div><script>var oBox = document.getElementById('box');//用transitionend事件，每个属性改变完一次就会触发一次oBox.onclick = function(){this.style.width = this.offsetWidth + 100 + 'px';this.style.height = this.offsetHeight + 100 + 'px';}addEnd(oBox, function(){alert('end');});function addEnd(obj, fn){obj.addEventListener('webkitTransitionEnd', fn, false);obj.addEventListener('transitionend', fn, false);}</script></body></html>
过渡完成的事件以及问题二
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transition</title><style>.box {width: 100px; height: 100px; background: red; transition: 1s width}</style><script></script></head><body><div class="box" id="box"></div><script>var oBox = document.getElementById('box');oBox.onclick = function(){this.style.width = this.offsetWidth + 100 + 'px';}//transitonend之后，又改变属性，接着又触发了transition就形成了循环addEnd(oBox, function(){this.style.width = this.offsetWidth + 100 + 'px';});function addEnd(obj, fn){obj.addEventListener('webkitTransitionEnd', fn, false);obj.addEventListener('transitionend', fn, false);}</script></body></html>
过渡完成事件问题二的处理方法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transition</title><style>.box {width: 100px; height: 100px; background: red; transition: 1s width}</style><script></script></head><body><div class="box" id="box"></div><script>var oBox = document.getElementById('box');oBox.onclick = function(){this.style.width = this.offsetWidth + 100 + 'px';addEnd(oBox, end);}function end(){this.style.width = this.offsetWidth + 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);}</script></body></html>
旋转
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>旋转</title><style>body {height: 400px; border: 1px solid #000;}.box {width: 100px; height: 100px; background: red; margin:100px auto 0; transition: 2s;}body:hover .box {-webkit-transform: rotate(30deg); -moz-transform: rotate(30deg);}</style><script></script></head><body><div class="box" id="box">123</div></body></html>
斜切
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>斜切</title><style>body {height: 400px; border: 1px solid #000;}.box {width: 100px; height: 100px; background: red; margin:100px auto 0; transition: 2s;}/* body:hover .box {-webkit-transform: skewX(45deg); -moz-transform: skewX(45deg);} *//* body:hover .box {-webkit-transform: skewY(45deg); -moz-transform: skewY(45deg);} */body:hover .box {-webkit-transform: skew(15deg, 30deg); -moz-transform: skew(15deg, 30deg);}</style><script></script></head><body><div class="box" id="box">123</div></body></html>
怪异导航
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>怪异导航</title><style>ul {margin: 0; padding: 0; list-style: none;}li {float: left; width: 100px; text-align: center; height: 30px; border: 1px solid #fff; background: red; font: 12px/30px "宋体"; -moz-transform: skewX(30deg); -webkit-transform: skewX(30deg);}a {display: block; text-decoration: none; -moz-transform: skewX(-30deg); -webkit-transform: skewX(-30deg);}</style></head><body><ul><li><a href="#">妙味课堂</a></li><li><a href="#">妙味茶馆</a></li></ul></body></html>
缩放
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>缩放</title><style>body {height: 400px; border: 1px solid #000;}.box {width: 100px; height: 100px; background: red; margin: 100px auto 0; transition: 2s;}/* body:hover .box {-webkit-transform: scaleX(0.5); -moz-transform: scaleX(0.5);} */body:hover .box {-webkit-transform: scale(0.5, -2); -moz-transform: scale(0.5, -2);}</style></head><body><div class="box">123</div></body></html>
位移
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>位移</title><style>body {height: 400px; border: 1px solid #000;}.box {width: 100px; height: 100px; background: red; margin: 100px auto 0; transition: 2s;}/* body:hover .box {-webkit-transform: translateX(100px); -moz-transform: translateX(100px);} */body:hover .box {-webkit-transform: translate(100px, -20px); -moz-transform: translate(100px, -20px);}</style></head><body><div class="box">123</div></body></html>
transform的基点
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transform的基点</title><style>/* body {height: 300px; border: 1px solid #000;}.box {width: 100px; height: 100px; background: red; margin: 100px auto; transition: 5s; -webkit-transform-origin: right top; -moz-transform-origin: right top;} */body {height: 300px; border: 1px solid #000;}.box {width: 100px; height: 100px; background: red; margin: 100px auto; transition: 5s; -webkit-transform-origin: 10px 20px; -moz-transform-origin: 10px 20px;} /*transform-origin: 0 0; 如果是0 0就是左上角*/body:hover .box {-webkit-transform: rotate(360deg) scale(0.2); -moz-transform: rotate(360deg) scale(0.2);}</style></head><body><div class="box"></div></body></html>
transform执行顺序问题
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transform的执行顺序问题</title><style>body {height: 300px; border: 1px solid #000;}.box {width: 100px; height: 100px; background: red; margin: 10px; transition: 1s;}body:hover .box:nth-of-type(1) {-webkit-transform: translateX(100px) scale(0.5); -moz-transform: translateX(100px) scale(0.5);}body:hover .box:nth-of-type(2) {-webkit-transform: scale(0.5) translateX(100px); -moz-transform: scale(0.5) translateX(100px); }/*第二个div的变化，scale在前，translate在后。后写的限制性，就是先位移再缩放，那么位移设置的100也被缩放了0.5，因此实际只位移了50px*/</style></head><body><div class="box">111</div><div class="box">222</div></body></html>
钟表效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>钟表效果</title><style id="css">#wrap {width: 200px; height: 200px; border: 2px solid #000; margin: 100px auto; border-radius: 50%; position: relative;}#wrap ul {margin: 0; padding: 0; height: 200px; position: relative; list-style: none;}#wrap ul li {width: 2px; height: 6px; background: #000; position: absolute; left: 99px; top: 0; -webkit-transform-origin: center 100px; -moz-transform-origin: center 100px;}/* #wrap ul li:nth-of-type(1) {-webkit-transform: rotate(0); -moz-transform: rotate(0);}#wrap ul li:nth-of-type(2) {-webkit-transform: rotate(6deg); -moz-transform: rotate(6deg);}#wrap ul li:nth-of-type(3) {-webkit-transform: rotate(12deg); -moz-transform: rotate(12deg);}#wrap ul li:nth-of-type(4) {-webkit-transform: rotate(18deg); -moz-transform: rotate(18deg);}#wrap ul li:nth-of-type(5) {-webkit-transform: rotate(24deg); -moz-transform: rotate(24deg);}#wrap ul li:nth-of-type(6) {-webkit-transform: rotate(30deg); -moz-transform: rotate(30deg);}#wrap ul li:nth-of-type(7) {-webkit-transform: rotate(36deg); -moz-transform: rotate(36deg);}#wrap ul li:nth-of-type(8) {-webkit-transform: rotate(42deg); -moz-transform: rotate(42deg);} */#wrap ul li:nth-of-type(5n+1) {height: 12px;}#hour {width: 6px; height: 45px; background: #000; position: absolute; left: 97px; top: 55px; -webkit-transform-origin: bottom; -moz-transform-origin: bottom;}#min {width: 4px; height: 65px; background: #999; position: absolute; left: 98px; top: 35px; -webkit-transform-origin: bottom; -moz-transform-origin: bottom;}#sec {width: 2px; height: 80px; background: red; position: absolute; left: 99px; top: 20px; -webkit-transform-origin: bottom; -moz-transform-origin: bottom;}.ico {width: 20px; height: 20px; background: #000; border-radius: 50%; position: absolute; left: 90px; top: 90px;}</style></head><body><div id="wrap"><ul id="ul1"><!-- <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> --></ul><div id="hour"></div><div id="min"></div><div id="sec"></div><div class="ico"></div></div><script>var oList = document.getElementById('ul1');var oCss = document.getElementById('css');var oHour = document.getElementById('hour');var oMin = document.getElementById('min');var oSec = document.getElementById('sec');var aLi = '';var sCss = '';for(var i=0; i<60; i++){sCss += '#wrap ul li:nth-of-type(' + (i+1) + ') {-webkit-transform: rotate(' + i*6 + 'deg); -moz-transform: rotate(' + i*6 + 'deg);}'aLi += '<li></li>'}oList.innerHTML = aLi;oCss.innerHTML += sCss;toTime();setInterval(toTime, 1000);function toTime(){var oDate = new Date();var iSec = oDate.getSeconds();var iMin = oDate.getMinutes() + iSec/60;var iHour = oDate.getHours() + iMin/60;oSec.style.WebkitTransform = 'rotate(' + iSec *6 + 'deg)';oSec.style.MozTransform = 'rotate(' + iSec *6 + 'deg)';oMin.style.WebkitTransform = 'rotate(' + iMin *6 + 'deg)';oMin.style.MozTransform = 'rotate(' + iMin *6 + 'deg)';oHour.style.WebkitTransform = 'rotate(' + iHour *30 + 'deg)';oHour.style.MozTransform = 'rotate(' + iHour *30 + 'deg)';}</script></body></html>
扇形导航
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>body{ background:#f9f9f9;}#menu{width:50px;height:50px; position:fixed;right:20px; bottom:20px; }#menu_list{height:42px;width:42px; position:relative;margin:4px;}#menu_list img{ border-radius:21px; position:absolute;left:0;top:0; -webkit-transition:0.5s all ease;}#home{width:50px;height:50px;background:url(home.png) no-repeat; border-radius:25px; position:absolute; left:0;top:0; transition:1s;}</style><script>window.onload=function(){var oHome=document.getElementById("home");var aImg=document.getElementById("menu_list").getElementsByTagName("img");var bOff=true;var iR=-150;for(var i=0;i<aImg.length;i++){aImg[i].onclick=function(){this.style.transition="0.3s";this.style.WebkitTransform="scale(2) rotate(-720deg)";this.style.opacity=0.1;addEnd(this,end);};}function end(){this.style.transition="0.1s";this.style.WebkitTransform="scale(1) rotate(-720deg)";this.style.opacity=1;removeEnd(this,end);}oHome.onclick=function(){if(bOff){this.style.WebkitTransform="rotate(-360deg)";for(var i=0;i<aImg.length;i++){var oLt=toLT(iR,90/4*i);aImg[i].style.transition="0.5s "+i*100+"ms";aImg[i].style.left=oLt.l+"px";aImg[i].style.top=oLt.t+"px";aImg[i].style.WebkitTransform="scale(1) rotate(-720deg)";}}else{this.style.WebkitTransform="rotate(0deg)";for(var i=0;i<aImg.length;i++){aImg[i].style.transition="0.5s "+(aImg.length-i-1)*100+"ms";aImg[i].style.left=0+"px";aImg[i].style.top=0+"px";aImg[i].style.WebkitTransform="scale(1) rotate(0deg)";}}bOff=!bOff;};};function toLT(iR,iDeg){return {l:Math.round(Math.sin(iDeg/180*Math.PI)*iR),t:Math.round(Math.cos(iDeg/180*Math.PI)*iR)}}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);}/*已知直角三角形的斜边长度和夹角 求对边(sin)和临边的长度*/</script></head><body><div id="menu"><div id="menu_list"><img src="prev.png" alt=""/><img src="open.png" alt="" /><img src="clos.png" alt="" /><img src="full.png" alt="" /><img src="refresh.png" alt="" /></div><div id="home"></div></div></body></html>
Matrix矩阵
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>2d变换——Matrix矩阵</title><style>.box {width: 100px; height: 100px; background: red; transition: 1s;}.box:hover {-webkit-transform: matrix(0.5,0.38,-0.38,2,0,0); -moz-transform: matrix(0.5,0.38,-0.38,2,0,0);}/*标准浏览器：matrix(1,0,0,1,0,0) 默认情况matrix(a,b,c,d,e,f) 六个参数IE浏览器：filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand');Matrix(M11==a, M12==c, M21==b, M22==d) 只有四个参数，而且顺序与标准下不同*/</style></head><body><div class="box"></div></body></html>
通过矩阵Mathix实现位移
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>通过矩阵Matrix实现位移</title><style>/*matrix(a,b,c,d,e,f) 六个参数位移：两个方向x： 参数e代表x轴的位移 e+disXy： 参数f代表y轴的位移 f+disYIE下没有e、f两个参数，因此无法直接实现位移，但是可以用定位来替换实现效果*/body {height: 300px; border: 1px solid #000;}.box {width: 100px; height: 100px; background: red; transition: 1s;}body:hover .box {-webkit-transform: matrix(1,0,0,1,100,300); -moz-transform: matrix(1,0,0,1,100,300);}</style></head><body><div class="box"></div></body></html>
通过矩阵Mathix实现缩放
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>通过矩阵Matrix实现缩放</title><style>/*matrix(a,b,c,d,e,f) 六个参数缩放：x轴缩放 a=x*a c=x*c e=x*ey轴缩放 b=y*b d=y*d f=y*f*/body {height: 300px; border: 1px solid #000;}.box {width: 100px; height: 100px; background: red; transition: 1s;}</style></head><body><div class="box" id="box"></div><script>var oBox = document.getElementById('box');oBox.onclick = function(){oBox.style.WebkitTransform = 'matrix(0.5,0,0,0.2,0,0)';oBox.style.MozTransform = 'matrix(0.5,0,0,0.2,0,0)';oBox.style.transform = 'matrix(0.5,0,0,0.2,0,0)';oBox.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.2, SizingMethod="auto expand")';}</script></body></html>
通过矩阵Mathix实现倾斜
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>通过矩阵Matrix实现倾斜</title><style>/*matrix(a,b,c,d,e,f) 六个参数倾斜：x轴倾斜 c=Math.tan(xDeg/180*Math.PI)y轴倾斜 b=Math.tan(yDeg/180*Math.PI)*/body {height: 300px; border: 1px solid #000;}.box {width: 100px; height: 100px; background: red; transition: 1s;}</style></head><body><div class="box" id="box"></div><script>//Math.tan(30/180*Math.PI)约等于0.58var oBox = document.getElementById('box');oBox.onclick = function(){oBox.style.WebkitTransform = 'matrix(1,0, 0.58,1,0,0)';oBox.style.MozTransform = 'matrix(1,0,0.58,1,0,0)';oBox.style.transform = 'matrix(1,0,0.58,1,0,0)';oBox.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.58, M21=0, M22=1, SizingMethod="auto expand")';}</script></body></html>
通过矩阵Matrix实现旋转
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>通过矩阵Matrix实现旋转</title><style>/*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);*/body {height: 300px; border: 1px solid #000;}.box {width: 100px; height: 100px; background: red; transition: 1s;}</style></head><body><div class="box" id="box"></div><script>//Math.sin(30/180*Math.PI) 约为0.5//Math.cos(30/180*Math.PI) 约为0.87var oBox = document.getElementById('box');oBox.onclick = function(){oBox.style.WebkitTransform = 'matrix(0.87,0.5, -0.5,0.87,0,0)';oBox.style.MozTransform = 'matrix(0.87,0.5, -0.5,0.87,0,0)';oBox.style.transform = 'matrix(0.87,0.5, -0.5,0.87,0,0)';oBox.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=0.87, M12=0.5, M21=-0.5, M22=0.87, SizingMethod="auto expand")';// alert(this.offsetWidth);}</script></body></html>
IE下的基点修正
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>IE基点修正</title><style>.box {width: 100px; height: 100px; margin: 30px auto; position: relative; border: 1px solid #000;}#box {width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0;}/*#box:hover {-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg);}*/</style></head><body><div class="box"><div id="box"></div></div><script>var oBox = document.getElementById('box');var iDeg = 0;setInterval(function(){iDeg++;toRotate(oBox, iDeg)}, 30)function toRotate(obj, iDeg){var a = Math.round(Math.cos(iDeg/180*Math.PI)*100)/100; //乘以100之后四舍五入，然后除以100var b = Math.round(Math.sin(iDeg/180*Math.PI)*100)/100;var c = -b;var d = a;obj.style.WebkitTransform = 'matrix(' + a + ',' + b + ', ' + c + ',' + d + ',0,0)';obj.style.MozTransform = 'matrix(' + a + ',' + b + ', ' + c + ',' + d + ',0,0)';obj.style.transform = 'matrix(' + a + ',' + b + ', ' + c + ',' + d + ',0,0)';obj.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + c + ', M21=' + b + ', M22=' + d + ', SizingMethod="auto expand")';//下面两行修正IE下的基点问题obj.style.left = (obj.parentNode.offsetWidth-obj.offsetWidth)/2 + 'px';obj.style.top = (obj.parentNode.offsetHeight-obj.offsetHeight)/2 + 'px';}</script></body></html>
3d旋转
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>3d变换</title><style>.box {width: 100px; height: 100px; padding: 100px; border: 5px solid #000; margin: 30px auto; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-perspective: 100px; -moz-perspective: 100px;}.div {width: 100px; height: 100px; background: red; transition: 1s;}/* .box:hover .div {-webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg);} */.box:hover .div {-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg);}/* .box:hover .div {-webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg);} */</style></head><body><div class="box"><div class="div">111</div></div></body></html>
3d的translateZ
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>3d变换</title><style>.box {width: 100px; height: 100px; padding: 100px; border: 5px solid #000; margin: 30px auto; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-perspective: 200px; -moz-perspective: 200px;}.div {width: 100px; height: 100px; background: red; transition: 1s;}.box:hover .div {-webkit-transform: translateZ(100px); -moz-transform: translateZ(100px);}</style></head><body><div class="box"><div class="div">111</div></div></body></html>
3d小盒子
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style>.wrap {width: 100px; height: 100px; padding: 100px; border: 5px solid #000; margin: 100px auto; -webkit-perspective: 200px; -moz-perspective: 200px;}.box {width: 100px; height: 100px; background: red; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transition: 2s; -webkit-transform-origin: center center -50px; -moz-transform-origin: center center -50px;}.box div {width: 100px; height: 100px; position: absolute; color: #fff; font-size: 50px; text-align: center; line-height: 100px;}.box div:nth-of-type(1) {left: 0; top: -100px; background: #9c0; -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg);}.box div:nth-of-type(2) {left: -100px; top: 0; background: #cf3; -webkit-transform-origin: right; -moz-transform-origin: right; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg);}.box div:nth-of-type(3) {left: 0; top: 0; background: #ccf;}.box div:nth-of-type(4) {left: 100px; top: 0; background: #0c9; -webkit-transform-origin: left; -moz-transform-origin: left; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg);}.box div:nth-of-type(5) {left: 0; top: 100px; background: #69c; -webkit-transform-origin: top; -moz-transform-origin: top; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg);}.box div:nth-of-type(6) {left: 0; top: 0; background: #f0c; -webkit-transform: translateZ(-100px) rotateX(180deg); -moz-transform: translateZ(-100px) rotateX(180deg); }.wrap:hover .box {-webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg);}</style></head><body><div class="wrap"><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></div></body></html>
景深基点
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style>.wrap {width: 100px; height: 100px; padding: 100px; border: 5px solid #000; margin: 100px auto; -webkit-perspective: 200px; -moz-perspective: 200px; -webkit-perspective-origin: left top; -moz-perspective-origin: left top;}.box {width: 100px; height: 100px; background: red; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transition: 2s; -webkit-transform-origin: center center -50px; -moz-transform-origin: center center -50px;}.box div {width: 100px; height: 100px; position: absolute; color: #fff; font-size: 50px; text-align: center; line-height: 100px;}.box div:nth-of-type(1) {left: 0; top: -100px; background: #9c0; -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg);}.box div:nth-of-type(2) {left: -100px; top: 0; background: #cf3; -webkit-transform-origin: right; -moz-transform-origin: right; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg);}.box div:nth-of-type(3) {left: 0; top: 0; background: #ccf;}.box div:nth-of-type(4) {left: 100px; top: 0; background: #0c9; -webkit-transform-origin: left; -moz-transform-origin: left; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg);}.box div:nth-of-type(5) {left: 0; top: 100px; background: #69c; -webkit-transform-origin: top; -moz-transform-origin: top; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg);}.box div:nth-of-type(6) {left: 0; top: 0; background: #f0c; -webkit-transform: translateZ(-100px) rotateX(180deg); -moz-transform: translateZ(-100px) rotateX(180deg); }.wrap:hover .box {-webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg);}</style></head><body><div class="wrap"><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></div></body></html>
3d幻灯片
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>3d幻灯片</title><style id="css">body, ul, ol {margin: 0; padding: 0;}li {list-style: none;}.wrap {width: 800px; margin: 100px auto 0;}#picList {width: 800px; height: 360px; -webkit-perspective: 800px; -moz-perspective: 800px;}#picList li {width: 20px; height: 360px; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-origin: center center -180px; -moz-transform-origin: center center -180px; float: left;}#picList li a {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}#picList li a:nth-of-type(1) {background: url(img/1.jpg) no-repeat;}#picList li a:nth-of-type(2) {background: url(img/2.jpg) no-repeat; top: -360px; -webkit-transform-origin: bottom; -webkit-transform: rotateX(90deg); -moz-transform-origin: bottom; -moz-transform: rotateX(90deg);}#picList li a:nth-of-type(3) {background: url(img/3.jpg) no-repeat; -webkit-transform: translateZ(-360px) rotateX(180deg); -moz-transform: translateZ(-360px) rotateX(180deg);}#picList li a:nth-of-type(4) {background: url(img/4.jpg) no-repeat; top: 360px; -webkit-transform-origin: top; -webkit-transform: rotateX(-90deg); -moz-transform-origin: top; -moz-transform: rotateX(-90deg);}#picList li span {position: absolute; width: 360px; height: 360px; background: #333;}#picList li span:nth-of-type(1) {-moz-transform-origin: left; -moz-transform: rotateY(90deg); -webkit-transform-origin: left; -webkit-transform: rotateY(90deg); left: 0;}#picList li span:nth-of-type(2) {-moz-transform-origin: right; -moz-transform: rotateY(-90deg); -webkit-transform-origin: right; -webkit-transform: rotateY(-90deg); right: 0;}#btns {float: right; padding: 10px 0;}#btns li {width: 40px; height: 40px; background: #000; color: #fff; border-radius: 50%; font: italic 30px/40px Arial; float: left; margin: 0 5px; text-align: center; cursor: pointer;}#btns .active {background: orange;}/* #picList li:nth-of-type(1) a {background-position: 0 0;}#picList li:nth-of-type(2) a {background-position: -50px 0;}#picList li:nth-of-type(8) a {background-position: -350px 0;} */</style><script>window.onload = function(){var oPicList = document.getElementById('picList');var oCss = document.getElementById('css');var aBtns = document.getElementById('btns').getElementsByTagName('li');var aLi = null;var sLi = "";var sCss = "";var iLiW = 20;var iZindex = 0;var iNow = 0;var iLength = oPicList.clientWidth / iLiW;for(var i=0; i<iLength; i++){i > iLength/2 ? iZindex-- : iZindex++;sLi += '<li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li>';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:' + iZindex + '}';}oPicList.innerHTML = sLi;oCss.innerHTML += sCss;aLi = oPicList.children;for(var i=0; i<aBtns.length; i++){(function(a){aBtns[a].onclick = function(){for(var i=0; i<aLi.length; i++){aLi[i].style.transition = '0.5s ' + i*30 + 'ms';aLi[i].style.WebkitTransform = 'rotateX(-' + a*90 + 'deg)';aLi[i].style.MozTransform = 'rotateX(-' + a*90 + 'deg)';}this.className = 'active';aBtns[iNow].className = '';iNow = a;}})(i)}}</script></head><body><div class="wrap"><ul id="picList"><!-- <li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li> --></ul><ol id="btns"><li class="active">1</li><li>2</li><li>3</li><li>4</li></ol></div></body></html>
animation基本使用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation</title><style>@-webkit-keyframes move {0% {width: 100px;}50% {width: 1000px;}100% {width: 500px;}}@-moz-keyframes move {0% {width: 100px;}50% {width: 1000px;}100% {width: 500px;}}@keyframes move {0% {width: 100px;}50% {width: 1000px;}100% {width: 500px;}}.box {width: 100px; height: 100px; background: red; -webkit-animation: 2s move; -moz-animation: 2s move; animation: 2s move;}</style></head><body><div class="box"></div></body></html>
animation的其他参数使用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation</title><style>@-webkit-keyframes move {50% {width: 1000px;}}.box {width: 100px; height: 100px; background: red; -webkit-animation: 1s 1s move ease-in infinite;}</style></head><body><div class="box"></div></body></html>
走回字，支持动画暂停
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>走回字形</title><style>@-webkit-keyframes doMove{0% {top: 0; left: 0;}25% {top: 0; left: 300px;}50% {top: 300px; left: 300px;}75% {top: 300px; left: 0;}100% {top: 0; left: 0;}}#wrap {width: 400px; height: 400px; border: 5px solid #000; position: relative;}.box {width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; -webkit-animation: 4s doMove linear infinite;}#wrap:hover .box {-webkit-animation-play-state: paused;}</style></head><body><div id="wrap"><div class="box"></div></div></body></html>
正序倒序播放
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>正序、倒序播放</title><style>@-webkit-keyframes doMove{0% {top: 0; left: 0;}25% {top: 0; left: 300px;}50% {top: 300px; left: 300px;}75% {top: 300px; left: 0;}100% {top: 0; left: 0;}}#wrap {width: 400px; height: 400px; border: 5px solid #000; position: relative;}.box {width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; -webkit-animation: 4s doMove linear infinite alternate;}</style></head><body><div id="wrap"><div class="box"></div></div></body></html>
处理动画完毕之后回到默认样式的简单做法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation</title><style>@-webkit-keyframes move {0% {width: 100px;}100% {width: 500px;}}.box {width: 100px; height: 100px; background: red;}.move {-webkit-animation: 2s move; width: 500px;}</style></head><body><div class="box move"></div></body></html>
动画结束保持原状，与js结合的做法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation</title><style>@-webkit-keyframes move {0% {width: 100px;}100% {width: 500px;}}.box {width: 100px; height: 100px; background: red;}.move {-webkit-animation: 2s move; width: 500px;}</style></head><body><div class="box" id="box"></div><script>document.getElementById('box').onclick = function(){this.className = 'box move';}</script></body></html>
animationend事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation</title><style>@-webkit-keyframes move {0% {width: 100px;}100% {width: 500px;}}@-moz-keyframes move {0% {width: 100px;}100% {width: 500px;}}@keyframes move {0% {width: 100px;}100% {width: 500px;}}.box {width: 100px; height: 100px; background: red;}.move {-webkit-animation: 2s move; -moz-animation: 2s move; animation: 2s move; width: 500px;}</style></head><body><div class="box" id="box"></div><script>document.getElementById('box').onclick = function(){this.className = 'box move';addEnd(this, fn);}function fn(){alert('end');}function addEnd(obj, fn){obj.addEventListener('webkitAnimationEnd', fn, false);obj.addEventListener('animationend', fn, false);}</script></body></html>
无缝滚动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>无缝滚动</title><style>@-webkit-keyframes move {0% {left: 0;}100% {left: -500px;}}#wrap {width: 500px; height: 100px; border: 1px solid #000; position: relative; margin: 100px auto; overflow: hidden;}#list {position: absolute; left: 0; top: 0; margin: 0; padding: 0; -webkit-animation: 3s infinite move linear; width: 200%;}#list li {list-style: none; width: 98px; height: 98px; border: 1px solid #fff; background: #000; color: #fff; font: 50px/98px Arial; text-align: center; float: left;}#wrap:hover #list {-webkit-animation-play-state: paused;}</style></head><body><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></ul></div></body></html>
3d图片轮换
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>3d图片轮换</title><style>@-webkit-keyframes show {0% {-webkit-transform: rotateX(180deg);opacity: 0;}50%{-webkit-transform: rotateX(-20deg);opacity: 1;}60%{-webkit-transform: rotateX(18deg);opacity: 1;}70%{-webkit-transform: rotateX(-12deg);opacity: 1;}80%{-webkit-transform: rotateX(8deg);opacity: 1;}90%{-webkit-transform: rotateX(-6deg);opacity: 1;}100%{-webkit-transform: rotateX(0deg);opacity: 1;}}@-webkit-keyframes hide {0% {-webkit-transform: rotateX(0deg);opacity: 1;}100%{-webkit-transform: rotateX(-180deg);opacity: 0;}}#wrap {width: 400px; height: 300px; position: relative; margin: 40px auto; -webkit-perspective: 800px; -webkit-transform-style: preserve-3d;}img {width: 400px; height: 300px; position: absolute; left: 0; top: 0; -webkit-transform-origin: bottom; -webkit-transform: rotateX(-180deg); opacity: 0;}#wrap input {width: 60px; height: 60px; margin: 0; padding: 0; background: #ccc; top: 100px; position: absolute; border-radius: 50%; outline: none; cursor: pointer;}#wrap input:nth-of-type(1) {left: -100px;}#wrap input:nth-of-type(2) {right: -100px;}.show {-webkit-transform: rotateX(0deg); opacity: 1; -webkit-animation: 1s show;}.hide {-webkit-transform: rotateX(180deg); opacity: 0; -webkit-animation: 0.6s hide;}</style><script>window.onload = function(){var oWrap = document.getElementById('wrap');var aBtn = oWrap.getElementsByTagName('input');var aImg = oWrap.getElementsByTagName('img');var iNow = 0;aBtn[0].onclick = function(){aImg[iNow].className = 'hide';iNow--;if(iNow < 0){iNow = aImg.length - 1;}aImg[iNow].className = 'show';}aBtn[1].onclick = function(){aImg[iNow].className = 'hide';iNow++;if(iNow >= aImg.length){iNow = 0;}aImg[iNow].className = 'show';}}</script></head><body><div id="wrap"><input type="button" value="上一张" /><img src="images/img1.jpg" class="show" /><img src="images/img2.jpg" /><img src="images/img3.jpg" /><img src="images/img4.jpg" /><img src="images/img5.jpg" /><input type="button" value="下一张" /></div></body></html>
3d折纸效果
**第一种布局方法，位置难以确定，很难实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>3d折纸效果</title><style>#wrap {width: 500px; margin: 0 auto; -webkit-perspective: 800px; -webkit-transform-style: preserve-3d;}#wrap div {height: 100px; border: 1px solid #000; background: #ccc;}#wrap div:nth-of-type(1) {-webkit-transform-origin: bottom; -webkit-transform: rotateX(45deg);}#wrap div:nth-of-type(2) {-webkit-transform-origin: top; -webkit-transform: rotateX(-45deg);}#wrap div:nth-of-type(3) {-webkit-transform-origin: top; -webkit-transform: rotateX(45deg);}</style><script>window.onload = function(){}</script></head><body><div id="wrap"><div>1</div><div>2</div><div>3</div></div></body></html>
3d折纸布局原理
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>3d折纸效果</title><style>#wrap {width: 500px; margin: 0 auto; -webkit-perspective: 800px; -webkit-transform-style: preserve-3d; position: relative;}#wrap div {position: absolute; left: 0; top: 102px; width: 500px; -webkit-transform-origin: top; -webkit-transform-style: preserve-3d;}#wrap span {height: 100px; border: 1px solid #000; background: #ccc; display: block;}#wrap>div {top: 0;}</style><script>window.onload = function(){}</script></head><body><div id="wrap"><div style="-webkit-transform: rotateX(-45deg)"><span>1</span><div style="-webkit-transform: rotateX(90deg)"><span>2</span><div style="-webkit-transform: rotateX(-90deg)"><span>3</span><div style="-webkit-transform: rotateX(90deg)"><span>4</span></div></div></div></div></div></body></html>
3d折纸最终效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>3d折纸效果</title><style>@-webkit-keyframes open {0% {-webkit-transform: rotateX(-120deg);}25% {-webkit-transform: rotateX(30deg);}50% {-webkit-transform: rotateX(-15deg);}75% {-webkit-transform: rotateX(8deg);}100% {-webkit-transform: rotateX(0deg);}}@-webkit-keyframes close {0% {-webkit-transform: rotateX(0deg);}100% {-webkit-transform: rotateX(-120deg);}}body {margin: 0;}#wrap {width: 160px; margin: 30px auto;position: relative; -webkit-perspective: 800px;}#wrap h2 {height: 40px; background: #f60; color: #fff; font: bold 16px/40px "微软雅黑"; text-align: center; margin: 0; position: relative; z-index: 10;}#wrap div {position: absolute; top: 32px; width: 100%; left: 0; -webkit-transform-type: preserve-3d; -webkit-transform-origin: top; -webkit-transform: rotateX(-120deg);}#wrap span {display: block; height: 30px; background: #9f0; font: 12px/30px "宋体"; color: #fff; text-indent: 20px; box-shadow: inset 0 0 0 20px rgba(0,0,0,1); transition: 1s;}#wrap>div {top: 40px;}#wrap .show {-webkit-animation: 2s open; -webkit-transform: rotateX(0deg);}#wrap .close {-webkit-animation: 0.8s close; -webkit-transform: rotateX(-120deg);}#wrap .show>span {box-shadow: inset 0 0 0 20px rgba(0,0,0,0);;}#btn {position: absolute;}</style><script>window.onload = function(){}</script></head><body><input type="button" value="按钮" id="btn" /><div id="wrap"><h2>我是标题噢</h2><div><span>选项1</span><div><span>选项2</span><div><span>选项3</span><div><span>选项4</span><div><span>选项5</span><div><span>选项6</span><div><span>选项7</span></div></div></div></div></div></div></div></div><script>var oBtn = document.getElementById('btn');var oWrap = document.getElementById('wrap');var aDiv = oWrap.getElementsByTagName('div');var iDelay = 200;var oTimer = null;var i = 0;var bOff = true;oBtn.onclick = function(){if(oTimer){return;}if(bOff){i = 0;oTimer = setInterval(function(){aDiv[i].className = 'show';i++;if(i == aDiv.length){clearInterval(oTimer);oTimer = null;bOff = false;}}, iDelay)} else {i = aDiv.length - 1;oTimer = setInterval(function(){aDiv[i].className = 'close';i--;if(i < 0){clearInterval(oTimer);oTimer = null;bOff = true;}}, iDelay)}}</script></body></html>