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) 選擇某一個(gè)
obj:nth-child(odd) 奇數(shù)
obj:nth-child(even) 偶數(shù)
obj:nth-child(n) 全部
obj:nth-child(2n) 幾倍數(shù)
obj:nth-last-child(2) 從后往前數(shù)
obj:first-child 第一個(gè)
obj:last-child 最后一個(gè)
input:focus 獲取焦點(diǎn)
p:only-child 父級(jí)下只能存在一個(gè)元素
div:empty 空元素
input:enabled 可用
*input:disabled 不可用
::selection 選擇的文本樣式
*:root 根元素 html
*css3新增的樣式
# 圓角
border-radius
50% 正圓 單位都可以用
一個(gè)值 四個(gè)方向
兩個(gè)值 左上/右下 右上/左下
三個(gè)值 左上 右上/左下 右下
四個(gè)值 左上 右上 右下 左下 順時(shí)針
# transition:1s all ease;
1s 運(yùn)動(dòng)時(shí)間
all 運(yùn)動(dòng)樣式
ease 運(yùn)動(dòng)類型
# 瀏覽器規(guī)則
chrome 谷歌
-webkit-
firefox 火狐
-moz-
ie IE
-ms-
opera 歐朋
-o-
不加前綴 標(biāo)準(zhǔn)
# 目的：移動(dòng)端開發(fā)
-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
模糊度
擴(kuò)充陰影值
顏色
內(nèi)陰影
例子：
<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結(jié)束顏色
例子：
<style>
div {
width: 200px;
height: 200px;
background: -webkit-linear-gradient(-45deg, red, green);
}
</style>
<body>
<div></div>
</body>
# 重復(fù)漸變
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 以最小值為準(zhǔn)
cover 以最大值為準(zhǔn)
# 多個(gè)背景圖
background:url,url,url,url;
# 背景圖生效位置
background-origin:border-box; 邊框生效位置
background-origin:content-box; 內(nèi)容生效位置
background-origin:padding-box; 默認(rèn)位置
# 文本開切位置
-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 旋轉(zhuǎn)度數(shù) deg
translate(x,y) 平移像素 px
scale(x,y) 縮放比例
skew(x,y) 傾斜度數(shù) deg
變形樣式是從后往前讀
transform:skew(30deg,10deg) scale(2,2) translate(100px,20px) rotate(45deg);
# 旋轉(zhuǎn)控制中心點(diǎn)
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 加給父級(jí) 不能繼承
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>
#判斷運(yùn)動(dòng)結(jié)束
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];
}
//判斷運(yùn)動(dòng)結(jié)束
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>
