CSS動(dòng)畫優(yōu)缺點(diǎn)是什么？

缺點(diǎn)：

創(chuàng)新互聯(lián)專注于煙臺(tái)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供煙臺(tái)營(yíng)銷型網(wǎng)站建設(shè)，煙臺(tái)網(wǎng)站制作、煙臺(tái)網(wǎng)頁(yè)設(shè)計(jì)、煙臺(tái)網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造煙臺(tái)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供煙臺(tái)網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

1、不能動(dòng)態(tài)的修改或定義動(dòng)畫內(nèi)容

2、不同的動(dòng)畫無(wú)法實(shí)現(xiàn)同步

3、多個(gè)動(dòng)畫彼此無(wú)法堆疊

5、CSS樣式之動(dòng)畫效果

陰影: 通過(guò)合理添加陰影可以使平面網(wǎng)頁(yè)內(nèi)容顯示出立體的效果

1、 box-shadow：盒子陰影

(1) 陰影在x軸方向的偏移, 正右負(fù)左

(2) 陰影在y軸方向的偏移, 正下負(fù)上

(3) 陰影的模糊度, 數(shù)值越大, 陰影越模糊

(4) 陰影的范圍, 數(shù)值越大, 陰影越大

(5) 陰影顏色

(6) 陰影位置, 默認(rèn)outset盒子外陰影, inset盒子內(nèi)陰影

2、 text-shadow：文字陰影

(1) 陰影x軸偏移

(2) 陰影y軸偏移

(3) 陰影模糊度

(4) 陰影顏色

文字陰影不能像盒子陰影一樣疊加陰影。

可以通過(guò)漸變?yōu)闃?biāo)簽設(shè)置一定梯度變化的背景色

漸變色只能給標(biāo)簽的background-image樣式賦值。

1、線性漸變： -webkit-linear-gradient

1) 線性的角度或方向, 默認(rèn)從上到下漸變

(1) left / right / top / bottom 設(shè)置漸變的開始方向

(2) 角度的設(shè)置, 單位deg, 0deg在3點(diǎn)鐘方向, 正角度逆時(shí)針旋轉(zhuǎn), 負(fù)角度順時(shí)針旋轉(zhuǎn)。

2) 漸變的顏色和階段, 如果不設(shè)置階段, 各個(gè)自動(dòng)平分

2、徑向漸變, 以圓心向四周沿著半徑方向漸變：-webkit-radial-gradient

(1) 設(shè)置圓的類型, 默認(rèn)橢圓, 可以設(shè)置circle

(2) 設(shè)置顏色及階段

倒影：通過(guò)-webkit-box-reflect 來(lái)為標(biāo)簽設(shè)置倒影

(1) 設(shè)置倒影方向

above: 倒影出現(xiàn)在標(biāo)簽的上方

below: 倒影出現(xiàn)在標(biāo)簽的下方

left: 倒影出現(xiàn)在標(biāo)簽的左方

right: 倒影出現(xiàn)在標(biāo)簽的右方

(2) 設(shè)置倒影距離

(3) 設(shè)置蒙版圖片, 可以設(shè)置漸變

倒影目前只在 Chrome 和 Safari 瀏覽器生效

過(guò)渡動(dòng)畫效果: 將標(biāo)簽的樣式變化以連續(xù)平滑的方式顯示, 類似于動(dòng)畫。

1）transition-property: 設(shè)置過(guò)渡需要表現(xiàn)表現(xiàn)的樣式屬性,通常使用 all 來(lái)設(shè)置所有樣式變化都用過(guò)渡顯示。

2）transition-duration: 設(shè)置過(guò)渡的持續(xù)時(shí)間。

3）transition-delay: 設(shè)置過(guò)渡效果的延遲時(shí)間。

4）transition-timing-function: 設(shè)置過(guò)渡的速度曲線。

過(guò)渡效果，可以簡(jiǎn)寫，用空格可空開過(guò)渡樣式的各個(gè)值，不分先后，當(dāng)存在兩個(gè)時(shí)間時(shí)，第一個(gè)為過(guò)渡持續(xù)時(shí)間，第二個(gè)為過(guò)渡延遲時(shí)間。

可以設(shè)置的值:

