国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 1689人閱讀

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

1、過渡 transition 

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

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

 

  • transition-property: 是要過渡的屬性（如width，height），all是所有都改變。
  • transition-duration：花費(fèi)的時(shí)間，單位為s或ms
  • transition-timing-function：是指定動(dòng)畫類型（運(yùn)動(dòng)區(qū)曲線），運(yùn)動(dòng)曲線有以下幾種
　　　　ease=>逐漸慢下來（默認(rèn)值） linear=>勻速 ease-in=>加速 ease-out=>減速 ease-in-out=>先加速在減速 
  • transition-delay 延遲時(shí)間，單位為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）移動(dòng) translate(x,y)

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

　　　　　　

　　　　　　點(diǎn)擊之后盒子進(jìn)行了移動(dòng)。用于讓定位的盒子居中的代碼入下

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ù)是順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)是逆時(shí)針旋轉(zhuǎn)。

　　　　旋轉(zhuǎn)可以使用transform-origin 指定旋轉(zhuǎn)中心點(diǎ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方向上的角度，可以為負(fù)數(shù)。y值不寫默認(rèn)為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變形

　　（a）旋轉(zhuǎn)（rotateX,rotateY,rotateZ）

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

　　　　

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）移動(dòng)（translateX，translateY，translateZ）

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

　　　　要使Z方向上移動(dòng)生效首先要設(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、動(dòng)畫 animation　

　　（1）、animation: animation-name ||animation-duration|| animation-timing-function ||animation-delay ||animation-iteration-count|| animation-direction|| animation-fill-mode; 　　　animation-name:動(dòng)畫名稱（自己使用@keyframes 定義的動(dòng)畫） 　　　animation-duration：持續(xù)時(shí)間 　　　animation-timing-function：運(yùn)動(dòng)曲線，與過渡的運(yùn)動(dòng)曲線類似。 　　　animation-delay：延遲時(shí)間 　　　animation-iteration-count：循環(huán)次數(shù) （infinite 是無限循環(huán)） 　　　animation-direction　：是否反向（動(dòng)畫是否是由結(jié)尾倒開是倒著放的） 　　　animation-fill-mode：設(shè)置在動(dòng)畫播放之外的狀態(tài)（結(jié)束時(shí)的狀態(tài)）none | forwards（設(shè)為結(jié)束時(shí)的狀態(tài)）| backwards(設(shè)為開始時(shí)的狀態(tài))|both（設(shè)為開始或結(jié)束時(shí)的狀態(tài)） 　　　animation-play-state：設(shè)置動(dòng)畫狀態(tài) running 開始|paused 暫停 　　（2）、@keyframes 自定義動(dòng)畫 　　　　格式如下　　　　　 
@keyframes 動(dòng)畫名稱 {
from{ 開始} 0%
to{ 結(jié)束 } 100%
}

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

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: 動(dòng)畫名稱 動(dòng)畫時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始 播放次數(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1782.html

相關(guān)文章

  • Css3 筆記 動(dòng)畫 和定位屬性

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

    Tony_Zby 評(píng)論0 收藏0

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

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

    Flink_China 評(píng)論0 收藏0

  • css3中的變形（transform）、過渡（transition）、動(dòng)畫（animation）屬性

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

    waruqi 評(píng)論0 收藏0

  • css過度與動(dòng)畫

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

    Kross 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<