css3选择器
属性选择器 IE6以下不兼容
li[class] 有属性
*li[class=abc] 属性和值是否相等 "abc"
li[class~=abc] 包含 "abc ab"
li[class^=abc] 首字母
li[class$=abc] 尾字母
li[class|=a] 以值开头的元素
li[class*=abc] 字符串中有值
伪类选择器
*obj:nth-child(1) 选择某一个
obj:nth-child(odd) 奇数
obj:nth-child(even) 偶数
obj:nth-child(n) 全部
obj:nth-child(2n) 几倍数
obj:nth-last-child(2) 从后往前数
obj:first-child 第一个
obj:last-child 最后一个
input:focus 获取焦点
p:only-child 父级下只能存在一个元素
div:empty 空元素
input:enabled 可用
*input:disabled 不可用
::selection 选择的文本样式
*:root 根元素 html
*css3新增的样式
# 圆角
border-radius
50% 正圆 单位都可以用
一个值 四个方向
两个值 左上/右下 右上/左下
三个值 左上 右上/左下 右下
四个值 左上 右上 右下 左下 顺时针
# transition:1s all ease;
1s 运动时间
all 运动样式
ease 运动类型
# 浏览器规则
chrome 谷歌
-webkit-
firefox 火狐
-moz-
ie IE
-ms-
opera 欧朋
-o-
不加前缀 标准
# 目的：移动端开发
-webkit- 兼容
# 文字阴影
text-shadow:1px 1px 2px #000;
x
y
模糊度
阴影颜色
例子：
<style>
div {
-webkit-text-stroke: 2px red;
font-family: "微软雅黑";
font-size: 50px;
color: #fff;
}
</style>
<body>
<div>div</div>
</body>
# 颜色表示方法
rgba(0,0,0,0.1)
r red
g green
b blue
a alpha
# 文字描边
-webkit-text-stroke:2px red;
描边宽度
描边颜色
例子：
<style>
div {
-webkit-text-stroke: 2px red;
font-family: "微软雅黑";
font-size: 50px;
color: #fff;
}
</style>
<body>
<div>div</div>
</body>
#块阴影
box-shadow:0px 0px 10px 10px #000 inset;
x
y
模糊度
扩充阴影值
颜色
内阴影
例子：
<style>
div {
width: 200px;
height: 200px;
background: #ccc;
box-shadow: 0px 0px 10px 10px #000 inset;
}
</style>
<body>
<div></div>
</body>
#渐变
线性渐变
background:-webkit-linear-gradient(left,red,green)
left top right bottom /45deg 角度
red起始颜色
green结束颜色
例子：
<style>
div {
width: 200px;
height: 200px;
background: -webkit-linear-gradient(-45deg, red, green);
}
</style>
<body>
<div></div>
</body>
# 重复渐变
background:-webkit-repeating-linear-gradient(-45deg,red 0,red 10%,blue 10%,blue 20%);
例子：
<style>
div {
width: 40px;
height: 200px;
background: -webkit-repeating-linear-gradient(-45deg, red 0, red 10%, blue 10%, blue 20%);
}
</style>
<body>
<div></div>
</body>
# 径向渐变
background:-webkit-radial-gradient(red,green);
# 普通元素可编辑
contenteditable="true"
# 蒙版
-webkit-mask:url(../img/meizi.jpg) no-repeat x y;
# 背景图大小
background-size:width height; px
contain 以最小值为准
cover 以最大值为准
# 多个背景图
background:url,url,url,url;
# 背景图生效位置
background-origin:border-box; 边框生效位置
background-origin:content-box; 内容生效位置
background-origin:padding-box; 默认位置
# 文本开切位置
-webkit-background-clip:text;
color:rgba(0,0,0,0); 配合使用
# 倒影
-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1));
below 向下
above 向上
left 向左
right 向右
10px 间距c
例子：
<style>
img {
margin-left: 300px;
-webkit-box-reflect: left 10px -webkit-linear-gradient(rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1));
}
</style>
<body>
</body>
# 滤镜
-webkit-filter:blur(0px);
# 缩放大小
resize:both;
# 缩放大小
resize:both; overflow:hidden;
# 文本排序
direction:rtl; unicode-bidi:bidi-override;
# 变形
transform:
rotate 旋转度数 deg
translate(x,y) 平移像素 px
scale(x,y) 缩放比例
skew(x,y) 倾斜度数 deg
变形样式是从后往前读
transform:skew(30deg,10deg) scale(2,2) translate(100px,20px) rotate(45deg);
# 旋转控制中心点
transform-origin:x y;
left
right
top
bottom
20px 20px
例子：
<style>
div {
width: 200px;
height: 200px;
background: red;
float: left;
margin: 10px;
transition: .4s all ease;
}
div:nth-child(1) {
transform-origin: left top;
}
div:nth-child(2) {
transform-origin: right top;
}
div:nth-child(3) {
transform-origin: right bottom;
}
div:nth-child(4) {
transform-origin: left bottom;
}
div:nth-child(5) {
transform-origin: 50px 0;
}
div:hover {
transform: rotate(45deg);
}
</style>
<script>
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
钟表
#景深
800-1200
transform:perspective(800px);
perspective:800px;
例子：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
transition: 1s all ease;
}
div:active {
transform: perspective(800px) rotateX(-60deg);
}
</style>
<body>
<div></div>
</body>
#3d 加给父级 不能继承
transform-style:preserver-3d;
#变形
transform:
scale X Y
rotate X Y Z
translate X Y Z
skew X Y
例子：
<style>
body {
overflow: hidden;
}
div {
transform: skew(0deg, 0deg);
transition: 1s all ease;
width: 200px;
height: 200px;
background: red;
margin: 200px auto;
}
div:hover {
transform: skew(50deg, 50deg);
}
</style>
<body>
<div></div>
</body>
#判断运动结束
transitionend
obj.addEventListener('transitionend',fn,false);
3d作品展示
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: perspective(800px);
}
li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #399;
border: 1px solid red;
text-align: center;
line-height: 300px;
font-size: 50px;
font-weight: bold;
color: #fff;
opacity: 0;
transition: 1s all ease;
}
.l2 {
transform: translate(-260px, 0) rotateY(45deg);
}
.l1 {
opacity: 1;
transform: translate(-180px, 0) rotateY(45deg);
}
.cur {
opacity: 1;
}
.r1 {
opacity: 1;
transform: translate(180px, 0) rotateY(-45deg);
}
.r2 {
transform: translate(260px, 0) rotateY(-45deg);
}
</style>
<script>
window.onload = function () {
var oPrev = document.querySelector('.prev');
var oNext = document.querySelector('.next');
var aLi = document.querySelectorAll('li');
var aClass = [];
var bOk = false;
for (var i = 0; i < aLi.length; i++) {
aClass.push(aLi[i].className);
}
oPrev.onclick = function () {
if (bOk)return;
bOk = true;
aClass.push(aClass.shift());
change();
};
oNext.onclick = function () {
if (bOk)return;
bOk = true;
aClass.unshift(aClass.pop());
change();
};
function change() {
for (var i = 0; i < aLi.length; i++) {
aLi[i].className = aClass[i];
}
//判断运动结束
var oCur = document.querySelector('.cur');
function transEnd() {
oCur.removeEventListener('transitionend', transEnd, false);
bOk = false;
}
oCur.addEventListener('transitionend', transEnd, false);
}
};
</script>
<body>
<input type="button" value="←" class="prev"/>
<input type="button" value="→" class="next"/>
<ul>
<li class="l2">0</li>
<li class="l1">1</li>
<li class="cur">2</li>
<li class="r1">3</li>
<li class="r2">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
3d 立方体
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
transform: perspective(800px);
border-radius: 50%;
}
.box div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 300px;
font-size: 50px;
border-radius: 50%;
}
.front {
background: rgba(204, 102, 51, 0.5);
transform: translateZ(150px);
}
.back {
background: rgba(204, 102, 153, 0.5);
transform: translateZ(-150px) rotateY(180deg);
}
.left {
background: rgba(255, 102, 102, 0.5);
transform: translate(-150px, 0) rotateY(-90deg);
}
.right {
background: rgba(51, 255, 204, 0.5);
transform: translate(150px, 0) rotateY(90deg);
}
.top {
background: rgba(204, 102, 204, 0.5);
transform: translate(0, -150px) rotateX(90deg);
}
.bottom {
background: rgba(51, 102, 204, 0.5);
transform: translate(0, 150px) rotateX(-90deg);
}
</style>
<script>
window.onload = function () {
var oBox = document.querySelector('.box');
var x = 0;
var y = 0;
var iSpeedX = 0;
var iSpeedY = 0;
var lastX = 0;
var lastY = 0;
oBox.onmousedown = function (ev) {
var disX = ev.clientX - x;
var disY = ev.clientY - y;
document.onmousemove = function (ev) {
x = ev.clientX - disX;
y = ev.clientY - disY;
oBox.style.transform = 'perspective(800px) rotateX(' + -(y) + 'deg) rotateY(' + (x) + 'deg)';
iSpeedX = ev.clientX - lastX;
iSpeedY = ev.clientY - lastY;
lastX = ev.clientX;
lastY = ev.clientY;
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
oBox.timer = setInterval(function () {
iSpeedX *= 0.8;
iSpeedY *= 0.8;
x += iSpeedX;
y += iSpeedY;
oBox.style.transform = 'perspective(800px) rotateX(' + -(y) + 'deg) rotateY(' + (x) + 'deg)';
if (Math.abs(iSpeedX) < 1)iSpeedX = 0;
if (Math.abs(iSpeedY) < 1)iSpeedY = 0;
if (iSpeedX == 0 && iSpeedY == 0) {
clearInterval(oBox.timer);
}
}, 16);
};
return false;
};
};
</script>
<body>
<div class="box">
<div class="front">前</div>
<div class="back">后</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="top">上</div>
<div class="bottom">下</div>
</div>
</body>
