6_動畫_其他屬性

2D徙赢、3D變形動畫

transform：2D變形：復(fù)合屬性

通過 CSS3 轉(zhuǎn)換档痪，我們能夠?qū)υ剡M行移動涉枫、縮放、轉(zhuǎn)動腐螟、拉長或拉伸愿汰。轉(zhuǎn)換方法：translate()/rotate()/scale()/skew()/matrix()

transform

none 定義不進行轉(zhuǎn)換困后。
translate(x,y) 定義 2D 平移轉(zhuǎn)換。
translateX(x) 定義轉(zhuǎn)換尼桶，只是用 X 軸的值操灿。
translateY(y) 定義轉(zhuǎn)換，只是用 Y 軸的值泵督。

transform: translate(100px,100px);

scale(x,y) 定義 2D 縮放轉(zhuǎn)換趾盐。
scaleX(x) 通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。
scaleY(y) 通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換小腊。

transform: scale(1.5,0.6);

rotate(angle) 定義 2D 旋轉(zhuǎn)救鲤，在參數(shù)中規(guī)定角度。

補充1.角度也可以使用弧度單位：rad

transform: rotate(60deg);

transform: rotate(60rad);

skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換秩冈。
kewX(angle) 定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換本缠。
skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。

transform: skewX(10px);

matrix(n,n,n,n,n,n) 定義 2D 轉(zhuǎn)換入问，使用六個值的矩陣丹锹。(x縮放，弧度耽誤旋轉(zhuǎn)芬失，弧度旋轉(zhuǎn)楣黍，y縮放，x平移棱烂，y平移)

變形矩陣功能很強大租漂，但是相對比較復(fù)雜，涉及到復(fù)雜的數(shù)學(xué)計算

transform-origin:改變元素變形的基準(zhǔn)點

像素/百分比
X軸：left/right/center
Y軸：top/bottom/center/

transform-origin: 0px 0px;

transform：3D變形：

transform：3D變形可以近似理解為沿著Z軸移動元素颊糜，使得元素更加靠近或者遠離你哩治，從而使元素看起來變得更大或更小。

transform：3D變形函數(shù)
- translate3d(x,y,z) 定義 3D 轉(zhuǎn)換衬鱼。
- translateY(y) 定義轉(zhuǎn)換业筏，只是用 Y 軸的值。
- translateX(x) 定義轉(zhuǎn)換鸟赫，只是用 X 軸的值蒜胖。
- translateZ(z) 定義 3D 轉(zhuǎn)換，只是用 Z 軸的值惯疙。
- +++++++++++++++++++++++++++++++++++++++
- rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)。
- rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)妖啥。
- rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)霉颠。
- rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。
- +++++++++++++++++++++++++++++++++++++++
- scale3d(x,y,z) 定義 3D 縮放轉(zhuǎn)換荆虱。
- scaleZ(z) 通過設(shè)置 Z 軸的值來定義 3D 縮放轉(zhuǎn)換蒿偎。
- scaleX(x) 通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換朽们。
- scaleY(y) 通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。
- +++++++++++++++++++++++++++++++++++++++
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定義 3D 轉(zhuǎn)換诉位，使用 16 個值的 4x4 矩陣骑脱。

transform-origin 允許你改變被轉(zhuǎn)換元素的位置。2D 轉(zhuǎn)換元素能夠改變元素 x 和 y 軸苍糠。3D 轉(zhuǎn)換元素還能改變其 Z 軸叁丧。
perspective(n) 為 3D 轉(zhuǎn)換元素定義透視視圖。父控件中設(shè)置
transform-style 規(guī)定被嵌套元素如何在 3D 空間中顯示岳瞭。
- flat 子元素將不保留其 3D 位置拥娄。
- preserve-3d 子元素將保留其 3D 位置。
perspective-origin 規(guī)定 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)
}

練習(xí).gif

過渡動畫：

通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下姚炕，當(dāng)元素從一種樣式變換為另一種樣式時為元素添加效果摊欠。
CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。要實現(xiàn)這一點柱宦，必須規(guī)定兩項內(nèi)容：把效果添加到哪個 CSS 屬性上/規(guī)定效果的時長

過渡動畫的屬性：

transition 簡寫屬性些椒，用于在一個屬性中設(shè)置四個過渡屬性。
transition-property 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱捷沸。
- none 沒有屬性會獲得過渡效果摊沉。
- all 所有屬性都將獲得過渡效果。
- 屬性名稱
transition-duration 定義過渡效果花費的時間痒给。默認是 0说墨。單位是秒或毫秒
transition-timing-function 規(guī)定過渡效果的時間曲線。默認是 "ease"苍柏。
- linear 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）尼斧。
- ease 規(guī)定慢速開始，然后變快试吁，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）棺棵。
- ease-in 規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）熄捍。
- ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）烛恤。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值∮嗟ⅲ可能的值是 0 至 1 之間的數(shù)值缚柏。
transition-delay 規(guī)定過渡效果何時開始。默認是 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币喧，我們能夠創(chuàng)建動畫轨域，這可以在許多網(wǎng)頁中取代動畫圖片、Flash 動畫以及 JavaScript杀餐。

