CSS樣式動畫生成器,如何在css中實(shí)現(xiàn)動畫
CSS動畫優(yōu)缺點(diǎn)是什么？
缺點(diǎn)：
創(chuàng)新互聯(lián)專注于煙臺網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供煙臺營銷型網(wǎng)站建設(shè)，煙臺網(wǎng)站制作、煙臺網(wǎng)頁設(shè)計(jì)、煙臺網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造煙臺網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供煙臺網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
1、不能動態(tài)的修改或定義動畫內(nèi)容
2、不同的動畫無法實(shí)現(xiàn)同步
3、多個動畫彼此無法堆疊
5、CSS樣式之動畫效果
陰影: 通過合理添加陰影可以使平面網(wǎng)頁內(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) 陰影顏色
文字陰影不能像盒子陰影一樣疊加陰影。
可以通過漸變?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)鐘方向, 正角度逆時針旋轉(zhuǎn), 負(fù)角度順時針旋轉(zhuǎn)。
2) 漸變的顏色和階段, 如果不設(shè)置階段, 各個自動平分
2、徑向漸變, 以圓心向四周沿著半徑方向漸變：-webkit-radial-gradient
(1) 設(shè)置圓的類型, 默認(rèn)橢圓, 可以設(shè)置circle
(2) 設(shè)置顏色及階段
倒影：通過-webkit-box-reflect 來為標(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 瀏覽器生效
過渡動畫效果: 將標(biāo)簽的樣式變化以連續(xù)平滑的方式顯示, 類似于動畫。
1）transition-property: 設(shè)置過渡需要表現(xiàn)表現(xiàn)的樣式屬性,通常使用 all 來設(shè)置所有樣式變化都用過渡顯示。
2）transition-duration: 設(shè)置過渡的持續(xù)時間。
3）transition-delay: 設(shè)置過渡效果的延遲時間。
4）transition-timing-function: 設(shè)置過渡的速度曲線。
過渡效果，可以簡寫，用空格可空開過渡樣式的各個值，不分先后，當(dāng)存在兩個時間時，第一個為過渡持續(xù)時間，第二個為過渡延遲時間。
可以設(shè)置的值:
（1）ease: 先快后慢
（2）ease-in: 加速
（3）ease-out: 減速
（4）ease-in-out: 先加速后減速
（5）linear: 勻速
1、2d變換：
通過 transform 來為標(biāo)簽設(shè)置變換
1） 平移變換 translate
translateX():設(shè)置標(biāo)簽沿著x軸移動的距離
translateY():設(shè)置標(biāo)簽沿著y軸移動的距離
translate():設(shè)置標(biāo)簽沿著xy軸的移動距離，第一個值表示x軸平移，第二個值表示y軸平移
x軸水平向右為正方向，y軸向下為正方向
平移會保留標(biāo)簽原本位置，相對自身原本位置平移
2） 旋轉(zhuǎn)變換 rotate
默認(rèn)旋轉(zhuǎn)點(diǎn)在標(biāo)簽的正中心，正角度使標(biāo)簽沿著順時針旋轉(zhuǎn)，負(fù)角度使標(biāo)簽沿著逆時針旋轉(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ā)生變化，會影響其他變換，例如：平移變換100px在2倍坐標(biāo)系下，就會平移200px。
transform-origin 設(shè)置標(biāo)簽變換參照點(diǎn)位置:
（1）left/right/top/bottom/center來設(shè)置特殊位置
（2）通過具體像素精確設(shè)置位置
第一個值表示x軸方向?qū)⒄拯c(diǎn)位置的設(shè)置
第二個值表示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軸為穿過參照點(diǎn)水平軸，向右為正，y軸是穿過參照點(diǎn)豎直軸，向下為正。
（2）平移、旋轉(zhuǎn)、縮放都會改變標(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)變換，沒有縮放。
（4）3d變換中, 可以通過改變標(biāo)簽變換參照點(diǎn)位置來改變XYZ軸的位置
1、 animation動畫，配合@keyframes來為標(biāo)簽設(shè)置關(guān)鍵幀動畫
animation屬性值：
1）animation-name：動畫名稱，用于為動畫綁定關(guān)鍵幀
@keyframes后面的名稱
2）animation-duration：動畫播放時間
s為單位，時間為0無動畫過程
3）animation-delay：動畫延遲時間
s為單位，時間為0無延遲
4）animation-timing-function：動畫緩動效果
可以設(shè)置的值：
（1）ease
（2）ease-in
（3）ease-out
（4）ease-in-out
（5）linear
5）animation-direction：設(shè)置動畫方向
alternate，當(dāng)播放次數(shù)大于一，返向播放
6）animation-iteration-count：設(shè)置動畫播放次數(shù)
infinite，無限播放
7）animation-fill-mode：設(shè)置動畫結(jié)束位置
默認(rèn) backwards，回到初始位置
forwards，停在結(jié)束位置
注意： animation同樣存在簡寫，將樣式值以空格隔開，不區(qū)分先后，兩個時間同時出現(xiàn)，第一個為播放時間，第二個為延遲時間。
一些css3樣式只在部分瀏覽器生效, 可以通過添加兼容前綴的形式來對部分低版本瀏覽器兼容
例如: transition: all 1s linear;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-ms-transition: all 1s linear;
兼容問題：
-webkit- chrome、safari
-moz- firefox
-o- opera
-ms- ie
nimation、transition、transform、gradient等css3樣式都應(yīng)添加前綴進(jìn)行多類型多版本瀏覽器兼容。
小程序如何使用css3動畫
1、利用樣式實(shí)現(xiàn)小程序動畫(用法和css用法相識)
wxml 文件
image class="aniamtion" src="../../images/page4.jfif" style="width:200rpx;height:200rpx;? position:? relative;"/image
wxss文件
.aniamtion {
animation: mymove 5s infinite;
/* //infinite屬性是表示無限循環(huán)的意思，沒有這個屬性的話動畫只執(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來實(shí)現(xiàn)動畫
用wx.createAnimation(object) 來創(chuàng)建一個動畫 --返回一個animation對象
創(chuàng)建一個動畫實(shí)例 animation。
onReady: function () {
this.animation = wx.createAnimation({
duration:1000,
timingFunction:'linear',
delay:100,
transformOrigin:"left top 0"
})
},
調(diào)用實(shí)例的方法來描述動畫。
Animation.step() 表示一組動畫的完成，可以在一組動畫中調(diào)用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進(jìn)行下一組動畫
rotate(){
this.animation.rotate(150).step() //對動畫進(jìn)行簡單的描述
this.setData({
? ? ?animation:this.animation.export()
})
},
最后通過動畫實(shí)例的 export 方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的 animation 屬性。
this.animation.export() 導(dǎo)出動畫隊(duì)列。export 方法每次調(diào)用后會清掉之前的動畫操作
rotate(){
this.animation.rotate(150).step() //對動畫進(jìn)行簡單的描述
this.setData({ // 在setData({}) 導(dǎo)出動畫數(shù)據(jù)數(shù)據(jù)給組件
? ? ?animation:this.animation.export()
})
},
完整的wxml
view class="container"
view animation="{{animation}}" class="view"
將做動畫的塊
/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、用選擇器來綁定組件來來實(shí)現(xiàn)組件的動畫（小程序2.9.0 的庫可用，版本不夠會報this.animate不是一個方法）
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)的動畫
進(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、用第三方的庫 animation.css
需要做的有
從下載css動畫文件
把 .css 文件 改名成 .wxss文件（可進(jìn)行相應(yīng)的需改，畢竟小程序的大小限制擺在那里）
把它引入到你的app.wxss文件中
@import “動畫文件的相對目錄”
在用的時候把他和你的樣式綁定
view class="swing" style="height: 100px; width: 100px;background-color: #ccc;"
block
/view
// 給類名為swing 的文件綁定swing 的動畫
.swing{
animation: swing 5s infinite;
}
用Css3 實(shí)現(xiàn)React 動畫的三種方法
中級：
Css3中的幀動畫
這次用react-transition-group做一個togglebutton控制div顯示和隱藏的例子，首先我們需要安裝react-transition-group，輸入
組件中引入CSSTransition模塊：
一旦動畫入場，插件將會自動的在包裹住的標(biāo)簽上添加很多css樣式，默認(rèn)class名是boss-text，所以我們需要給CSSTransition標(biāo)簽加上classNames='boss-text'，然后去css文件進(jìn)行配置：
如果頁面上一組dom都需要添加動畫效果時我們需要在最外面再加一個TransitionGroup
css3的樣式中的動漫樣式怎么弄的呀？
創(chuàng)建動畫：@keyframes規(guī)則。
方式一：from{屬性：值;} ?to{屬性：值;}
2
創(chuàng)建動畫
方式二：0%{屬性：值;} 100%{屬性：值;}
0% 是動畫的開始，100% 是動畫的完成。可以在二者之間加入25%，50%等。
3
將動畫綁定到選擇器：
在樣式中，設(shè)置動畫屬性animation，自定義動畫名稱和時長。
animation：動畫名 ?時長；
此時就可以完成一個簡單的動畫了，要進(jìn)行更多設(shè)置還需要其他屬性。
4
規(guī)定動畫開始時的等待時間：
animation-delay：時間；可以為秒、毫秒2s，2ms。
5
播放次數(shù)：
animation-iteration-count：次數(shù)；
永久播放的值取infinite。
6
動畫速度曲線：
animation-timing-function：變化類型；
變化類型有：linear 勻速；ease-in 開始慢；ease-out 結(jié)束慢；ease?動畫有一個緩慢的開始，然后快，結(jié)束慢。
網(wǎng)頁標(biāo)題：CSS樣式動畫生成器,如何在css中實(shí)現(xiàn)動畫
網(wǎng)站地址：http://muchs.cn/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)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
