css一个点,css3基础点（1）-优快云博客

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;

模糊度

阴影颜色

例子：

div {

-webkit-text-stroke: 2px red;

font-family: "微软雅黑";

font-size: 50px;

color: #fff;

}

div

# 颜色表示方法

rgba(0,0,0,0.1)

r red

g green

b blue

a alpha

# 文字描边

-webkit-text-stroke:2px red;

描边宽度

描边颜色

例子：

div {

-webkit-text-stroke: 2px red;

font-family: "微软雅黑";

font-size: 50px;

color: #fff;

}

div

#块阴影

box-shadow:0px 0px 10px 10px #000 inset;

模糊度

扩充阴影值

颜色

内阴影

例子：

div {

width: 200px;

height: 200px;

background: #ccc;

box-shadow: 0px 0px 10px 10px #000 inset;

}

#渐变

线性渐变

background:-webkit-linear-gradient(left,red,green)

left top right bottom /45deg 角度

red起始颜色

green结束颜色

例子：

div {

width: 200px;

height: 200px;

background: -webkit-linear-gradient(-45deg, red, green);

}

# 重复渐变

background:-webkit-repeating-linear-gradient(-45deg,red 0,red 10%,blue 10%,blue 20%);

例子：

div {

width: 40px;

height: 200px;

background: -webkit-repeating-linear-gradient(-45deg, red 0, red 10%, blue 10%, blue 20%);

}

# 径向渐变

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

例子：

img {

margin-left: 300px;

-webkit-box-reflect: left 10px -webkit-linear-gradient(rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1));

}

![](../img/2.jpg)

# 滤镜

-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

例子：

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);

}

钟表

#景深

800-1200

transform:perspective(800px);

perspective:800px;

例子：

* {

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);

}

#3d 加给父级不能继承

transform-style:preserver-3d;

#变形

transform:

scale X Y

rotate X Y Z

translate X Y Z

skew X Y

例子：

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);

}

#判断运动结束

transitionend

obj.addEventListener('transitionend',fn,false);

3d作品展示

* {

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);

}

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);

}

};

3d 立方体

* {

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);

}

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;

};

前

后

左

右

上

下