CSS3之動畫三大特性

時間 2019-12-10

標籤 css3 css 動畫三大特性欄目 CSS 简体版

原文原文鏈接

一過渡模塊html

1 基本使用動畫

1,過渡三要素
1.1必需要有屬性發生變化
1.2必須告訴系統哪一個屬性須要執行過渡效果
1.3必須告訴系統過渡效果持續時長url

2.注意點
當多個屬性須要同時執行過渡效果時用逗號隔開便可
transition-property: width, background-color;
transition-duration: 5s, 5s;spa

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 50px;
            background-color: red;
            /*告訴系統哪一個屬性須要執行過渡效果*/
            transition-property: width, background-color;
            /*告訴系統過渡效果持續的時長*/
            transition-duration: 5s, 5s;

            /*transition-property: background-color;*/
            /*transition-duration: 5s;*/
        }
        /*:hover這個僞類選擇器除了能夠用在a標籤上, 還能夠用在其它的任何標籤上*/
        div:hover{
            width: 300px;
            background-color: blue;
        }
    </style>

2 過渡模塊其餘屬性code

div {
            width: 100px;
            height: 50px;
            background-color: red;
            transition-property: width;
            transition-duration: 5s;
            /*告訴系統延遲多少秒以後纔開始過渡動畫*/
            transition-delay: 2s;
}
 ul:hover li{
            margin-left: 700px;
        }
        ul li:nth-child(1){
            /*告訴系統過渡動畫的運動的速度*/
            transition-timing-function: linear;
        }
        ul li:nth-child(2){
            transition-timing-function: ease;
        }
        ul li:nth-child(3){
            transition-timing-function: ease-in;
        }
        ul li:nth-child(4){
            transition-timing-function: ease-out;
        }
        ul li:nth-child(5){
            transition-timing-function: ease-in-out;
        }

3 連寫orm

 div {
            width: 100px;
            height: 50px;
            background-color: red;
            transition-property: width;
            transition-duration: 5s;
          
            transition: width 5s linear 0s,background-color 5s linear 0s;
          
            transition: background-color 5s linear 0s;
          
            transition: width 5s,background-color 5s,height 5s;
          
            transition: all 5s;
        }

4 編寫過渡的套路htm

1.編寫過渡套路
1.1不要管過渡, 先編寫基本界面
1.2修改咱們認爲須要修改的屬性
1.3再回過頭去給被修改屬性的那個元素添加過渡便可blog

實現彈性效果圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>91-過渡模塊-彈性效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 100px;
            background-color: red;
            margin-top: 100px;
            text-align: center;
            line-height: 100px;
        }
        div span{
            font-size: 80px;
            /*transition-property: margin;*/
            /*transition-duration: 3s;*/
            transition: margin 3s;
        }
        div:hover span{
            margin: 0 20px;
        }
    </style>
</head>
<body>
<!--
1.編寫過渡套路
1.1不要管過渡, 先編寫基本界面
1.2修改咱們認爲須要修改的屬性
1.3再回過頭去給被修改屬性的那個元素添加過渡便可
-->
<div>
    <span>你</span>
    <span>好</span>
    <span>程</span>
    <span>序</span>
    <span>員</span>
</div>
</body>
</html>

效果：animation

二轉換模塊 transform

1 基本使用

transform: rotate(45deg) translate(100px, 0px)    scale(1.5, 1.5);

2 形變中心點，錨點

 ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            /*
            第一個參數:水平方向
            第二個參數:垂直方向
            注意點
            取值有三種形式
            具體像素
            百分比
            特殊關鍵字
            */
            transform-origin: 200px 0px;
            transform-origin: 50% 50%;
            transform-origin: 0% 0%;
            transform-origin: center center;
            transform-origin: left top;
        }

3 旋轉軸向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>95-2D轉換模塊-旋轉軸向</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 800px;
            height: 500px;
            margin: 0 auto;

        }
        ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid #000;
            /*
            1.什麼是透視
            近大遠小
            2.注意點
            必定要注意, 透視屬性必須添加到須要呈現近大遠小效果的元素的父元素上面
            */
            perspective: 500px;
        }
        ul li img{
            width: 200px;
            height: 200px;
            /*perspective: 500px;*/
        }
        ul li:nth-child(1){
            /*默認狀況下全部元素都是圍繞Z軸進行旋轉*/
            transform: rotateZ(45deg);
        }
        ul li:nth-child(2) img{
            transform: rotateX(45deg);
        }
        ul li:nth-child(3) img{
            /*
            總結:
            想圍繞哪一個軸旋轉, 那麼只須要在rotate後面加上哪一個軸便可
            */
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
<ul>
    <li><img src="images/rotateZ.jpg" alt=""></li>
    <li><img src="images/rotateX.jpg" alt=""></li>
    <li><img src="images/rotateY.jpg" alt=""></li>
</ul>
</body>
</html>

效果：

4 盒子陰影和文字陰影

1.如何給盒子添加陰影
box-shadow: 水平偏移垂直偏移模糊度陰影擴展陰影顏色內外陰影;

2.注意點
2.1盒子的陰影分爲內外陰影, 默認狀況下就是外陰影
2.2快速添加陰影只須要編寫三個參數便可
box-shadow: 水平偏移垂直偏移模糊度;
默認狀況下陰影的顏色和盒子內容的顏色一致

3.如何給文字添加陰影
text-shadow: 水平偏移垂直偏移模糊度陰影顏色 ;

 .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 50px auto;
            text-align: center;
            line-height: 200px;
            /*box-shadow: 10px 10px 10px 10px skyblue;*/
            /*box-shadow: 10px 10px 10px 10px skyblue inset;*/
            box-shadow: 10px 10px 10px;
            color: yellow;
        }
        .box2{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            /*text-shadow: 10px 10px 10px black;*/
            text-shadow: 10px 10px 10px red;
            color: purple;
        }

