【原】網(wǎng)頁(yè)|CSS的動(dòng)畫實(shí)現(xiàn)

算法與編程之美 2020-08-08

展開(kāi)全文

問(wèn)題描述

一些CSS屬性是可以實(shí)現(xiàn)動(dòng)畫效果,，即我們可以用CSS實(shí)現(xiàn)動(dòng)畫和過(guò)渡。而動(dòng)畫屬性的實(shí)現(xiàn)其實(shí)就是,，屬性逐漸地從一個(gè)值變化到另一個(gè)值,，比如尺寸大小、數(shù)量,、百分比和顏色,，也就是通過(guò)設(shè)置多個(gè)節(jié)點(diǎn)來(lái)精確控制一個(gè)，或一組動(dòng)畫,，常用來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果從而實(shí)現(xiàn)動(dòng)畫,。動(dòng)畫是CSS最具有顛覆性的特征之一，接下來(lái)我們就來(lái)感受一下CSS的動(dòng)畫吧,。

解決方案

1,、方法：

1）定義動(dòng)畫：用keyfames定義動(dòng)畫（類似定義類選擇器）。

@keyframes 動(dòng)畫名稱{

0%{

width:0px;

}

100%{

width:1200px;

}

2）使用（調(diào)用）動(dòng)畫

在此處我們?cè)O(shè)計(jì)一個(gè)盒子,，當(dāng)我們打開(kāi)網(wǎng)頁(yè)時(shí)它可以從左邊跑到右邊,。

<!DOCTYPE html>

<html>

<head>

<style>

/* 1. 定義動(dòng)畫 */

@keyframes moving{

/* 開(kāi)始狀態(tài)（從0px處開(kāi)始滑動(dòng)）*/

0%{

transform: translateX(0px);

}

/* 結(jié)束狀態(tài)（滑動(dòng)到1200px處結(jié)束）*/

100%{

transform: translateX(1200px);

}

.i{

width:200px;

height: 200px;

background-color: pink;

/* 2.調(diào)用動(dòng)畫 */

/* 動(dòng)畫名稱（上方@keyframes 定義的動(dòng)畫名稱）*/

animation-name: moving;

/* 持續(xù)時(shí)間（動(dòng)畫持續(xù)6秒）*/

animation-duration: 6s;

}

</style>

</head>

<body>

/*調(diào)用div樣式*/

</body>

</html>

實(shí)現(xiàn)的效果：

3)講解:

0%是動(dòng)畫的開(kāi)始，100%是動(dòng)畫的完成,。這樣的規(guī)則就是動(dòng)畫序列,。

在@keyframes中規(guī)定某項(xiàng)CSS樣式，就能創(chuàng)建由當(dāng)前改為新樣式的動(dòng)畫效果,。

動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果,。您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。

我們除了用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間,，還可用關(guān)鍵詞“from”和“to”，等同于0%和100%來(lái)實(shí)現(xiàn),。

2,、常見(jiàn)屬性animation

animation比較類似于flash 中的逐幀動(dòng)畫，逐幀動(dòng)畫就像電影的播放一樣,，表現(xiàn)非常細(xì)膩并且有非常大的靈活性,。然而transition只是指定了開(kāi)始和結(jié)束態(tài),，整個(gè)動(dòng)畫的過(guò)程也是由特定的函數(shù)控制。學(xué)習(xí)過(guò) flash 的同學(xué)知道,，這種逐幀動(dòng)畫是由關(guān)鍵幀組成,，很多個(gè)關(guān)鍵幀連續(xù)的播放就組成了動(dòng)畫，在 CSS3中是由屬性keyframes來(lái)完成逐幀動(dòng)畫的,。

@keyframes:

@keyframes animationName {

from {

properties: value;

}

percentage {

properties: value;

}

to {

properties: value;

}

//or

@keyframes animationName {

0% {

properties: value;

}

percentage {

properties: value;

}

100% {

properties: value;

}

animationName：動(dòng)畫名稱,，開(kāi)發(fā)人員自己命名；

percentage：為百分比值,，可以添加多個(gè)百分比值,；

properties：樣式屬性名稱，例如：color,、left,、width等等。

animation-name：

用來(lái)設(shè)置動(dòng)畫的名稱,，可以同時(shí)賦值多個(gè)動(dòng)畫名稱,，用,隔開(kāi);

animation-name: none | IDENT[,none | IDENT]*;

animation-duration:

用來(lái)設(shè)置動(dòng)畫的持續(xù)時(shí)間，單位為s,，默認(rèn)值為0;

animation-duration: <time>[,<time>]*;

animation-delay:

設(shè)置動(dòng)畫的開(kāi)始時(shí)間,，單位是s或者ms，默認(rèn)值為0;

animation-delay: <time>[,<time>]*;

animation-iteration-count:

置動(dòng)畫循環(huán)的次數(shù),，默認(rèn)為1,infinite為無(wú)限次數(shù)的循環(huán);

animation-iteration-count:infinite | number>[,infinite | <number>]*;

animation-direction:

置動(dòng)畫播放的方向,，默認(rèn)值為normal表示向前播放，alternate代表動(dòng)畫播放在第偶數(shù)次向前播放,，第奇數(shù)次向反方向播放;

animation-direction: normal | alternate [, normal | alternate]*;

animation-play-state:

控制動(dòng)畫的播放狀態(tài)：running代表播放,，而paused代表停止播放，running為默認(rèn)值：

animation-play-state:running | paused[,running | paused]*;

animation:

它是animation-name,、animation-duration,、animation-timing-function、animation-delay,、animation-iteration-count,、animation-direction的簡(jiǎn)寫：

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;

3、常見(jiàn)屬性transform

transform可以用來(lái)設(shè)置元素的形狀改變,，主要有以下幾種變形：rotate（旋轉(zhuǎn)）,、scale（縮放）、skew（扭曲）,、translate（移動(dòng)）和matrix（矩陣變形）,；

transform ：none | <transform-function> [ <transform-function> ]*

none表示不做變換；<transform-function>表示一個(gè)或多個(gè)變化函數(shù),，變化函數(shù)由函數(shù)名和參數(shù)組成,，參數(shù)包含在()里面,，用空格分開(kāi)；

transform ：rotate(30deg) scale(2,3);

transform-origin 基點(diǎn)：

所有的變形都是基于基點(diǎn),，基點(diǎn)默認(rèn)為元素的中心點(diǎn),。用法：transform-origin:(x, y)，其中 x 和 y 的值可以是百分比,、rem 或者是 px 等等,，也可以用表示位置的單詞來(lái)表示例如：x 可以用left、center,、right,；y 可以用top、center,、bottom,。

transform-origin: (left, bottom);

rotate 旋轉(zhuǎn)：

用法：rotate(<angle>)；表示通過(guò)指定的角度對(duì)元素進(jìn)行旋轉(zhuǎn)變形,，如果是正數(shù)則順時(shí)針旋轉(zhuǎn),，如果是負(fù)數(shù)則逆時(shí)針旋轉(zhuǎn)；

.transform-rotate {

transform: rotate(30deg);

}

scale 縮放:

它有三種用法：scale(<number>[,<number>]),、scaleX(<number>)和scaleY(<number>),；分別代表水平和垂直方向同時(shí)縮放、水平方向的縮放以及垂直方向的縮放,，入?yún)⒋硭交蛘叽怪狈较虻目s放比例,。縮放比例如果大于1則放大,，反之則縮小,，如果等于1代表原始大小。

.transform-scale {

transform: scale(2,1.5);

}

.transform-scaleX {

transform: scaleX(2);

}

.transform-scaleY {

transform: scaleY(1.5);

}

translate 移動(dòng):

移動(dòng)也分三種情況：translate(<translation-value>[,<translation-value>]),、translateX(<translation-value>)和translateY(<translation-value>),；分別代表水平和垂直的移動(dòng)、水平方向的移動(dòng)以及垂直方向同時(shí)移動(dòng),，移動(dòng)單位是 CSS 中的長(zhǎng)度單位：px,、rem等;

.transform-translate {

transform: translate(400px, 20px);

}

.transform-translateX {

transform: translateX(300px);

}

.transform-translateY {

transform: translateY(20px);

}

skew 扭曲:

扭曲同樣也有三種情況，skew(<angle>[,<angle>]),、skewX(<angle>)和skewY(<angle>),；同樣也是水平和垂直方向同時(shí)扭曲、水平方向的扭曲以及垂直方向的扭曲,，單位為角度,。

.transform-skew {

transform: skew(30deg, 10deg);

}

.transform-skewX {

transform: skewX(30deg);

}

.transform-skewY {

transform: skewY(10deg);

}

4、常見(jiàn)屬性transition

transition是用來(lái)設(shè)置樣式的屬性值是如何從從一種狀態(tài)變平滑過(guò)渡到另外一種狀態(tài)，它有四個(gè)屬性：

transition-property（變換的屬性,，即那種形式的變換：大小、位置,、扭曲等）,；

transition-duration（變換延續(xù)的時(shí)間）；

transition-timing-function（變換的速率）

transition-delay（變換的延時(shí)）

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*;

transition-property:

它是用來(lái)設(shè)置哪些屬性的改變會(huì)有這種平滑過(guò)渡的效果,，主要有以下值:

none,；all；元素屬性名：color,；length,；visibility；

transition-property ：none | all | [ <IDENT> ] [ ',' <IDENT> ]*;

}