（1）ease: 先快后慢

（2）ease-in: 加速

（3）ease-out: 減速

（4）ease-in-out: 先加速后減速

（5）linear: 勻速

1、2d變換：

通過(guò) transform 來(lái)為標(biāo)簽設(shè)置變換

1） 平移變換 translate

translateX():設(shè)置標(biāo)簽沿著x軸移動(dòng)的距離

translateY():設(shè)置標(biāo)簽沿著y軸移動(dòng)的距離

translate():設(shè)置標(biāo)簽沿著xy軸的移動(dòng)距離，第一個(gè)值表示x軸平移，第二個(gè)值表示y軸平移

x軸水平向右為正方向，y軸向下為正方向

平移會(huì)保留標(biāo)簽原本位置，相對(duì)自身原本位置平移

2） 旋轉(zhuǎn)變換 rotate

默認(rèn)旋轉(zhuǎn)點(diǎn)在標(biāo)簽的正中心，正角度使標(biāo)簽沿著順時(shí)針旋轉(zhuǎn)，負(fù)角度使標(biāo)簽沿著逆時(shí)針旋轉(zhuǎn)。

0deg方向是12點(diǎn)方向。

旋轉(zhuǎn)點(diǎn)又是標(biāo)簽變換的坐標(biāo)系原點(diǎn)

3）縮放變換 scale

scaleX()、scaleY()、scale()

縮放變換，放大縮小的是標(biāo)簽坐標(biāo)系的比例，例如，放大2倍，坐標(biāo)系中1px就變成了2px；注意，一旦坐標(biāo)系比例發(fā)生變化，會(huì)影響其他變換，例如：平移變換100px在2倍坐標(biāo)系下，就會(huì)平移200px。

transform-origin 設(shè)置標(biāo)簽變換參照點(diǎn)位置:

（1）left/right/top/bottom/center來(lái)設(shè)置特殊位置

（2）通過(guò)具體像素精確設(shè)置位置

第一個(gè)值表示x軸方向?qū)⒄拯c(diǎn)位置的設(shè)置

第二個(gè)值表示y軸方向?qū)⒄拯c(diǎn)位置的設(shè)置

允許變換參照點(diǎn)設(shè)置在標(biāo)簽之外

注意，一旦為標(biāo)簽更改變換參照點(diǎn)，那么變換參照點(diǎn)的基準(zhǔn)就變成了標(biāo)簽左上角為原點(diǎn)。

2d的變換總結(jié)：

（1）默認(rèn)變換參照點(diǎn)在標(biāo)簽的正中心，x軸為穿過(guò)參照點(diǎn)水平軸，向右為正，y軸是穿過(guò)參照點(diǎn)豎直軸，向下為正。

（2）平移、旋轉(zhuǎn)、縮放都會(huì)改變標(biāo)簽坐標(biāo)系的狀態(tài)。

（3）變換都是參照標(biāo)簽初始位置進(jìn)行變換。

2、3D變換

設(shè)置3d變換 ：

設(shè)置視距：

（1）和2d變換相似，只是在2d變換平面的基礎(chǔ)上，多出了一條，垂直于標(biāo)簽平面并默認(rèn)向外為正的z軸。

（2）3d變換需要為變換標(biāo)簽的父標(biāo)簽設(shè)置變換類型為3d，相當(dāng)于在該標(biāo)簽下生成了一塊3d空間。

（3）3d變換下，只有平移和旋轉(zhuǎn)變換，沒(méi)有縮放。

（4）3d變換中, 可以通過(guò)改變標(biāo)簽變換參照點(diǎn)位置來(lái)改變XYZ軸的位置

1、 animation動(dòng)畫，配合@keyframes來(lái)為標(biāo)簽設(shè)置關(guān)鍵幀動(dòng)畫

animation屬性值：

1）animation-name：動(dòng)畫名稱，用于為動(dòng)畫綁定關(guān)鍵幀

@keyframes后面的名稱

2）animation-duration：動(dòng)畫播放時(shí)間

s為單位，時(shí)間為0無(wú)動(dòng)畫過(guò)程

3）animation-delay：動(dòng)畫延遲時(shí)間

s為單位，時(shí)間為0無(wú)延遲