三動畫模塊

1.過渡和動畫之間的異同
1.1不一樣點
過渡必須人爲的觸發纔會執行動畫
動畫不須要人爲的觸發就能夠執行動畫

1.2相同點
過渡和動畫都是用來給元素添加動畫的
過渡和動畫都是系統新增的一些屬性
過渡和動畫都須要知足三要素纔會有動畫效果

基本使用：

div{
            width: 100px;
            height: 50px;
            background-color: red;
            /*transition-property: margin-left;*/
            /*transition-duration: 3s;*/

            /*1.告訴系統須要執行哪一個動畫*/
            animation-name: lnj;
            /*3.告訴系統動畫持續的時長*/
            animation-duration: 3s;
        }
        /*2.告訴系統咱們須要本身建立一個名稱叫作lnj的動畫*/
        @keyframes lnj {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }

2 動畫其餘屬性

div {
            width: 100px;
            height: 50px;
            background-color: red;
            animation-name: sport;
            animation-duration: 2s;
            /*告訴系統多少秒以後開始執行動畫*/
            /*animation-delay: 2s;*/
            /*告訴系統動畫執行的速度*/
            animation-timing-function: linear;
            /*告訴系統動畫須要執行幾回*/
            animation-iteration-count: 3;
            /*告訴系統是否須要執行往返動畫
            取值:
            normal, 默認的取值, 執行完一次以後回到起點繼續執行下一次
            alternate, 往返動畫, 執行完一次以後往回執行下一次
            */
            animation-direction: alternate;
        }
        @keyframes sport {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }
        div:hover{
            /*
            告訴系統當前動畫是否須要暫停
            取值:
            running: 執行動畫
            paused: 暫停動畫
            */
            animation-play-state: paused;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>102-動畫模塊-其它屬性下</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 100px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
            animation-name: sport;
            animation-duration: 5s;
        }
        @keyframes sport {
            0%{
                left: 0;
                top: 0;
            }
            25%{
                left: 300px;
                top: 0;
            }
            70%{
                left: 300px;
                top: 300px;
            }
            95%{
                left: 0;
                top: 300px;
            }
            100%{
                left: 0;
                top: 0;
            }
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 100px auto;
            animation-name: myRotate;
            animation-duration: 5s;
            animation-delay: 2s;
            /*
            經過咱們的觀察, 動畫是有必定的狀態的
            1.等待狀態
            2.執行狀態
            3.結束狀態
            */
            /*
            animation-fill-mode做用:
            指定動畫等待狀態和結束狀態的樣式
            取值:
            none: 不作任何改變
            forwards: 讓元素結束狀態保持動畫最後一幀的樣式
            backwards: 讓元素等待狀態的時候顯示動畫第一幀的樣式
            both: 讓元素等待狀態顯示動畫第一幀的樣式, 讓元素結束狀態保持動畫最後一幀的樣式
            */
            /*animation-fill-mode: backwards;*/
            /*animation-fill-mode: forwards;*/
            animation-fill-mode: both;
        }
        @keyframes myRotate {
            0%{
                transform: rotate(10deg);
            }
            50%{
                transform: rotate(50deg);
            }
            100%{
                transform: rotate(70deg);
            }
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

3 動畫連寫

1.動畫模塊連寫格式
animation:動畫名稱動畫時長動畫運動速度延遲時間執行次數往返動畫;

2.動畫模塊連寫格式的簡寫
animation:動畫名稱動畫時長;

4 背景尺寸

1.什麼是背景尺寸屬性
背景尺寸屬性是CSS3中新增的一個屬性, 專門用於設置背景圖片大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>112-背景尺寸屬性</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }
        ul li{
            list-style: none;
            float: left;
            width: 200px;
            height: 200px;
            margin: 10px 10px;
            border: 1px solid #000;
            text-align: center;
            line-height: 200px;
        }
        ul li:nth-child(1){
            background: url("images/dog.jpg") no-repeat;
        }
        ul li:nth-child(2){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一個參數:寬度
            第二個參數:高度
            */
            background-size:200px 100px;
        }
        ul li:nth-child(3){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一個參數:寬度
            第二個參數:高度
            */
            background-size:100% 80%;
        }
        ul li:nth-child(4){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一個參數:寬度
            第二個參數:高度
            */
            background-size:auto 100px;
        }
        ul li:nth-child(5){
            background: url("images/dog.jpg") no-repeat;
            /*
            第一個參數:寬度
            第二個參數:高度
            */
            background-size:100px auto;
        }
        ul li:nth-child(6){
            background: url("images/dog.jpg") no-repeat;
            /*
            cover含義:
            1.告訴系統圖片須要等比拉伸
            2.告訴系統圖片須要拉伸到寬度和高度都填滿元素
            */
            background-size:cover;
        }
        ul li:nth-child(7){
            background: url("images/dog.jpg") no-repeat;
            /*
            contain含義:
            1.告訴系統圖片須要等比拉伸
            2.告訴系統圖片須要拉伸到寬度或高度都填滿元素
            */
            background-size:contain;
        }
    </style>
</head>
<body>
<!--
1.什麼是背景尺寸屬性
背景尺寸屬性是CSS3中新增的一個屬性, 專門用於設置背景圖片大小
-->
<ul>
    <li>默認</li>
    <li>具體像素</li>
    <li>百分比</li>
    <li>寬度等比拉伸</li>
    <li>高度等比拉伸</li>
    <li>cover</li>
    <li>contain</li>
</ul>
</body>
</html>

效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。