1.选择器
id class 标签 子代 后代 交集 并集 通配符选择器 伪类选择器 结构选择器 属性选择器 相邻+选择器 兄弟选择器~
2.浏览器内核
谷歌的内核是webkit
火狐的内核是gecko
IE的内核是trident
欧朋的内核是presto
国内浏览器的内核 webkit
3.css3针对同一样式在不同浏览器的兼容 需要在样式属性前加上内核前缀。
谷歌 -webkit-transition：
欧朋 OPera -o-transition
飞狐 firefox -moz-transition
IE -ms-transition
4.c3中的过滤属性transition
transition 简写属性，用于在一个属性中设置四个过度属性
transition-propert 规定应用过度的css属性的名称。
transition-duration 定义过渡效果花费的时间。 默认是0.
transition-timing--function 规定过渡效果的时间曲线。默认是“”ease“”
transition-delay 规定过渡效果何时开始。默认是0.
div[name-zhang]{
width:100px;
height:30px;
background:red;
transition:width 2s linear 1s;
}
注意：时间一定要带单位
eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #a { width: 100px; height: 50px; background: orange; /*分开写*/ transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; /*简写*/ transition: width 2s linear; 1s } #a:hover { width: 500px; } </style> </head> <body> <div id="a"></div> </body> <ml> 5.css3的动画（animation）： eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background: orange; position: absolute; left: 0; top: 0; animation: reverse;/*反向*/ animation: donghua 4000ms linear infinite; animation-direction: alternate; } div:hover { animation-play-state: paused; } @-webkit-keyframes donghua{ 25%{ top: 0px; left: 300px; } 50%{ top: 300px; left: 300px; } 75%{ top: 300px; left: 0px; } 100%{ top: 0px; left: 0px; } } </style> </head> <body> <div></div> </body> <ml> 6.2D效果： css3中的2D特效是方法（函数），提供了四个方法 translate()：平移，有两个参数 rotate()：旋转，参数2是数字，1代表不变 scale()：缩放，只充当属性值 eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background: orange; position: absolute; top: 300px; left: 50%; transform: rotateZ(0deg); transform-origin: left top; transform: translate(10px,10px); transform: scale(2); animation: name 2s linear infinite; } @-webkit-keyframes name{ from{ transform: rotateZ(0deg); } to{ transform: rotateZ(360deg); } </style> </head> <body> <div></div> </body> <ml> 6.3D效果： 原理：近大远小，perspection 如果元素要有3D的效果，perspection给他的父级元素 transform-style：preserve-3d的内部子元素成3D效果 eg:盒子效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body { -webkit-perspective: 3000px; } .box { width: 400px; height: 400px; /*border: 1px solid green;*/ position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -200px; transform-style: preserve-3d; margin-top: 200px; animation: name 4s linear infinite; } @-webkit-keyframes name{ from{transform: rotateX(0) rotateX(0);} to{transform: rotate(360deg) rotateX(360deg);} } .box>div { width: 400px; height: 400px; position: absolute; top: 0; left: 0; text-align: center; line-height: 400px; font-size: 30px; color: wheat; transition: all 2s linear; } .box>div:nth-of-type(1) { background: blue; transform: translateZ(-200px); } .box>div:nth-of-type(2) { background: blueviolet; transform: rotateX(90deg) translateZ(200px); } .box>div:nth-of-type(3) { background: goldenrod; transform: rotateX(90deg) translateZ(-200px); } .box>div:nth-of-type(4) { background: green; transform: rotateY(90deg) translateZ(200px); } .box>div:nth-of-type(5) { background: gray; transform: rotateY(90deg) translateZ(-200px); } .box>div:nth-of-type(6) { background: skyblue; transform: translateZ(200px); } .box:hover div:nth-of-type(1) { transform: translateZ(-400px); } .box:hover div:nth-of-type(2) { transform: rotateX(90deg) translateZ(400px); } .box:hover div:nth-of-type(3) { transform: rotateX(90deg) translateZ(-400px); } .box:hover div:nth-of-type(4) { transform: rotateY(90deg) translateZ(400px); } .box:hover div:nth-of-type(5) { transform: rotateY(90deg) translateZ(-400px); } .box:hover div:nth-of-type(6) { transform: translateZ(400px); } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> <ml>