@keyframes 設(shè)定動畫規(guī)則干发。可以近似理解為動畫的劇本史翘。
- name 必需枉长。定義動畫的名稱。
- 0-100%/from...to... 必需恶座。動畫時長的百分比搀暑。
- 需要變化的 CSS 樣式屬性:必需。
animation 所有動畫屬性的簡寫屬性跨琳，用于設(shè)置六個動畫屬性：animation-name/animation-duration/animation-timing-function/animation-delay/animation-iteration-count/animation-direction
animation-name 屬性為 @keyframes 動畫規(guī)定名稱自点。若設(shè)置為none則覆蓋已有的動畫效果。
animation-duration 規(guī)定動畫完成一個周期所花費的秒或毫秒脉让。默認是 0桂敛。
animation-timing-function 規(guī)定動畫的速度曲線。默認是 "ease"溅潜。
- linear 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）术唬。
- ease 規(guī)定慢速開始，然后變快滚澜，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）粗仓。
- ease-in 規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）设捐。
- ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）借浊。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值÷苷校可能的值是 0 至 1 之間的數(shù)值蚂斤。
animation-delay 規(guī)定動畫何時開始。默認是 0槐沼。
animation-iteration-count 規(guī)定動畫被播放的次數(shù)曙蒸。默認是 1。infinite為無限次播放岗钩。
animation-direction 規(guī)定動畫是否在下一周期逆向地播放纽窟。默認是 "normal 順向播放"。/ alternate 動畫應(yīng)該輪流反向播放兼吓。
animation-play-state 規(guī)定動畫是否正在運行或暫停臂港。默認是 "running 規(guī)定動畫正在播放。"。/paused 規(guī)定動畫暫停趋艘。
animation-fill-mode 規(guī)定對象動畫時間之外的狀態(tài)。
- none 不改變默認行為凶朗。
- forwards 當(dāng)動畫完成后瓷胧，保持最后一個屬性值（在最后一個關(guān)鍵幀中定義）。
- backwards 在 animation-delay 所指定的一段時間內(nèi)棚愤，在動畫顯示之前搓萧，應(yīng)用開始屬性值（在第一個關(guān)鍵幀中定義）。
- both 向前和向后填充模式都被應(yīng)用宛畦。

@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：透明度設(shè)定

IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設(shè)定透明度瘸洛。opacity 屬性能夠設(shè)置的值從 0.0 到 1.0。值越小次和，越透明反肋。
E8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100踏施。值越小石蔗，越透明。
opacity與通過rgba()設(shè)定透明度的區(qū)別：前者同時作用于元素的標(biāo)簽內(nèi)容畅形，后者只是作用于元素本身

鼠標(biāo)的樣式 cursor：

我們可以通過cursor屬性改變?yōu)g覽器默認的鼠標(biāo)樣式养距，可改變的樣式很多，這里僅僅列出幾種相對常用的
- hand是手型
- pointer也是手型日熬，推薦使用這種棍厌。
- crosshair是十字型
- text是移動到文本上的那種效果
- wait是等待的那種效果
- default是默認效果
- e-resize是向右的箭頭
- ne-resize是向右上的箭頭
- n-resize是向上的箭頭
- nw-resize是向左上的箭頭
- w-resize是向左的箭
- sw-resize是左下的箭頭
- s-resize是向下的箭頭
- se-resize是向右下的箭頭
- auto是由系統(tǒng)自動給出效果

rem:根元素字體的大小

瀏覽器默認字體大小為16px
em是以父元素字體為基準(zhǔn)的
rem是以根元素字體大小為基準(zhǔn)的

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>rem和em的區(qū)別</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標(biāo)簽字體，段落文字大小為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 在一個聲明中設(shè)置所有的輪廓屬性虽填。
  - outline-color 設(shè)置輪廓的顏色丁恭。
  - outline-style 設(shè)置輪廓的樣式。
  - outline-width 設(shè)置輪廓的寬度斋日。
  - outline-offset 設(shè)置輪廓到邊框的距離牲览。注：css新增屬性,不可以寫到符合屬性里。

`display 屬性常用屬性值：`

display的屬性值很多恶守，有些目前支持度不好
- none 此元素不會被顯示第献。
- block 此元素將顯示為塊級元素贡必。特征：換行，可設(shè)置寬高尺寸庸毫。
- inline 行內(nèi)元素仔拟，默認。特征:大小自適應(yīng)飒赃；不換行利花。
- inline-block 行內(nèi)塊元素。特征:可以設(shè)置大小载佳，但是不可以換行炒事。
- 其他：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="">財經(jīng)</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="">財經(jīng)</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="">財經(jīng)</a></li>
                <li><a href="">讀書</a></li>
            </ul>
        </li>
    </ul>
</nav>
</body>
</html>