站長資訊網(wǎng)
之前的文章《H5篇：頁面中實(shí)現(xiàn)動(dòng)畫的幾種方式？（附代碼）》中，帶大家了解頁面中實(shí)現(xiàn)動(dòng)畫的幾種方式。下面本篇文章給大家介紹怎么使用CSS3來實(shí)現(xiàn)一個(gè)簡(jiǎn)單漂亮的動(dòng)畫效果，我們一起看看
復(fù)習(xí)下 css3 的動(dòng)畫， 都快不會(huì)寫了，那會(huì)兒挺喜歡 flash 的，可惜了時(shí)代在前進(jìn)。寫這里就當(dāng)是文檔看吧
瀏覽器支持
Internet Explorer 10、Firefox 以及 Opera 支持 animation 屬性。
Safari 和 Chrome 支持替代的 -webkit-animation 屬性。
注釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性。
定義和用法
animation屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置六個(gè)動(dòng)畫屬性：
-
animation-name
-
animation-duration
-
animation-timing-function animation-delay
-
animation-iteration-count animation-direction
語法
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 | 備注 |
|---|---|---|
| animation-timing-function | 規(guī)定動(dòng)畫的速度曲線 | 可取值為 linear ，ease（淡入淡出），ease-in，ease-out ，ease-in-out，cubic-bezier(n, n, n, n) |
| animation-play-state | 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。 | paused 表示暫停狀態(tài)，running 表示運(yùn)行狀態(tài) |
| animation-name | 規(guī)定需要綁定到選擇器的 keyframe 名稱 | @keyframe { from {opcity:0} to {opcity:1}} |
| animation-iteration-count | 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù) | 可選值為 infinite（無限次）n（比如 5 次） |
| animation-fill-mode | 動(dòng)畫在播放之前或之后，其動(dòng)畫效果是否可見。 | none（默認(rèn)） / forwards（動(dòng)畫完成后） / backwards（在動(dòng)畫顯示之前） / both（兩者）; |
| animation-duration | 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì) | 必須規(guī)定否則，不執(zhí)行動(dòng)畫 |
| animation-direction | 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫 | 默認(rèn)值 normal，alternate 為動(dòng)畫應(yīng)該輪流反向播放。左右左 |
| animation-delay | 規(guī)定在動(dòng)畫開始之前的延遲 | 定義動(dòng)畫開始前等待的時(shí)間，以秒或毫秒計(jì)。默認(rèn)值是 0。單位為 s |
關(guān)于keyframe的定義
-
Firefox支持替代的@-moz-keyframes規(guī)則；
-
Opera支持替代的@-o-keyframes規(guī)則；
-
Safari和Chrome支持替代的@-webkit-keyframes規(guī)則；
-
取值支持 0-100% 和from，to。
@keyframes move { 0% { top: 0px; left: 0px; } 25% { top: 200px; left: 200px; } 50% { top: 100px; left: 100px; } 75% { top: 200px; left: 200px; } 100% { top: 0px; left: 0px; } } @keyframes move { from { top: 0px; left: 0px; } to { top: 0px; left: 100px; } }
demo 寫了一個(gè)例子，地球繞太陽轉(zhuǎn)
以下是代碼
<!-- html 部分 --> <div style="width:700px; "> <div class="t"> <div class="t1"></div> </div> </div>
/* css 部分 */ @keyframes t { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes t { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .t { height: 500px; width: 500px; position: relative; border-radius: 50%; transform: scale(.8); border: 1px solid #dedede; &::before { content: ""; width: 50px; height: 50px; background: radial-gradient(72px, #f00, #ff0, #080); border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-top: -25px; margin-left: -25px; box-shadow: 0 0 37px #fcff4a; } .t1 { height: 20px; border-radius: 50%; width: 20px; margin-top: -10px; top: 50%; left: -10px; background: radial-gradient(26px, #0082ff, #184608, #003ade); position: absolute; animation: t 3s infinite linear; transform-origin: 260px center; } } </style>
還有一個(gè) demo ，在這里https://k-ui.cn
推薦學(xué)習(xí)CSS3視頻教程
