css輕鬆寫出夢幻西遊動畫效果

>
class
="houzi"
>
div>
class
="bajie"
>
div>
class
="tanshen"
>
div>
class
="shashen"
>
div>
body
>

type
="text/css"
>
body
style
>

從下面的一張可以看出，這時一張動作連續的雪碧圖，大小為1600px180px，裡面有八個人物，所以第乙個人物的大小就是200px180px ,素材裡面有幾張不一樣大小的，我們根據寬度除以裡面的人物數量就可以得出每一張的大小。最後使用定位，移動到頁面上的某個位置。

.houzi .bajie .tanshen .shashen

background-position: 0 0; 第乙個引數為x軸，第二個引數為y軸，很明顯我們只需要用到x軸，從0開始，結束為我們的大小，這裡我們是向左走，所以為負數。

/* 定義動畫 */
@keyframes move
to}

定義乙個類名，animation: move 1.4s steps(8) infinite; 第乙個引數為我們定義的動畫名字，第二個引數表示動畫執行的時間，第三個引數這個用了steps這個函式，它表示分多少步走完這個動畫，前面我們設定了大小為200px的盒子，為1600px，很明顯走完一張需要8步。最後乙個引數表示無限執行當前動畫。

.attribute

很簡單給我們的div盒子新增上面定義好的類名。這裡之所以只給倆個新增是因為這倆張的大小是一模一樣的，其他倆張的大小是不同的。所以我們需要重新定義動畫。

>
class
="houzi attribute"
>
div>
class
="bajie attribute"
>
div>
class
="tanshen"
>
div>
class
="shashen"
>
div>
body
>

@keyframes shashento}
@keyframes tanshen
to}

.tanshen .shashen

>
>
charset
="utf-8"
>
>
夢幻西遊title
>
type
="text/css"
>
body
/* 定義動畫 */
@keyframes moveto}
@keyframes shashento}
@keyframes tanshento}
.attribute
.houzi
.bajie
.tanshen
.shashen
style
>
head
>
>
class
="houzi attribute"
>
div>
class
="bajie attribute"
>
div>
class
="tanshen"
>
div>
class
="shashen"
>
div>
body
>
html
>

css輕鬆寫出夢幻西遊動畫效果

CSS製作夢幻彩虹效果

輕鬆玩轉CSS浮動原理

純css寫出來的小彩虹

css輕鬆寫出夢幻西遊動畫效果

CSS製作夢幻彩虹效果

輕鬆玩轉CSS浮動原理

純css寫出來的小彩虹

相關推薦