transition-duration:

設(shè)置轉(zhuǎn)換過(guò)程的持續(xù)時(shí)間,，單位是s或者ms,，默認(rèn)值為0；

transition-duration ：<time> [, <time>]* ;

transition-timing-function:

它是來(lái)設(shè)置過(guò)渡效果的速率,，它有6種形式的速率：

ease：逐漸變慢（默認(rèn)）,，等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)；

linear：勻速,，等同于貝塞爾曲線(0.0,0.0, 1.0, 1.0),；

ease-in：加速，等同于貝塞爾曲線(0.42,0, 1.0, 1.0),；

ease-out：減速,，等同于貝塞爾曲線(0, 0, 0.58, 1.0)；

ease-in-out：先加速后減速,，等同于貝塞爾曲線(0.42, 0, 0.58, 1.0),；

cubic-bezier：自定義貝塞爾曲線。

貝塞爾曲線:

transition-delay:

設(shè)置過(guò)渡動(dòng)畫開(kāi)始執(zhí)行的時(shí)間,，單位是s或者ms,，默認(rèn)值為0；

transition-delay ：<time> [, <time>]*;

transition

它是transition-property,、transition-duration,、transition-timing-function、transition-delay的簡(jiǎn)寫：

transition ：<property> <duration> <timing function> <delay>;

}

animation:

animation比較類似于flash 中的逐幀動(dòng)畫,，逐幀動(dòng)畫就像電影的播放一樣,，表現(xiàn)非常細(xì)膩并且有非常大的靈活性。然而transition只是指定了開(kāi)始和結(jié)束態(tài),，整個(gè)動(dòng)畫的過(guò)程也是由特定的函數(shù)控制,。學(xué)習(xí)過(guò) flash 的同學(xué)知道，這種逐幀動(dòng)畫是由關(guān)鍵幀組成，很多個(gè)關(guān)鍵幀連續(xù)的播放就組成了動(dòng)畫,，在 CSS3 中是由屬性keyframes來(lái)完成逐幀動(dòng)畫的;

示例1：

代碼：

<!DOCTYPE html>

<html>

<head>

<style>

#mymoving {

width:300px;

height:200px;

background:red;

animation:mymove 20s infinite;

/*Safari 和 Chrome:*/

-webkit-animation:mymove 5s infinite;

}

@keyframes mymove{

from {background-color:red;}

to {background-color:blue;}

}

/*Safari 和 Chrome:*/

@-webkit-keyframes mymove{

from {background-color:red;}

to {background-color:blue;}

}

</style>

</head>

<body>

</body>

</html>

效果：

背景顏色逐漸地從紅色變化到藍(lán)色,。

示例2

<!DOCTYPE html>

<html>

<head>

<style>

div{

width:100px;

height:100px;

background:paleturquoise;

position:relative;

animation:myfirst 5s;

}

@keyframes myfirst{

0% {background:pink; left:0px; top:0px;}

25% {background:lightpink; left:200px; top:0px;}

50% {background:hotpink; left:200px; top:200px;}

75% {background:deeppink; left:0px; top:200px;}

100% {background:lightcoral; left:0px; top:0px;}

}

</style>

</head>

<body>

</body>

</html>

效果：

示例3

代碼：

<!DOCTYPE html>

<html>

<head>

body {

background-color:black;

}

.circle1 {

width:100px;

height:100px;

border-radius:100px;

position:absolute;

z-index:2;

left:140px;

-webkit-animation:myfirst1 5s linear infinite;

}

@-webkit-keyframes myfirst1 {

0% {

transform:rotate(0deg);

box-shadow:0px 0px 10px #fff;

}

50% {

transform:rotate(180deg);

box-shadow:0px 0px 45px #fff;

}

100% {

transform:rotate(360deg);

box-shadow:0px 0px 10px #fff;

}

.circle2 {

width:10px;

height:10px;

border:4px solid #ddd;

border-radius:20px;

left:45px;

top:5px;

position:absolute;

z-index:2;

overflow:hidden;

background-color:#ddd;

box-shadow:0px 0px 5px #fff;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

效果：

參考文獻(xiàn)

[1]《CSS3 動(dòng)畫》一修

https://www.jianshu.com/p/15f2adfbdad0

[2]《CSS3 動(dòng)畫》菜鳥教程

https://www.runoob.com/css3/css3-animations.html

[3]《CSS3 動(dòng)畫》w3cschool

https://www./cssref/css-animatable.html

END

實(shí)習(xí)編輯 | 王楠嵐

責(zé) 編 | 楊金月

where2go 團(tuán)隊(duì)

微信號(hào)：算法與編程之美

贊賞

共11人贊賞

久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

【原】網(wǎng)頁(yè)|CSS的動(dòng)畫實(shí)現(xiàn)