CSS 小結筆記之變形、過渡與動畫

番茄西紅柿發(fā)布于2019-04-23 13:22 / 1760人閱讀

摘要：變形變形移動移動可以指定像素值也可以指定百分比，注意指定百分比是自身大小的百分比，因此可以用于設置盒子定位時的居中對齊在設置后再移動自身的即可。方向上的移動在現實生活中是距離變遠，距離變近。

1、過渡 transition

過渡屬性用法： transition :ransition-property transition-duration transition-timing-function transition-delay

可以一起指定也可以分別多帶帶指定

transition-property: 是要過渡的屬性（如width，height），all是所有都改變。

transition-duration：花費的時間，單位為s或ms

transition-timing-function：是指定動畫類型（運動區(qū)曲線），運動曲線有以下幾種

　　　　ease=>逐漸慢下來（默認值） linear=>勻速 ease-in=>加速 ease-out=>減速 ease-in-out=>先加速在減速

transition-delay 延遲時間，單位為s或ms

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        
        div {
            width: 100px;
            height: 200px;
            background-color: aqua;
            transition: width 2s ease-in-out 0.5s;
        }
        
        div:hover {
            width: 500px;
        }
    style>
head>

<body>
    <div>div>
body>

html>

View Code

結果如下，當鼠標上上去后變化不再是瞬間完成，而是過渡完成。

2、變形 transform

(1)、2D變形

　　（a）移動 translate(x,y)

　　　　　　移動可以指定像素值也可以指定百分比，注意：指定百分比是自身大小的百分比，因此可以用于設置盒子定位時的居中對齊（在設置left：50%后再移動自身的-50%即可）。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            transition: all 2s;
        }
        
        div:active {
            transform: translate(200px, 200px);
        }
    style>
head>

<body>
    <div>div>
body>

html>

View Code

　　　　　　點擊之后盒子進行了移動。用于讓定位的盒子居中的代碼入下

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .fa {
            width: 300px;
            height: 300px;
            background-color: aqua;
            transition: all 0.5s;
            position: relative;
        }
        
        .son {
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            transform: translate(-50%, -50%);
        }

    style>
head>

<body>
    <div class="fa">
        <div class="son">div>
    div>

body>

html>

View Code

　　　　　　結果為　　　　　

　?。╞）縮放 scale（x，y）

　　　　　　x,y設置大于1 是放大，小于1 是縮小。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
        }
        
        div:hover {
            transform: scale(0.5, 2);
        }
    style>
head>

<body>
    <div>

    div>
body>

html>

View Code

　?。╟）旋轉 rotate(x deg)

　　　　　x指定度數值，正數是順時針旋轉，負數是逆時針旋轉。

　　　　旋轉可以使用transform-origin 指定旋轉中心點，transform-origin 給left top right bottom 也可以指定具體的像素值。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotate(120deg);
        }
    style>
head>

<body>
    <div>div>
body>

html>

View Code

　?。╠）傾斜 skew（x deg ,y deg）

　　　　　　　　x,y分別指定傾斜在x，y方向上的角度，可以為負數。y值不寫默認為0。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid red;
            transition: all 1s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: skew(30deg, 20deg);
        }
    style>
head>

<body>
    <div>div>
body>

html>

View Code

（2）3D變形

　?。╝）旋轉（rotateX,rotateY,rotateZ）

　　　　3D旋轉與2D類似，只不過一個是基于二位坐標一個是基于三維坐標。三個值可以同時指定也可以多帶帶指定。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotateX(120deg);
            /* transform: rotateY(120deg); */
            /* transform: rotateZ(120deg); */
        }
    style>
head>

<body>
    <div>div>
body>

html>

View Code

　?。╞）移動（translateX，translateY，translateZ）

　　　　3D移動對于xy方向上的移動與2d移動一致。只有z方向上的移動不一樣。Z方向上的移動在現實生活中是距離變遠，距離變近。因此在網頁中顯示結果是變近則變大，變遠則變小。

　　　　要使Z方向上移動生效首先要設置perspective（眼睛距離屏幕的距離）;

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        body {
            perspective: 1000px;
            /* 數值越小說明眼睛離的越近 */
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 0.5s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: translate3d(0, 0, 200px);
        }
    style>
head>

<body>
    <div>

    div>
body>

html>

View Code

3、動畫 animation　

　　（1）、animation: animation-name ||animation-duration|| animation-timing-function ||animation-delay ||animation-iteration-count|| animation-direction|| animation-fill-mode; 　　　animation-name:動畫名稱（自己使用@keyframes 定義的動畫）　　　animation-duration：持續(xù)時間　　　animation-timing-function：運動曲線，與過渡的運動曲線類似。　　　animation-delay：延遲時間　　　animation-iteration-count：循環(huán)次數（infinite 是無限循環(huán)）　　　animation-direction?。菏欠穹聪颍▌赢嬍欠袷怯山Y尾倒開是倒著放的）　　　animation-fill-mode：設置在動畫播放之外的狀態(tài)（結束時的狀態(tài)）none | forwards（設為結束時的狀態(tài)）| backwards(設為開始時的狀態(tài))|both（設為開始或結束時的狀態(tài)）　　　animation-play-state：設置動畫狀態(tài) running 開始|paused 暫停　　（2）、@keyframes 自定義動畫 　　　　格式如下　　　　　

