CSS3--j驚艷到你的新前端
一、css3的選擇器
1、 父子選擇器
直接關系 .box>.com
2、 兄弟選擇器
相鄰關系 .box+.com
<span>hello</span>
<p>world</p>
span+p{color:red;}
這裏通過span 找到p裏面的元素 目的是p
3、通用兄弟選擇器
屬於同一個父元素E~F
跟E同屬於一個父元素的所有的F
4、群組選擇器
把具有相同樣式租在一起中間用,隔開，也是常用的選擇器
5、P[class=^box] 以box開頭的類
6、P[class~box] class裏面有一個名字為box的類 這個類也可以有其他的類名
7、P[class$=box] 以box結尾的類
8、P[class*=box] 模糊匹配 裏面只要具有box三個字母鏈接起來的類名都可以
9、div：not([class]){} 沒有class屬性的div
二、偽類選擇器
css偽類用於向某些選擇器添加特殊效果
UI中的偽類
:enabled{} 選擇可用的元素
:disabled{} 不可用的元素
:checked{} 默認被選中 或者被選中
三、css中的nth選擇器
1、：first-child{} 第一個子元素
2、：last-child{} 最後一個子元素
3、：nth-child(n){} 第n個孩子
4、：nth-child(odd){}
5、：nth-child(even){} 第偶數個子元素
6、：only-child{} 獨生子
考點：
：nth-of-type{...}和 ：nth-child{.....}的區別
前者可以不在同一個父元素裏面但是後者必須在同一個父元素裏面
偽元素：默認呈現一個行內元素
div:: after{....} 正規寫法
為了兼容舊版本的瀏覽器一般是寫一個冒號div:after{....}
但是它與偽類的區別就在於一個冒號和兩個冒號
常見的偽元素
1、div::after{
content:"內容";
display:"block";
}
2、div::after{...}
3、::first-letter 第一個字母
4、::last-letter 第一行
5、::selection 被選中時候
四 CSS的重要屬性和樣式
1、關於透明度
opacity:0~1;
做兼容 ：filter；alpha(opcity...)取值在0-100;
這個的透明度是整體的透明度改變包括圖片和文字而 rgba的只是改變他的背景
2、關於陰影效果
2.1、文本陰影
text-shadow:h-shadow v-shadow blur color ;
水平陰影的位置向右為正向左為負
垂直方向的位置向上為正向下為負值
模糊距離
背景顏色
2.2 盒子陰影
box-shadow: x軸 y軸 模糊半徑 擴展半徑 顏色 投影方式 [inset]\[outset]
3、文字相關的樣式
字體的引入
css3 @font-face命名規則
@font-face{
font-family:自己定義的字體名字;
src:url(路徑);
需要給字體的格式做兼容
}
4、 圓角 border-radius
一個值的時候為四個角的一樣 一般是圓形的話就寫50%；
兩個值的時候顯示的樣式是對角 值1 表示左上角和右下角 值2 表示右上角和左下角
四個值的時候表示順時針 上左 上右 下右 下左
三個值的時候 值1 表示左上 值2 右上 左下 值3 右下
有的人還會寫 border-radius: 10px 20px /30px 40px;
這是把一個叫分割成為水平方向和垂直方向上的 斜線前面表示水平方向的 後面表示垂直方向上的
5、 關於給邊框加背景圖片
border-image-source:url(路徑);
border-image-slice:數值 取值個數 1-4 fill；
border-image-repeat：是否平鋪 默認被拉伸
repeat: 平鋪 從中心開始平鋪 會有半個圖片的情況
stretch: 拉伸
round ： 鋪滿
border-image：url() 27 fill;
border-image-width: 邊框圖片的寬度
border-image-outset 邊框圖片外凸
6、CSS3多背景圖片
background-image: url() , url(),url();
7、 背景漸變——現行漸變
background: linear-gradient(angle,顏色 0%, 顏色 50% , 顏色 100%)
angle: left right top bottom.
30deg to left(以偏移30度的方向向左)
to top left (向左上角偏移);
repeat-linear-grandient: 重復漸變
8、 兼容問題
-webkit-height: ; 谷歌 蘋果
-moz-height: ; 火狐
-ms-height： ; ie
-0-height : ; 歐朋
五、關於變換 transform
變換： transform;
transform: rotate| scale | skew | translate
屬性之間用空格隔開
rotate 旋轉
scale 縮放
skew 扭曲
translate 移動
a、 transform:translateX(值)；
如果不寫xyz默認x
transform=translate(值1,值2); 值1 是水平方向上的位移 值2是垂直方向上的位移
b、 transform:rotateX(60deg) 在x軸旋轉60度， 如果不寫XYZ的話是默認沿著Z軸旋轉。
c、 scale 縮放
transform: scaleX (0.5)水平方向上的是x縮放
括號裏的值為一個數的時候默認水平縮放和垂直縮放都是這個值
括號裏有兩個值的時候第一個值為水平方向的縮放 第二個值為垂直方向的縮放。
d、 扭曲 skew
transform : skew(45deg);
默認情況下繞著X 軸扭曲
transform: center center;
改變基點
transform-oligin:top center; 這裏的值除了可以是帶有方位詞 還可以是帶有百分號的像素
六 、三種位置居中的方法
第一種、
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
第二種、
position=absolute;
left:50%;
top:50%;
margin-top:負的標簽寬度的一半;
margin-left:負的標簽高度的一半;
第三種、
position=absolute;
left:50%;
top:50%;
translate(-50%,-50%);
七、 關於過渡 transition
1、transition的屬性和值
transition: all 5s ease 0s;
all 表示改變多個屬性
5s 表示改變這個屬性的總時間
ease 是指這個改變的速度
0s 表示除法事件延遲的時間
transition-property: 過度屬性；
transition-duration: 持續時間
transition-timing-function: 速度
transition-delay: 延遲時間
tramsition: 改變屬性 持續時間 速度 延遲時間
2、 transition的速度的值
ease: 逐漸變慢；
linear: 勻速；
ease-in: 勻加速
ease-out: 勻減速
ease-in-out: 先加速在減速
cubic-bezien: 自定義貝塞爾曲線
3、關於transition 的位置
改變誰hover 時候的樣子一般就放在這個元素裏面
li{
transition: all 5s ease 0s;
}
放在li{} 和li:hover{} 裏面的區別
如果放在li{} 裏面那麽過去了之後他自己會向剛剛過去的樣子一樣再回到原來的位置
如果放到li:hover{} 裏面那麽過去了之後在哪就在那 不會再回來
八、 自定義動畫 animation
animation:‘my‘ 20s linear 2s infinite animation-interation-count;
動畫名字 持續時間 速度 循環次數 循環的方向
1、 animation的屬性和值
animation-name: 名字;
animation-duration: 時間
animation-timing-function: 速度
animation-delay: 延遲
animation-interation-count: 次數 當為infinite的時候為無限次
animation-direction: 方向 當為alternate 是來回運動 當為reverse的時候反向運動
animation-fill-mode: 默認值為 none 不改變默認行為
forwords :向前走 停在結束的位置
backwords:向後走 停在開始位置
both ：走到哪 聽到那
2、設置關鍵幀
例子是摩天輪的關鍵幀
@keyframe myname{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
CSS3--j驚艷到你的新前端