2D、3D變形動畫
transform：2D變形：復合屬性
通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。轉換方法：translate()/rotate()/scale()/skew()/matrix()
transform
- none 定義不進行轉換。
- translate(x,y) 定義 2D 平移轉換。
- translateX(x) 定義轉換，只是用 X 軸的值。
- translateY(y) 定義轉換，只是用 Y 軸的值。
transform: translate(100px,100px);
scale(x,y) 定義 2D 縮放轉換。
scaleX(x) 通過設置 X 軸的值來定義縮放轉換。
-
scaleY(y) 通過設置 Y 軸的值來定義縮放轉換。
transform: scale(1.5,0.6);
-
rotate(angle) 定義 2D 旋轉，在參數中規定角度。
補充1.角度也可以使用弧度單位：radtransform: rotate(60deg);transform: rotate(60rad);
skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。
kewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。
-
skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。
transform: skewX(10px);
-
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。(x縮放，弧度耽誤旋轉，弧度旋轉，y縮放，x平移，y平移)
變形矩陣功能很強大，但是相對比較復雜，涉及到復雜的數學計算
transform-origin:改變元素變形的基準點
- 像素/百分比
- X軸：left/right/center
- Y軸：top/bottom/center/
transform-origin: 0px 0px;
transform：3D變形：
transform：3D變形可以近似理解為沿著Z軸移動元素，使得元素更加靠近或者遠離你，從而使元素看起來變得更大或更小。
- transform：3D變形函數
- translate3d(x,y,z) 定義 3D 轉換。
- translateY(y) 定義轉換，只是用 Y 軸的值。
- translateX(x) 定義轉換，只是用 X 軸的值。
- translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。
- +++++++++++++++++++++++++++++++++++++++
- rotate3d(x,y,z,angle) 定義 3D 旋轉。
- rotateX(angle) 定義沿著 X 軸的 3D 旋轉。
- rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。
- rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。
- +++++++++++++++++++++++++++++++++++++++
- scale3d(x,y,z) 定義 3D 縮放轉換。
- scaleZ(z) 通過設置 Z 軸的值來定義 3D 縮放轉換。
- scaleX(x) 通過設置 X 軸的值來定義縮放轉換。
- scaleY(y) 通過設置 Y 軸的值來定義縮放轉換。
- +++++++++++++++++++++++++++++++++++++++
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定義 3D 轉換，使用 16 個值的 4x4 矩陣。
- transform-origin 允許你改變被轉換元素的位置。2D 轉換元素能夠改變元素 x 和 y 軸。3D 轉換元素還能改變其 Z 軸。
perspective(n) 為 3D 轉換元素定義透視視圖。父控件中設置- transform-style 規定被嵌套元素如何在 3D 空間中顯示。
- flat 子元素將不保留其 3D 位置。
- preserve-3d 子元素將保留其 3D 位置。
- perspective-origin 規定 3D 元素的底部位置。目前瀏覽器都不支持 perspective-origin 屬性
- backface-visibility 定義元素在不面對屏幕時是否可見。瀏覽器支持度不好
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>6-51課堂演示</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul id="ul1">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
<br><br>
<hr>
<ul id="ul2">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</body>
</html>
@charset "UTF-8";
ul{
list-style: none;
font-size: 24px;
}
li{
background-image: linear-gradient(to right,rgb(76, 245, 87),rgb(238, 70, 136));
width: 200px;
margin: 10px;
padding: 10px;
border-radius: 10px;
}
a{
text-decoration: none;
}
#ul1 li{
float: left;
}
li:hover{
background-image: linear-gradient(to left,rgb(76, 245, 87),rgb(238, 70, 136));
transform: rotate(15deg);
transform-origin: left top;
}
hr{
clear: both;
border-top: 50px;
border-width: 3px;
border-style: dashed;
border-color: rgb(230, 122, 149)
}
練習.gif
過渡動畫：
- 通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。
- CSS3
過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容：把效果添加到哪個 CSS 屬性上/規定效果的時長
過渡動畫的屬性：
- transition 簡寫屬性，用于在一個屬性中設置四個過渡屬性。
- transition-property 規定應用過渡的 CSS 屬性的名稱。
- none 沒有屬性會獲得過渡效果。
- all 所有屬性都將獲得過渡效果。
- 屬性名稱
- transition-duration 定義過渡效果花費的時間。默認是 0。單位是秒或毫秒
- transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"。
- 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 規定過渡效果何時開始。默認是 0。
#div1:hover{
background: rgb(244, 142, 91);
width: 100px;
/*transition-property: all;*/
transition-property: width;
transition-duration: 2.0s;
/*transition-timing-function: ease;*/
transition-timing-function: cubic-bezier(.42, 0, .58, 1);
transition-delay: 1.0s;
}
CSS3 動畫屬性：
通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
-
@keyframes 設定動畫規則。可以近似理解為動畫的劇本。
- name 必需。定義動畫的名稱。
- 0-100%/from...to... 必需。動畫時長的百分比。
- 需要變化的 CSS 樣式屬性:必需。
animation 所有動畫屬性的簡寫屬性，用于設置六個動畫屬性：animation-name/animation-duration/animation-timing-function/animation-delay/animation-iteration-count/animation-direction
animation-name 屬性為 @keyframes 動畫規定名稱。若設置為none則覆蓋已有的動畫效果。
animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
-
animation-timing-function 規定動畫的速度曲線。默認是 "ease"。
- 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 之間的數值。
animation-delay 規定動畫何時開始。默認是 0。
animation-iteration-count 規定動畫被播放的次數。默認是 1。infinite為無限次播放。
animation-direction 規定動畫是否在下一周期逆向地播放。默認是 "normal 順向播放"。/ alternate 動畫應該輪流反向播放。
animation-play-state 規定動畫是否正在運行或暫停。默認是 "running 規定動畫正在播放。"。/paused 規定動畫暫停。
-
animation-fill-mode 規定對象動畫時間之外的狀態。
- none 不改變默認行為。
- forwards 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。
- backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
- both 向前和向后填充模式都被應用。
@keyframes mytest {
from{
margin-left: 50px;
background-color: rgb(79, 193, 128);
}
to{
margin-left: 300px;
background-color: rgb(193, 233, 79);
}
}
div:hover
{
animation: mytest 2.0s ease 1.0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes mytest {
0%{
margin-left: 50px;
background-color: rgb(79, 193, 128);
}
50%{
margin-left: 300px;
background-color: rgb(203, 213, 6);
}
100%{
margin-left: 150px;
background-color: rgb(193, 233, 79);
}
}
div:hover
{
animation: mytest 2.0s ease 1.0s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-fill-mode: forwards;
}
CSS其他常用屬性
opacity：透明度設定
- IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設定透明度。opacity 屬性能夠設置的值從 0.0 到 1.0。值越小，越透明。
- E8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明。
- opacity與通過rgba()設定透明度的區別：前者同時作用于元素的標簽內容，后者只是作用于元素本身
鼠標的樣式 cursor：
- 我們可以通過cursor屬性改變瀏覽器默認的鼠標樣式，可改變的樣式很多，這里僅僅列出幾種相對常用的
- hand是手型
- pointer也是手型，推薦使用這種。
- crosshair是十字型
- text是移動到文本上的那種效果
- wait是等待的那種效果
- default是默認效果
- e-resize是向右的箭頭
- ne-resize是向右上的箭頭
- n-resize是向上的箭頭
- nw-resize是向左上的箭頭
- w-resize是向左的箭
- sw-resize是左下的箭頭
- s-resize是向下的箭頭
- se-resize是向右下的箭頭
- auto是由系統自動給出效果
rem:根元素字體的大小
- 瀏覽器默認字體大小為16px
- em是以父元素字體為基準的
- rem是以根元素字體大小為基準的
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>rem和em的區別</title>
<style type="text/css">
p{
font-size: 0.75em;
}
.span1{
font-size: 2em;
}
.span2{
font-size: 2rem;
}
</style>
</head>
<body>
我是瀏覽器默認html字體大小為16px;
<p>
我是p標簽字體，段落文字大小為0.75em即：12px(16*0.75);<br>
<span class="span1">
我大小是2em，即24px，這里是相對父級字號(12px)*2的，而不是相對body里面的16px
</span><br>
<span class="span2">
我大小是2rem，即32px，這里是相對根元素字號(16px)*2的，而不是相對p里面的12px
</span>
</p>
</body>
</html>
輪廓（outline）
- 輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
- outline 在一個聲明中設置所有的輪廓屬性。
- outline-color 設置輪廓的顏色。
- outline-style 設置輪廓的樣式。
- outline-width 設置輪廓的寬度。
outline-offset 設置輪廓到邊框的距離。 注：css新增屬性,不可以寫到符合屬性里。
- outline 在一個聲明中設置所有的輪廓屬性。
display 屬性常用屬性值：
- display的屬性值很多，有些目前支持度不好
- none 此元素不會被顯示。
- block 此元素將顯示為塊級元素。特征：換行，可設置寬高尺寸。
- inline 行內元素，默認。特征:大小自適應；不換行。
- inline-block 行內塊元素。特征:可以設置大小，但是不可以換行。
- 其他：list-item/table/inline-table/table-cell/table-caption......
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.ul1>li{
background: rgb(73, 25, 56);
width: 150px;
height: 2em;
float: left;
text-align: center;
margin: 5px;
border-radius: 10px 10px 0px 0px;
font-size: 20px;
line-height: 40px;
}
.ul2{
background: rgb(168, 79, 210);
border-radius: 0px 0px 10px 10px;
display: none;
}
.ul1>li:hover>ul
{
display: block;
}
.ul1>li:hover
{
background: rgb(109, 23, 150);
}
.ul2>li>a:hover
{
display: inline-block;
border-radius: 10px;
width: 85%;
height: 2em;
background: rgb(208, 127, 123);
font-weight: bold;
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>6-56課堂演示</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul class="ul1">
<li>
<a href="">首頁</a>
<ul class="ul2">
<li><a href="">新聞</a></li>
<li><a href="">科技</a></li>
<li><a href="">財經</a></li>
<li><a href="">讀書</a></li>
</ul>
</li>
<li>
<a href="">首頁</a>
<ul class="ul2">
<li><a href="">新聞</a></li>
<li><a href="">科技</a></li>
<li><a href="">財經</a></li>
<li><a href="">讀書</a></li>
</ul>
</li>
<li>
<a href="">首頁</a>
<ul class="ul2">
<li><a href="">新聞</a></li>
<li><a href="">科技</a></li>
<li><a href="">財經</a></li>
<li><a href="">讀書</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
練習.gif
