CSS3

CSS编写顺序

0）float,position,z-index
1）display:block,inline,inline-block,none;
2）盒模型相关属性
3）background:color url(../images/xx.jpg) repeat attachment position (size clip origin)
4）字体属性font(family,size,weight,style),text(align,transform,indent),word(letter)-spacing word-break,word-wrap
5）CSS3 border-radius（圆角边框）,opacity,text-shadow（文本阴影）,box-shadow（盒阴影）,linear-gradient（线性渐变）,background-size(clip,origin)图像的尺寸,trasition,tranfrom,animation

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow    必需。水平阴影的位置。允许负值。    
v-shadow    必需。垂直阴影的位置。允许负值。    
blur    可选。模糊距离。    
spread    可选。阴影的尺寸。    
color    可选。阴影的颜色。请参阅 CSS 颜色值。    
inset    可选。将外部阴影 (outset) 改为内部阴影。

CSS3动画

角度单位　　deg度、grad梯度、rad弧度、turn转/圈

1、transition：property duration timing-function delay

transition-property　　　　 规定设置过渡效果的 CSS 属性的名称。  all 所有属性都将获得过渡效果
transition-duration        规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
linear                规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）

ease                  规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）

ease-in               规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out              规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out           规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay    定义过渡效果何时开始。


.box{
    width: 300px; height: 200px;
    background: #f60;
    /*transform: rotate(30deg);　　旋转
    transform-origin:30% 30%;*/　　旋转元素的基点位置
    transition:width 0.5s,height 0.5s;
}
.box:hover{
    width: 600px;height: 300px;
}
<div class="box"></div>

实例1：
.triangle > span{
　　margin-left: 10px;
　　border-top: 10px solid transparent;
　　border-bottom: 10px solid transparent;
　　border-left: 20px solid #f60;
　　display: inline-block;
　　transform-origin:0 50%;
　　transition-property:transform; /* CSS属性名称 */
　　transition-duration:0.5s; /* 执行时间 */
　　transition-timing-function:ease-in; /* 动画速度曲线 */
　　/*transition-delay:1s; 开始时间 */
　　/*transition:transform 2s ease-in 1s;*/
}
.triangle:hover > span{
　　transform:rotate(90deg);
}

<div class="triangle">卡卡<span></span></div>

实用的文本框实例：
input[type=text]{
　　width: 100px;
　　transition:width 0.5s;
　　/*transition-delay:2s;*/
}
input[type=text]:focus{
　　width: 500px;
}

<form>
<input type="text" class="search" placeholder="请输入关键字">
</form>

animation

加载：
.loading_bar{
　　width: 100%; height: 3px;
　　position: relative;
　　margin-top: 20px;
　　outline: 2px solid #666;
　　background: #666;
}
.loading_bar::after{
　　content: "";
　　position: absolute; top: 0; left: 0;
　　width: 0; height: 3px;
　　background: #f60;
　　animation:loading_bar 10s linear infinite;
}
@keyframes loading_bar{
　　0% {width: 0;}
　　50% {width: 50%;}
　　100% {width: 100%;}
}

.loading,.loading::after{
　　width: 50px;height: 50px;
　　border-radius: 50%;
}
.loading{
　　position: relative;
　　margin-top: 20px;
　　border: 3px solid rgba(0,0,0,0.2);
　　border-left-color: #f60;
　　animation:loading 5s linear infinite;
}
.loading::after{
　　position: absolute;
　　content: "";
}
@keyframes loading{
　　0%{
　　transform:rotate(0deg);
　　}
　　100%{
　　transform:rotate(360deg);
　　}
}

<div class="loading"></div>

CSS选择器

1. 标签选择器

h1{color:red;}
h3,h4,p{font-size:12px;}　　多个用 " , " 隔开

 2. 类选择器

.main{color:red;}

3. 后代选择器

.main h3{color:red;}

4. 子选择器

.main > h3{color:red;}　　子选择器 不是孙级

<div class="main">
    <h3>h3标题</h3>　　这个h3会显示红色
    <div>
         <h3>h3标题2</h3>　　他不会显示红色
    </div>
</div>

5. 兄弟选择器

.main ~ h3{color:red;}　　中间可以隔元素

<div class="main"></div>
<a href="javascript:;">元素</a>
<h3>兄弟1</h3>
<h3>兄弟2</h3>

6. 相邻选择器

.main + h3{color: #f60;}    中间不可以隔元素，可以有文字，应用下面的一个元素

<div class="main"></div>
打快点撒
<h3>兄弟1</h3>
<h3>兄弟2</h3>

 7. 属性选择器

input[type="text"]{color:red;}

<form>
    <input type="text">
</form>

7.1 [title]{带有title属性的所有元素}

7.2 [class="title"]{class属性值为title的元素}

7.3 [class^=main]{class属性值以main开头的元素}

7.4 [class$=main]{class属性值以main结尾的元素}

7.5 [class*=main]{class属性值包含mian字符的元素}

7.6 [class~=main]{class属性值用 ‘空格’ 隔开的元素}

7.7 [class|=main]{class属性值用 ‘-’ 隔开的元素}

css伪类&伪元素

伪类

:hover , :link , :active , :visited  , :focus , :blur{}   动态伪类
:disabled（不可编辑的）, :enabled , :read-only（只读）, :read-write , :focus    UI伪类

CSS3伪类

:nth-child(选择器匹配属于其父元素的第 N 个子元素，不论元素的类型) , :nth-last-child(n) , :first-child , :last-child
:nth-of-type(选取父元素的第 N 个指定类型的子元素) , :nth-last-of-type(n) , :last-of-type , :last-of-type
:not(h3) 否定伪类 不是h3

伪元素

::before , ::after , ::first-letter（第一个字符）, :first-line（第一段）, ::selection（选取到文字时）

 

h-shadow 必需。水平阴影的位置。允许负值。

v-shadow 必需。垂直阴影的位置。允许负值。

blur  可选。模糊距离。   

spread     可选。阴影的尺寸。

color       可选。阴影的颜色。请参阅 CSS 颜色值。      

inset       可选。将外部阴影 (outset) 改为内部阴影。