4）animation-timing-function：動(dòng)畫緩動(dòng)效果

可以設(shè)置的值：

（1）ease

（2）ease-in

（3）ease-out

（4）ease-in-out

（5）linear

5）animation-direction：設(shè)置動(dòng)畫方向

alternate，當(dāng)播放次數(shù)大于一，返向播放

6）animation-iteration-count：設(shè)置動(dòng)畫播放次數(shù)

infinite，無(wú)限播放

7）animation-fill-mode：設(shè)置動(dòng)畫結(jié)束位置

默認(rèn) backwards，回到初始位置

forwards，停在結(jié)束位置

注意： animation同樣存在簡(jiǎn)寫，將樣式值以空格隔開，不區(qū)分先后，兩個(gè)時(shí)間同時(shí)出現(xiàn)，第一個(gè)為播放時(shí)間，第二個(gè)為延遲時(shí)間。

一些css3樣式只在部分瀏覽器生效, 可以通過(guò)添加兼容前綴的形式來(lái)對(duì)部分低版本瀏覽器兼容

例如: transition: all 1s linear;

-webkit-transition: all 1s linear;

-moz-transition: all 1s linear;

-o-transition: all 1s linear;

-ms-transition: all 1s linear;

兼容問(wèn)題：

-webkit- chrome、safari

-moz- firefox

-o- opera

-ms- ie

nimation、transition、transform、gradient等css3樣式都應(yīng)添加前綴進(jìn)行多類型多版本瀏覽器兼容。

小程序如何使用css3動(dòng)畫

1、利用樣式實(shí)現(xiàn)小程序動(dòng)畫(用法和css用法相識(shí))

wxml 文件

image class="aniamtion" src="../../images/page4.jfif" style="width:200rpx;height:200rpx;? position:? relative;"/image

wxss文件

.aniamtion {

animation: mymove 5s infinite;

/* //infinite屬性是表示無(wú)限循環(huán)的意思，沒(méi)有這個(gè)屬性的話動(dòng)畫只執(zhí)行一次。 */

}

@keyframes mymove {

from {

/* left: 0px; */

/* transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx); */

transform: rotate3d(100,200,300,0deg);

}

to {

/* left: 200px; */

/* transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx); */

transform: rotate3d(200,300,400,360deg);

}

}

2、 用小程序的API來(lái)實(shí)現(xiàn)動(dòng)畫

用wx.createAnimation(object) 來(lái)創(chuàng)建一個(gè)動(dòng)畫 --返回一個(gè)animation對(duì)象

創(chuàng)建一個(gè)動(dòng)畫實(shí)例 animation。

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

調(diào)用實(shí)例的方法來(lái)描述動(dòng)畫。

Animation.step() 表示一組動(dòng)畫的完成，可以在一組動(dòng)畫中調(diào)用任意多個(gè)動(dòng)畫方法，一組動(dòng)畫中的所有動(dòng)畫會(huì)同時(shí)開始，一組動(dòng)畫完成后才會(huì)進(jìn)行下一組動(dòng)畫

rotate(){

this.animation.rotate(150).step() //對(duì)動(dòng)畫進(jìn)行簡(jiǎn)單的描述

this.setData({

? ? ?animation:this.animation.export()

})

},

最后通過(guò)動(dòng)畫實(shí)例的 export 方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的 animation 屬性。

this.animation.export() 導(dǎo)出動(dòng)畫隊(duì)列。export 方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫操作

rotate(){

this.animation.rotate(150).step() //對(duì)動(dòng)畫進(jìn)行簡(jiǎn)單的描述

this.setData({ // 在setData({}) 導(dǎo)出動(dòng)畫數(shù)據(jù)數(shù)據(jù)給組件

? ? ?animation:this.animation.export()

})

},

完整的wxml

view class="container"

view animation="{{animation}}" class="view"

將做動(dòng)畫的塊

/view

/view

button type="default" size="mini" bindtap="rotate"

旋轉(zhuǎn)

/button

完整的wxjs

Page({

data: {

animation:''

},

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

rotate(){

this.animation.rotate(150).step().translate(100).step()

this.setData({

animation:this.animation.export()

})

}

})

