CSS動畫

時間 2019-11-30

標籤 css 動畫欄目 CSS 简体版

原文原文鏈接

　　哈哈, 又到了分享知識的時間了, 也算是對本身所學知識的一個總結吧, 在這裏寫下的都是本身通過一點點的努力所積累下來的, 寫的很差的地方還望你們多多包涵了, 加油!css

　　這些天我學習了下css雖然學的並非不少, 可是感受仍是挺有意思的, 一些東西以前都沒有見過, 不過話又說回來了, 這門語言對於我來講也是一種新知識啦, 還有很長的時間要努力呢, 我會繼續努力, 一直堅持下去的, 嘿嘿!html

　　一.CSS動畫之過渡web

　　經過使用CSS3, 咱們能夠給咱們特定的元素增長几種特定的效果, 可讓咱們的做品更加的酷炫, 首先那他是有一種樣式轉變爲另外一種樣式的, 他其中包含了幾種屬性, 分別是下面幾種:transition設置四個過渡屬性, transition-property多讀名稱, transition-duration過渡效果花費的時間, transition-timing-function過渡效果的時間曲線, transition-delay過渡效果開始的時間(也就是說延遲開始的時間), 下面給你們附上代碼和效果展現, 敬請期待哦, 哈哈!瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>過渡動畫</title>
    <link rel="stylesheet" type="text/css" href="2d3d轉換.css">
</head>
<body>
    <div>過渡動畫演示</div>
</body>
</html>

下面是css中的代碼:學習

*{
    margin: 0px;
}
div{
    width: 200px;
    height: 200px;
    background-color: red;
    color: white;
    margin: 50px;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    -moz-transition: width 2s, height 2s, transition 2s;
    -ms-transition: width 2s, height 2s, transition 2s;
    -o-transition: width 2s, height 2s, transition 2s;
    transition: width 2s, height 2s, transform 2s;
}
div:hover{
    width: 200px;
    height: 200px;
    background-color: black;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

　　*是通配符, 設置總體的, 能夠囊括全部, 動畫

-webkit-transition: width 2s,height 2s, -webkit-transform 2s;是谷歌和Safari瀏覽器的
-moz-transition: width 2s, height 2s, transition 2s; 這個是ie支持的
-ms-transition: width 2s, height 2s, transition 2s;這個是火狐支持
-o-transition: width 2s, height 2s, transition 2s;這個是opear支持的
width 2s表明的是寬度變化持續兩秒, 後面的一次類推. 這就是一個簡單的過渡動畫
同時還有一個屬性我沒有設置, 那就是transition-delay這個很簡單能夠直接設置, 不熟悉的友友們能夠好好看看哈, 嘿嘿.
　　效果圖以下:


　　 以上就是個簡單的css過渡動畫了.
二.css動畫
        經過css也能夠建立動畫, 可是須要遵循@keyframes規則:
　　規定動畫的時長和動畫的名稱.下面就爲你們帶來神奇的動畫代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>過渡動畫</title>
    <link rel="stylesheet" type="text/css" href="2d3d轉換.css">
</head>
<body>
    <div>動畫的建立</div>
</body>
</html>

　　css中的文件代碼以下:spa

div{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: anim 5s;
    -webkit-animation:anim 5s;
}
@keyframes anim {
    0%{
        background-color: red;left: 0px;top: 0px;
    }
    25%{
        background-color: blue;left: 200px;top: 0px;
    }
    50%{
        background-color: purple;left: 200px;top: 200px;
    }
    75%{
        background-color: pink;left: 0px;top: 200px;
    }
    100%{
        background-color: red;left: 0px;top: 0px;
    }
}
@-webkit-keyframes anim  {
    0%{
        background-color: red;left: 0px;top: 0px;
    }
    25%{
        background-color: blue;left: 200px;top: 0px;
    }
    50%{
        background-color: purple;left: 200px;top: 200px;
    }
    75%{
        background-color: pink;left: 0;top: 200px;
    }
    100%{
        background-color: red;left: 0px;top: 0px;
    }
}

　　@-webkit-keyframes anim 這個值得是瀏覽器支持, 因此若是要全部的都支持的話, 還要引入不少相似的東西. 效果圖以下:3d

　　固然啦也能夠設置無線循環的動畫, 在這裏就不提了, 留給你們一點小小的疑問吧, 對不知道的友友來講, 也是一種探索啦, 嘿嘿好啦今天就寫到這裏啦, 拜拜各位, 明天見! 一塊兒努力哈, 加油加油!code

相關標籤/搜索

每日一句

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