成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS 小結(jié)筆記之變形、過渡與動畫

番茄西紅柿 / 1759人閱讀

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

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

結(jié)果如下，當(dāng)鼠標(biāo)上上去后變化不再是瞬間完成，而是過渡完成。

2、變形 transform

(1)、2D變形

　　（a）移動 translate(x,y)

　　　　　　移動可以指定像素值也可以指定百分比，注意：指定百分比是自身大小的百分比，因此可以用于設(shè)置盒子定位時的居中對齊（在設(shè)置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

　　　　　　結(jié)果為　　　　　

　　　　　

　　（b）縮放 scale（x，y）

　　　　　　x,y設(shè)置大于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

　　　　　　

　　（c）旋轉(zhuǎn) rotate(x deg)

　　　　　x指定度數(shù)值，正數(shù)是順時針旋轉(zhuǎn)，負數(shù)是逆時針旋轉(zhuǎn)。

　　　　旋轉(zhuǎn)可以使用transform-origin 指定旋轉(zhuǎn)中心點，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

　　　　　　

　　（d）傾斜 skew（x deg ,y deg）

　　　　　　　　x,y分別指定傾斜在x，y方向上的角度，可以為負數(shù)。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變形

　?。╝）旋轉(zhuǎn)（rotateX,rotateY,rotateZ）

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

　　　　

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

　　（b）移動（translateX，translateY，translateZ）

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

　　　　要使Z方向上移動生效首先要設(shè)置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;
            /* 數(shù)值越小說明眼睛離的越近 */
        }
        
        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)次數(shù) （infinite 是無限循環(huán)） 　　　animation-direction?。菏欠穹聪颍▌赢嬍欠袷怯山Y(jié)尾倒開是倒著放的） 　　　animation-fill-mode：設(shè)置在動畫播放之外的狀態(tài)（結(jié)束時的狀態(tài)）none | forwards（設(shè)為結(jié)束時的狀態(tài)）| backwards(設(shè)為開始時的狀態(tài))|both（設(shè)為開始或結(jié)束時的狀態(tài)） 　　　animation-play-state：設(shè)置動畫狀態(tài) running 開始|paused 暫停 　　（2）、@keyframes 自定義動畫 　　　　格式如下　　　　　 
@keyframes 動畫名稱 {
from{ 開始} 0%
to{ 結(jié)束 } 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: 動畫名稱 動畫時間 運動曲線 何時開始 播放次數(shù) 是否反方向 */
            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

　　　

 

　　

 

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1782.html

相關(guān)文章

  • Css3 筆記 動畫 和定位屬性

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

    Tony_Zby 評論0 收藏0

  • CSS3學(xué)習(xí)筆記

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

    Flink_China 評論0 收藏0

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

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

    waruqi 評論0 收藏0

  • css過度與動畫

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

    Kross 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<