@keyframes 動畫名稱 {
from{ 開始} 0%
to{ 結束 } 100%
}

可以用 from...to 來指定動畫過程，也可以用0%~100%指定動畫過程。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* animation: 動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向 */
            animation: move 5s linear 3;
        }
        
        @keyframes move {
            0% {
                transform: translate3d(0, 0, 0);
            }
            25% {
                transform: translate3d(400px, 0, 0);
            }
            50% {
                transform: translate3d(400px, 300px, 0);
            }
            75% {
                transform: translate3d(0, 300px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
            }
        }
    style>
head>

<body>
    <div>div>
body>

html>

View Code

云服務器 GPU云服務器翻轉過渡動畫 ios過渡動畫 jquery過渡動畫 css過渡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/1782.html

Css3 筆記動畫和定位屬性

摘要：屬性決定元素如何定位，通過實現位置的改變默認值，元素按照標準流的方式正常排列。絕對定位，不受父元素父容器限制?？梢栽O置元素的疊加順序，但依賴定位屬性大的元素會覆蓋小的元素為的元素不參與層級比較為負值，元素被普通流中的元素覆蓋? transform 變形屬性屬性：translate 平移，rotate 旋轉, scale 縮放,skew 傾斜 ◆ translate :指定對象的2D平移第一個...

Tony_Zby 2019-04-23 11:43 評論0 收藏0
CSS3學習筆記

摘要：只對英文起作用，以單詞作為換行依據。換句話說，字符串與屬性值中的任意位置相匹配。其主要有兩個值和。主要具有四個屬性值和?；虮硎炯t色，表示綠色，表示藍色，也可取其他數值來指定顏色。 1.文檔換行 a.強制一排顯示文本，多出的地方切割文本，并加上省略號，三句真言 text-overflow:ellipsis; /*實現溢出時產生省略號的效果, 或者clip表示剪切*/ overflow:h...

Flink_China 2019-08-29 12:36 評論0 收藏0
css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

摘要：中制作動畫的幾個屬性中的變形過渡動畫。默認值為，為時，表示變化是瞬時的，看不到過渡效果。實現動畫效果主要由兩部分組成通過類似動畫中的幀來聲明一個動畫在屬性中調用關鍵幀聲明的動畫。 css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。一、 CSS3變形（transform）語法： transform ： no...

waruqi 2019-08-30 10:51 評論0 收藏0
css過度與動畫

摘要：綜上，上面的代碼的值都應該加上，即逐幀動畫在實現一個卡通影片或者一個復雜的進度指示框，或者的標志時這種場景比較適應逐幀動畫。這種平滑特性不適用于逐幀動畫的實現。緩動效果回彈動畫效果是比較常見的動畫，比如小球的運動、對于尺寸變化和角度變化使用回彈效果可以增強動畫的體驗。小面介紹一些簡單的緩動效果的動畫。彈跳動畫的實現 css中所有過渡和動畫都是跟一條曲線（緩動曲線）有關的，這條曲線...

Kross 2019-08-29 12:36 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關注我要私信

TA的文章

tensor

閱讀 847·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 4120·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3931·2021-11-30 14:52
VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區(qū)

閱讀 4027·2021-11-29 11:00
百度智能云：云產品特惠福利,1核2G輕量應用服務器僅48元/年

閱讀 3922·2021-11-29 11:00
Linux系統和寶塔面板如何啟用禁ping功能?

閱讀 4039·2021-11-29 11:00
301重定向怎么做?301重定向設置方法有幾種

閱讀 3770·2021-11-29 11:00
wordpress網站重定向次數過多的解決方法

閱讀 6609·2021-11-29 11:00

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS 小結筆記之變形、過渡與動畫

1、過渡 transition

2、變形 transform

(1)、2D變形

（a）移動 translate(x,y)

?。╞）縮放 scale（x，y）

?。╟）旋轉 rotate(x deg)

?。╠）傾斜 skew（x deg ,y deg）

（2）3D變形

?。╝）旋轉（rotateX,rotateY,rotateZ）

?。╞）移動（translateX，translateY，translateZ）

3、動畫 animation

相關文章

Css3 筆記動畫和定位屬性

CSS3學習筆記

css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

css過度與動畫

發(fā)表評論

0條評論

番茄西紅柿

男|高級講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產品特惠福利,1核2G輕量應用服務器僅48元/年

Linux系統和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設置方法有幾種

wordpress網站重定向次數過多的解決方法

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS 小結筆記之變形、過渡與動畫

1、過渡 transition

2、變形 transform

(1)、2D變形

（a）移動 translate(x,y)

?。╞）縮放 scale（x，y）

?。╟）旋轉 rotate(x deg)

?。╠）傾斜 skew（x deg ,y deg）

（2）3D變形

?。╝）旋轉（rotateX,rotateY,rotateZ）

?。╞）移動（translateX，translateY，translateZ）

3、動畫 animation

相關文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS 小結筆記之變形、過渡與動畫

2、變形 transform

(1)、2D變形

　　（a）移動 translate(x,y)

　?。╞）縮放 scale（x，y）

　?。╟）旋轉 rotate(x deg)

　?。╠）傾斜 skew（x deg ,y deg）

　?。╝）旋轉（rotateX,rotateY,rotateZ）

　?。╞）移動（translateX，translateY，translateZ）

3、動畫 animation　