3、用選擇器來(lái)綁定組件來(lái)來(lái)實(shí)現(xiàn)組件的動(dòng)畫（小程序2.9.0 的庫(kù)可用，版本不夠會(huì)報(bào)this.animate不是一個(gè)方法）

textpages/index7/index7.wxml/text

view id="container" style="height: 100px; width: 100px; background-color: blue;"

container

/view

view class="block" style="height: 100px; width: 100px;background-color: #ccc;"

block

/view

用選擇器選擇相應(yīng)的組件進(jìn)行相應(yīng)的動(dòng)畫

進(jìn)行關(guān)鍵幀的處理

onLoad: function () {

this.animate('#container', [

{ opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },

{ opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },

{ opacity: 1.0, rotate: 90, backgroundColor: '#FF0000' },

], 5000)

this.animate('.block', [

{ scale: [1, 1], rotate: 0, ease: 'ease-out' },

{ scale: [1.5, 1.5], rotate: 45, ease: 'ease-in'},

{ scale: [2, 2], rotate: 90 },

], 5000)

},

}

4、用第三方的庫(kù) animation.css

需要做的有

從下載css動(dòng)畫文件

把 .css 文件 改名成 .wxss文件（可進(jìn)行相應(yīng)的需改，畢竟小程序的大小限制擺在那里）

把它引入到你的app.wxss文件中

@import “動(dòng)畫文件的相對(duì)目錄”

在用的時(shí)候把他和你的樣式綁定

view class="swing" style="height: 100px; width: 100px;background-color: #ccc;"

block

/view

// 給類名為swing 的文件綁定swing 的動(dòng)畫

.swing{

animation: swing 5s infinite;

}

用Css3 實(shí)現(xiàn)React 動(dòng)畫的三種方法

中級(jí)：

Css3中的幀動(dòng)畫

這次用react-transition-group做一個(gè)togglebutton控制div顯示和隱藏的例子，首先我們需要安裝react-transition-group，輸入

組件中引入CSSTransition模塊：

一旦動(dòng)畫入場(chǎng)，插件將會(huì)自動(dòng)的在包裹住的標(biāo)簽上添加很多css樣式，默認(rèn)class名是boss-text，所以我們需要給CSSTransition標(biāo)簽加上classNames='boss-text'，然后去css文件進(jìn)行配置：

如果頁(yè)面上一組dom都需要添加動(dòng)畫效果時(shí)我們需要在最外面再加一個(gè)TransitionGroup

css3的樣式中的動(dòng)漫樣式怎么弄的呀？

創(chuàng)建動(dòng)畫：@keyframes規(guī)則。

方式一：from{屬性：值;} ?to{屬性：值;}

2

創(chuàng)建動(dòng)畫

方式二：0%{屬性：值;} 100%{屬性：值;}

0% 是動(dòng)畫的開始，100% 是動(dòng)畫的完成。可以在二者之間加入25%，50%等。

3

將動(dòng)畫綁定到選擇器：

在樣式中，設(shè)置動(dòng)畫屬性animation，自定義動(dòng)畫名稱和時(shí)長(zhǎng)。

animation：動(dòng)畫名 ?時(shí)長(zhǎng)；

此時(shí)就可以完成一個(gè)簡(jiǎn)單的動(dòng)畫了，要進(jìn)行更多設(shè)置還需要其他屬性。

4

規(guī)定動(dòng)畫開始時(shí)的等待時(shí)間：

animation-delay：時(shí)間；可以為秒、毫秒2s，2ms。

5

播放次數(shù)：

animation-iteration-count：次數(shù)；

永久播放的值取infinite。

6

動(dòng)畫速度曲線：

animation-timing-function：變化類型；

變化類型有：linear 勻速；ease-in 開始慢；ease-out 結(jié)束慢；ease?動(dòng)畫有一個(gè)緩慢的開始，然后快，結(jié)束慢。

網(wǎng)頁(yè)標(biāo)題：CSS樣式動(dòng)畫生成器,如何在css中實(shí)現(xiàn)動(dòng)畫
網(wǎng)站地址：http://chinadenli.net/article36/phgisg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化、做網(wǎng)站、標(biāo)簽優(yōu)化、網(wǎng)站策劃、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)