目前位置：首頁 > 下載 > JS特效 > CSS3特效 > CSS3特效貓掛在線上球上左右搖擺動畫

CSS3特效貓掛在線上球上左右搖擺動畫

分類: JS特效 / CSS3特效	發佈時間: 2017-12-18	訪問量: 1921
下載: 56

點擊下載預覽效果

更多>

最新下載

‎夢幻水族館

《奇幻水族館》是一款奇幻冒險遊戲，讓玩家探索神祕的海底世界。在這個充滿想像的水族館中，玩家將扮演水族館管理員的角色，透過管理和照顧各種神奇生物來體驗奇幻世界的樂趣。遊戲特色：生物多樣：水族箱裡生活著各種奇幻生物，例如神秘的水晶魚、光芒美人魚等，每種生物都有獨特的外觀和特性。互動：玩家可以與水族箱中的生物互動、餵食、玩耍，甚至執行任務讓生物離你更近。裝飾施工：可依照自己的喜好裝飾水族箱，客製化

0 2024-05-08

《少女前線》是一款由SUNBORN Games開發的戰略角色扮演遊戲。在這個未來世界中，人類與機器人少女戰鬥著，你將扮演指揮官，帶領獨特的機器人少女部隊展開一連串驚心動魄的戰鬥。遊戲特色：龐大的機器人女孩陣營：收集並培養各種不同風格和能力的機器人少女，打造出屬於你自己的最強隊伍。深入的劇情設定：與機器人少女們展開交流並深入了解她們的故事背景，在戰鬥中為她們提供支持和鼓舞。精緻的戰鬥畫面：享受華麗的戰

832 2024-05-06

‎星之翼

《星之翼》是一款將機甲美少女元素與經典GVG格鬥玩法完美融合的3D競技遊戲。遊戲中，玩家將操縱擁有強大戰力的機甲美少女，在熱血沸騰的戰場上，展開激烈的1V1、2V2對戰，感受無與倫比的競技魅力。遊戲透過高精準度的3D建模技術，呈現出絢麗的畫面效果。每台機甲都獨具匠心，細膩刻畫了充滿科技感的機械構造與少女的柔美身姿，彷彿是一部活躍在掌間的動畫大片。美少女駕駛則各具魅力，不同的性格特徵透過語音和動作得

521 2024-05-06

‎小花仙精靈樂園

《小花仙精靈樂園》是一款充滿童趣和魔法的休閒遊戲，為廣大玩家帶來美好的遊戲體驗。在遊戲中，你將會扮演一位小花仙，與其他玩家一起進入精靈樂園，展開充滿驚喜的冒險之旅。遊戲特色：全新的魔法冒險：在更精緻的畫面下，享受全新的精靈樂園冒險。精美的遊戲畫面：遊戲中採用了3D最新技術，打造了唯美的遊戲畫面，讓玩家感受到全新的視覺震撼。各種各樣的活動：在遊戲中，玩家可以參加各種各樣的活動，並獲得大量遊戲獎勵。豐

703 2024-05-06

‎餐廳萌物語

《餐廳萌物語》是一款可愛的餐廳經營模擬遊戲。在這個遊戲中，你將扮演一位年輕的餐廳老闆，透過經營和管理餐廳，迎接一群可愛的萌物顧客，打造出一家獨特而繁忙的餐廳。遊戲特色：可愛的萌物顧客：遊戲中有各種可愛的動物人物作為顧客，每個動物都有自己的喜好和需求，你需要根據他們的喜好來提供最合適的菜餚。自訂餐廳：從裝潢到家具擺設，你可以根據自己的喜好和創意打造獨特的餐廳，吸引更多的顧客。多樣化的選單：遊戲中

574 2024-05-05

‎山河旅探

《山河旅探》遊戲介紹《山河旅探》是一款引人入勝的劇情向國風本格推理探案遊戲。這款遊戲巧妙地將傳統的中國文化元素與經典的推理探案玩法結合，為玩家呈現出一個充滿神秘與驚奇的遊戲世界。在遊戲中，玩家將飾演一名天才少年偵探，穿梭於山河之間，探索各種撲朔迷離的案件。每個案件都經過精心設計，充滿懸疑與挑戰，需要玩家運用智慧與觀察力，收集線索，推理出真相。遊戲的畫面風格獨特，採用了唯美的國風畫風，將古代中國的

946 2024-05-05

‎戀與製作人

《戀與製作人》是一款由Elex開發的女性向手機遊戲，是一款戀愛養成類型的遊戲。在這款遊戲中，你將扮演一名製作人，和四位各具特色的男主角展開浪漫之旅。遊戲特色：真人配音，還原最真實的劇情體驗。豐富的遊戲劇情，起伏的情感故事，讓你身臨其境。完美還原了AR遊戲的操作，讓你更能享受遊戲樂趣。獨特的遊戲玩法讓你更深入了解男主角，體驗不一樣的戀愛。透過任務和活動賺取道具，使用道具提升男主角屬性

519 2024-05-04

‎最強腦3

《最強大腦3》是一款刺激有趣的智力競技遊戲，挑戰你的大腦極限，展現你的智慧與技巧。在這個遊戲中，玩家將面對各種腦力挑戰，包括解密、推理、記憶等多種題材，讓你的大腦得到全方位的鍛鍊。遊戲特色：多樣化的挑戰題材，涵蓋解密、推理、記憶等多個領域，保證你不會感到無聊。豐富的關卡設計，難度逐漸增加，挑戰你的智商極限。多種遊戲模式可供選擇，單人挑戰、多人對戰，讓你與好友一同比拼智商。精美的畫面設計和音效，營造

869 2024-05-04

‎異塵：達米拉

《異塵：達米拉》遊戲介紹《異塵：達米拉》是一款引人入勝的全3D異星輕科幻禦宅塔防遊戲。在這個遊戲中，玩家將扮演阿圖姆號的長官，肩負起延續人類希望的重任，帶領一群充滿朝氣和活力的「新生」少女，踏上神秘的達米拉星，探索這顆綠色異星的一切。遊戲以獨特的科幻設定和精美的3D畫面為玩家呈現了一個充滿未知和挑戰的異星世界。在這片神祕的土地上，玩家需要帶領少女們建立堅固的防禦工事，抵禦來自異星的威脅，同時也需要

254 2024-05-03

‎少年西遊記2

《少年西遊記2》遊戲介紹踏入《少年西遊記2》的世界，就是踏入了一個瑰麗奇幻、充滿東方韻味的工業朋克冒險之旅。這款遊戲作為少年系卡牌的最新力作，將國潮元素與龐克風格完美融合，為玩家呈現出一個前所未有的西遊世界。首先，遊戲的畫風獨具匠心。設計師們巧妙地將傳統的國畫、版畫技法與現代龐克元素結合，使得每個角色、每個場景都充滿了濃厚的東方韻味和前衛的龐克氣息。玩家彷彿置身於一個融合了古典與現代、東方與

951 2024-05-03

24小時閱讀排行榜

更多>

最新教學

【web前端】Node.js快速入門

國外Web開發全端課程全集

1674 2024-04-24
Go語言實戰之 GraphQL

1948 2024-04-19
550W粉絲大佬手把手從零學JavaScript

3370 2024-04-18
python大神Mosh，零基礎小白6小時完全入門

2901 2024-04-10
MySQL 初學入門（mosh老師）

1768 2024-04-07
Mock.js | Axios.js | Json | Ajax--十天精品課堂

2584 2024-03-29

CSS3特效貓掛在線上球上左右搖擺動畫

CSS3特效貓掛在線上球上左右搖擺動畫是一款用CSS3做出的動畫搖擺效果

<頭>
<元字符集=“utf-8”>
css3貓掛在線上球上左右欄動畫效果

<風格>
.all-wrap {
-webkit-animation: bob 7s 三次貝塞爾曲線(0.5, 0, 0.5, 1) 無限兩者;
動畫： bob 7s 三次貝塞爾曲線(0.5, 0, 0.5, 1) 無限兩者;
}

。全部 {＃＃＃頂部：10rem；
左：calc(50% - 2.5rem);
位置：絕對；
寬度：5rem;
高度：5rem；
-webkit-transform-origin：中心-20rem;
變換原點：中心-20rem;
-webkit-animation: swing 7s 三次貝塞爾曲線(0.5, 0, 0.5, 1) 無限兩者;
動畫：擺動 7s 三次貝塞爾曲線(0.5, 0, 0.5, 1) 無限兩者;
}
.all:在{
之前高度：20rem；
寬度：2px;
背景顏色：#DB242A;
左：計算（50% - 1px）；
底部：20rem；
}

.紗線{
位置：絕對；
頂部：0；
左：0；
寬度：80px；
高度：80px；
邊界半徑：50%；
背景圖片：-webkit-radial-gradient（左上角，圓圈，#e97c7f，#db242a 50％，#af1d22）;
背景圖像：徑向漸層（左上角的圓圈，#e97c7f，#db242a 50%，#af1d22）；
z 索引: 1;
}
.yarn:之前，.yarn:之後{
位置：絕對；
寬度：20px；
高度：20px；
邊界半徑：50%；
背景顏色：白色；
上：-1px;
}
.yarn:在{
之前左：計算（50% 7px）；
背景顏色：#b1bce6;
}
.yarn:{
之後右：計算(50% 7px);
背景顏色：#D5E8F8;
}

.cat-wrap {
# 位置：絕對；
頂部：0；
左：計算(50% - 45px);
寬度：90px；
高度：130px；
-webkit-animation: 反向擺動 7s 三次貝塞爾曲線(0.5, 0, 0.5, 1) 無限兩者;
動畫：反向擺動 7s 三次貝塞爾曲線(0.5, 0, 0.5, 1) 無限兩者;
-webkit-transform-origin：頂部中心；
變換原點：頂部中心；
}

。貓 {＃＃＃位置：絕對；
頂部：0；
左：0；
寬度：100%；
高度：100%；
-webkit-animation：擺動 7s 0.2s 無限兩者；
動畫：擺動 7s 0.2s 無限兩者;
-webkit-transform-origin：頂部中心；
變換原點：頂部中心；
}

.cat-upper {
位置：絕對；
頂部：0；
左：0；
寬度：100%；
高度：100%；
-webkit-transform-origin：頂部中心；
變換原點：頂部中心；
z 索引: 1;
}
.cat-upper .cat-leg {
位置：絕對；
寬度：20px；
高度：100%；
背景顏色：白色；
z 索引：-1；
背景圖像：-webkit-線性漸變（左，#D5E8F8，#D5E8F8 20％，#8B9BD9）;
背景影像：線性漸層（向右，#D5E8F8，#D5E8F8 20%，#8B9BD9）；
}
.cat-upper .cat-leg:nth-child(1) {
左上邊框半徑：100px；
左：10px;
}
.cat-upper .cat-leg:nth-child(1):{
之後左：50%；
}
.cat-upper .cat-leg:nth-child(2) {
左上邊框半徑：0;
右上方邊框半徑：100px；
右：10px；
}
.cat-upper .cat-leg:nth-child(2):{
之後右：50%；
}

.cat-lower-wrap {
高度：90%；
寬度：100%；
位置：絕對；
上：100%；
寬度：75px；
左：計算（50% - 37.5px）；
-webkit-animation：反向擺動 7s 0.2s 無限兩者;
動畫：反向擺動 7s 0.2s 無限兩者;
-webkit-transform-origin：頂部中心；
變換原點：頂部中心；
}

.cat-lower {
# 位置：絕對；
頂部：0；
左：0；
寬度：100%；
高度：100%；
-webkit-animation：擺動 7s 0.5s 無限兩者；
動畫：擺動 7s 0.5s 無限兩者;
-webkit-transform-origin：頂部中心；
變換原點：頂部中心；
}
.cat-lower:在{
之後位置：絕對；
頂部：0；
左：0；
寬度：100%；
高度：100%；
邊框半徑：100px；
背景圖片：-webkit-radial-gradient（10px 50px，圓形，#ffffff，#ffffff 40％，#d5e8f8 65％，#8b9bd9）;
背景圖像：徑向漸層（10px 50px處的圓圈，#ffffff，#ffffff 40%，#d5e8f8 65%，#8b9bd9）；
z 索引: 1;
}
.cat-lower .cat-leg, .cat-lower .cat-paw {
z 索引：-1；
位置：絕對；
高度：20px；
寬度：20px；
-webkit-animation：擺腿 7s 0.3s 無限兩者;
動畫：擺腿 7s 0.3s 無限兩者;
z 索引: 1;
-webkit-transform-origin：頂部中心；
變換原點：頂部中心；
左上邊框半徑：20px；
右上方邊框半徑：20px;
背景圖像：-webkit-線性漸變（左，白色，#D5E8F8，#8B9BD9）；
背景影像：線性漸層（向右，白色，#D5E8F8，#8B9BD9）；
}
.cat-lower > .cat-leg {
# 底部：20px；
}
.cat-lower > .貓腿 .貓腿 {
上：25%；
}
.cat-lower > .貓腿 .貓腿 {
右：0；
}
.cat-lower .cat-paw {
頂部：50%；
邊界半徑：50%；
背景顏色：#fff;
}
.cat-lower .cat-tail {
位置：絕對；
高度：15px；
寬度：10px；
-webkit-animation: swing-tail 7s 三次貝塞爾曲線(0.5, 0, 0.5, 1) 無限兩者;
動畫：擺尾 7s 三次貝塞爾曲線(0.5, 0, 0.5, 1) 無限兩者;
-webkit-transform-origin：頂部中心；
變換原點：頂部中心；
z 索引: 0;
背景圖像：-webkit-線性漸變（左，白色，#D5E8F8，#8B9BD9）；
背景影像：線性漸層（向右，白色，#D5E8F8，#8B9BD9）；
左下邊框半徑：10px；
右下邊框半徑：10px;
}
.cat-lower .cat-tail > .貓尾{
頂部：50%；
}
.cat-lower > .貓尾{
左：計算（50% - 5px）；
上：95%；
}

.cat-head {
# 寬度：90px；
高度：90px；
背景圖片：-webkit-radial-gradient（10px 10px，圓形，#ffffff，#ffffff 40％，#d5e8f8 65％，#8b9bd9）;
背景圖像：徑向漸層（10px 10px處的圓圈，#ffffff，#ffffff 40%，#d5e8f8 65%，#8b9bd9）；
邊界半徑：50%；
上方：計算(100% - 45px);
}

.貓臉{
位置：絕對；
頂部：0；
左：0；
高度：100%；
寬度：100%；
-webkit-animation: 面對 7s 三次貝塞爾曲線(0.5, 0, 0.5, 1) 無限兩者;
動畫：面對 7s 三次貝塞爾曲線(0.5, 0, 0.5, 1) 無限兩者;
-webkit-transform-style：保留-3d；
變換風格：preserve-3d;
-webkit-透視：100px；
視角：100px；
}

.貓耳{
位置：絕對；
頂部：0；
左：0；
高度：50%；
寬度：100%；
z 索引：-1；
}

.貓耳{
寬度：20px；
高度：100%；
位置：絕對；
邊框半徑：5px;
上：-10px；
}
.cat-ear:第一個孩子 {
左：0；
-webkit-transform-origin：左上角；
變換原點：左上角;
-webkit-transform: skewY(40deg);
變換：skewY(40deg);
背景顏色：白色；
}
.cat-ear:first-child:之前 {
左：0；
右上方邊框半徑：50%；
右下邊框半徑：50%；
背景顏色：#D7EBFB;
}
.cat-ear:最後一個孩子 {
右：0；
-webkit-transform-origin：右上角；
變換原點：右上角;
-webkit-transform: skewY(-40deg);
變換：skewY(-40deg);
背景顏色：#d1e6f7;
}
.cat-ear:last-child:{
之前右：0；
左上邊框半徑：50%；
左下邊框半徑：50%；
背景顏色：#e0f0fc;
}
.cat-ear:在{
之前寬度：60%；
高度：100%；
上：10px；
位置：絕對；
背景顏色：#fff;
}

.貓眼{
位置：絕對；
頂部：50%；
寬度：100%；
高度：6px；
-webkit-animation：閃爍 7 秒步進結束無限兩者;
動畫：閃爍 7s 步驟結束無限兩者;
}
.cat-eyes:之前, .cat-eyes:之後 {
位置：絕對；
高度：6px；
寬度：6px；
邊界半徑：50%；
背景顏色：#4B4D75;
}
.cat-eyes:在{
之前左：20px;
}
.cat-eyes:{
之後右：20px；
}

.貓嘴{
位置：絕對；
寬度：12px;
高度：8px；
背景顏色：#4B4D75;
頂部：60%；
左：計算（50% - 6px）；
左上邊框半徑：50% 30%;
右上方邊框半徑：50% 30%;
左下邊框半徑：50% 70%;
右下邊框半徑：50% 70%;
-webkit-transform: 翻譯Z(10px);
變換：translateZ(10px);
}
.cat-mouth:之前, .cat-mouth:之後 {
位置：絕對；
寬度：90%；
高度：100%；
邊框：2px實線#9FA2CB;
上：80%；
邊框半徑：100px；
頂部邊框顏色：透明；
z 索引：-1；
}
.cat-mouth: 在 {
之前左邊框顏色：透明；
右：計算(50% - 1px);
-webkit-transform-origin：右上角；
變換原點：右上角;
-webkit-transform: 旋轉(10deg);
變換：旋轉(10deg);
}
.cat-mouth:在{
之後右邊框顏色：透明；
左：計算（50% - 1px）；
-webkit-transform-origin：左上角；
變換原點：左上角;
-webkit-transform: 旋轉(-10deg);
變換：旋轉(-10deg);
}

.貓鬚{
寬度：50%；
高度：8px；
位置：絕對；
底部：25%；
左：25%；
-webkit-transform-style：保留-3d；
變換風格：preserve-3d;
-webkit-透視：60px；
視角：60px；
}
.cat-whiskers:之前, .cat-whiskers:之後 {
位置：絕對；
高度：100%；
寬度：30%；
邊框：2px實線#9FA2CB;
左邊框：無；
右邊框：無；
}
.cat-whiskers:在{
之前右：100%；
-webkit-transform-origin：右中心；
變換原點：右中心；
-webkit-transform：rotateY（70deg）rotateZ（-10deg）;
變換：旋轉Y(70度)旋轉Z(-10度);
}
.cat-whiskers:{
之後左：100%；
-webkit-transform-origin：左中心；
變換原點：左中心；
-webkit-transform：rotateY（-70deg）rotateZ（10deg）;
變換：旋轉Y(-70度)旋轉Z(10度);
}

@-webkit-keyframes 鮑伯 {
0% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
6.25% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
12.5% {
-webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
18.75% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
25% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
31.25% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
37.5% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
43.75% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
50% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
56.25% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
62.5% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
68.75% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
75% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
81.25% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
87.5% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
93.75% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
100% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
}

@關鍵影格鮑伯{
0% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
6.25% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
12.5% {
-webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
18.75% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
25% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
31.25% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
37.5% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
43.75% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
50% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
56.25% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
62.5% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
68.75% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
75% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
81.25% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
87.5% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
93.75% {
# -webkit-transform: 翻譯Y(-0.4rem);
變換：translateY(-0.4rem);
}
100% {
# -webkit-transform: 翻譯Y(0.4rem);
變換：translateY(0.4rem);
}
}
@-webkit-keyframes swing {
0% {
# -webkit-transform: 旋轉(5deg);
變換：旋轉(5deg);
}
12.5% {
-webkit-transform: 旋轉(-10deg);
變換：旋轉(-10deg);
}
25% {
# -webkit-transform: 旋轉(10deg);
變換：旋轉(10deg);
}
37.5% {
# -webkit-transform: 旋轉(-15deg);
變換：旋轉(-15deg);
}
50% {
# -webkit-transform: 旋轉(23deg);
變換：旋轉(23deg);
}
62.5% {
# -webkit-transform: 旋轉(-23deg);
變換：旋轉(-23deg);
}
75% {
# -webkit-transform: 旋轉(15deg);
變換：旋轉(15deg);
}
87.5% {
# -webkit-transform: 旋轉(-10deg);
變換：旋轉(-10deg);
}
100% {
# -webkit-transform: 旋轉(5deg);
變換：旋轉(5deg);
}
}
@關鍵影格擺動{
0% {
# -webkit-transform: 旋轉(5deg);
變換：旋轉(5deg);
}
12.5% {
-webkit-transform: 旋轉(-10deg);
變換：旋轉(-10deg);
}
25% {
# -webkit-transform: 旋轉(10deg);
變換：旋轉(10deg);
}
37.5% {
# -webkit-transform: 旋轉(-15deg);
變換：旋轉(-15deg);
}
50% {
# -webkit-transform: 旋轉(23deg);
變換：旋轉(23deg);
}
62.5% {
# -webkit-transform: 旋轉(-23deg);
變換：旋轉(-23deg);
}
75% {
# -webkit-transform: 旋轉(15deg);
變換：旋轉(15deg);
}
87.5% {
# -webkit-transform: 旋轉(-10deg);
變換：旋轉(-10deg);
}
100% {
# -webkit-transform: 旋轉(5deg);
變換：旋轉(5deg);
}
}
@-webkit-keyframes 擺腿 {
0% {
# -webkit-transform: 旋轉(0.5deg);
變換：旋轉(0.5deg);
}
12.5% {
-webkit-transform: 旋轉(-1deg);
變換：旋轉(-1deg);
}
25% {
# -webkit-transform: 旋轉(1deg);
變換：旋轉（1deg）；
}
37.5% {
# -webkit-transform: 旋轉(-1.5deg);
變換：旋轉(-1.5deg);
}
50% {
# -webkit-transform: 旋轉(2.3deg);
變換：旋轉(2.3deg);
}
62.5% {
#-webkit-transform: 旋轉(-2.3deg);
變換：旋轉(-2.3deg);
}
75% {
# -webkit-transform: 旋轉(1.5deg);
變換：旋轉(1.5deg);
}
87.5% {
# -webkit-transform: 旋轉(-1deg);
變換：旋轉(-1deg);
}
100% {
# -webkit-transform: 旋轉(0.5deg);
變換：旋轉(0.5deg);
}
}
@keyframes 擺腿 {
0% {
# -webkit-transform: 旋轉(0.5deg);
變換：旋轉(0.5deg);
}
12.5% {
-webkit-transform: 旋轉(-1deg);
變換：旋轉(-1deg);
}
25% {
# -webkit-transform: 旋轉(1deg);
變換：旋轉（1deg）；
}
37.5% {
# -webkit-transform: 旋轉(-1.5deg);
變換：旋轉(-1.5deg);
}
50% {
# -webkit-transform: 旋轉(2.3deg);
變換：旋轉(2.3deg);
}
62.5% {
# -webkit-transform: 旋轉(-2.3deg);
變換：旋轉(-2.3deg);
}
75% {
# -webkit-transform: 旋轉(1.5deg);
變換：旋轉(1.5deg);
}
87.5% {
# -webkit-transform: 旋轉(-1deg);
變換：旋轉(-1deg);
}
100% {
# -webkit-transform: 旋轉(0.5deg);
變換：旋轉(0.5deg);
}
}
@-webkit-keyframes swing-tail {
0% {
# -webkit-transform: 旋轉(-2deg);
變換：旋轉(-2deg);
}
12.5% {
-webkit-transform: 旋轉(4deg);
變換：旋轉(4deg);
}
25% {
# -webkit-transform: 旋轉(-4deg);
變換：旋轉(-4deg);
}
37.5% {
# -webkit-transform: 旋轉(6deg);
變換：旋轉（6deg）；
}
50% {
# -webkit-transform: 旋轉(-9.2deg);
變換：旋轉(-9.2deg);
}
62.5% {
# -webkit-transform: 旋轉(9.2deg);
變換：旋轉(9.2deg);
}
75% {
# -webkit-transform: 旋轉(-6deg);
變換：旋轉(-6deg);
}
87.5% {
# -webkit-transform: 旋轉(4deg);
變換：旋轉(4deg);
}
100% {
# -webkit-transform: 旋轉(-2deg);
變換：旋轉(-2deg);
}
}
@keyframes 擺動尾部 {
0% {
# -webkit-transform: 旋轉(-2deg);
變換：旋轉(-2deg);
}
12.5% {
-webkit-transform: 旋轉(4deg);
變換：旋轉(4deg);
}
25% {
# -webkit-transform: 旋轉(-4deg);
變換：旋轉(-4deg);
}
37.5% {
# -webkit-transform: 旋轉(6deg);
變換：旋轉（6deg）；
}
50% {
# -webkit-transform: 旋轉(-9.2deg);
變換：旋轉(-9.2deg);
}
62.5% {
# -webkit-transform: 旋轉(9.2deg);
變換：旋轉(9.2deg);
}
75% {
# -webkit-transform: 旋轉(-6deg);
變換：旋轉(-6deg);
}
87.5% {
# -webkit-transform: 旋轉(4deg);
變換：旋轉(4deg);
}
100% {
# -webkit-transform: 旋轉(-2deg);
變換：旋轉(-2deg);
}
}
@-webkit-keyframes 反向擺動 {
0% {
# -webkit-transform: 旋轉(-5deg);
變換：旋轉(-5deg);
}
12.5% {
-webkit-transform: 旋轉(10deg);
變換：旋轉(10deg);
}
25% {
# -webkit-transform: 旋轉(-10deg);
變換：旋轉(-10deg);
}
37.5% {
# -webkit-transform: 旋轉(15deg);
變換：旋轉(15deg);
}
50% {
# -webkit-transform: 旋轉(-23deg);
變換：旋轉(-23deg);
}
62.5% {
# -webkit-transform: 旋轉(23deg);
變換：旋轉(23deg);
}
75% {
# -webkit-transform: 旋轉(-15deg);
變換：旋轉(-15deg);
}
87.5% {
# -webkit-transform: 旋轉(10deg);
變換：旋轉(10deg);
}
100% {
# -webkit-transform: 旋轉(-5deg);
變換：旋轉(-5deg);
}
}
@keyframes 反向擺動 {
0% {
# -webkit-transform: 旋轉(-5deg);
變換：旋轉(-5deg);
}
12.5% {
-webkit-transform: 旋轉(10deg);
變換：旋轉(10deg);
}
25% {
# -webkit-transform: 旋轉(-10deg);
變換：旋轉(-10deg);
}
37.5% {
# -webkit-transform: 旋轉(15deg);
變換：旋轉(15deg);
}
50% {
# -webkit-transform: 旋轉(-23deg);
變換：旋轉(-23deg);
}
62.5% {
# -webkit-transform: 旋轉(23deg);
變換：旋轉(23deg);
}
75% {
# -webkit-transform: 旋轉(-15deg);
變換：旋轉(-15deg);
}
87.5% {
# -webkit-transform: 旋轉(10deg);
變換：旋轉(10deg);
}
100% {
# -webkit-transform: 旋轉(-5deg);
變換：旋轉(-5deg);
}
}
@-webkit-keyframes 面對 {
0% {
# -webkit-transform：translateX(-2.5px);
變換：translateX(-2.5px);
}
12.5% {
-webkit-transform：translateX(5px);
變換：translateX(5px);
}
25% {
# -webkit-transform: 翻譯X(-5px);
變換：translateX(-5px);
}
37.5% {
# -webkit-transform：translateX(7.5px);
變換：translateX(7.5px);
}
50% {
# -webkit-transform：translateX(-11.5px);
變換：translateX(-11.5px);
}
62.5% {
# -webkit-transform：translateX(11.5px);
變換：translateX(11.5px);
}
75% {
# -webkit-transform：translateX(-7.5px);
變換：translateX(-7.5px);
}
87.5% {
# -webkit-transform：translateX(5px);
變換：translateX(5px);
}
100% {
# -webkit-transform：translateX(-2.5px);
變換：translateX(-2.5px);
}
}
@關鍵影格臉{
0% {
# -webkit-transform：translateX(-2.5px);
變換：translateX(-2.5px);
}
12.5% {
-webkit-transform：translateX(5px);
變換：translateX(5px);
}
25% {
# -webkit-transform: 翻譯X(-5px);
變換：translateX(-5px);
}
37.5% {
# -webkit-transform：translateX(7.5px);
變換：translateX(7.5px);
}
50% {
# -webkit-transform：translateX(-11.5px);
變換：translateX(-11.5px);
}
62.5% {
# -webkit-transform：translateX(11.5px);
變換：translateX(11.5px);
}
75% {
# -webkit-transform：translateX(-7.5px);
變換：translateX(-7.5px);
}
87.5% {
# -webkit-transform：translateX(5px);
變換：translateX(5px);
}
100% {
# -webkit-transform：translateX(-2.5px);
變換：translateX(-2.5px);
}
}
@-webkit-keyframes 淡入 {
由 {＃＃＃不透明度：0；
}
到 {＃＃＃不透明度：1；
}
}
@關鍵影格淡入{
由 {＃＃＃不透明度：0；
}
到 {＃＃＃不透明度：1；
}
}
@-webkit-keyframes 閃爍 {
從、到、10%、25%、80% {
-webkit-transform:scaleY(1);
變換：scaleY(1);
}
8%、23%、78% {
-webkit-transform:scaleY(0.1);
變換：scaleY(0.1);
}
}
@關鍵影格閃爍{
從、到、10%、25%、80% {
-webkit-transform:scaleY(1);
變換：scaleY(1);
}
8%、23%、78% {
-webkit-transform:scaleY(0.1);
變換：scaleY(0.1);
}
}
正文，html {
高度：100%；
寬度：100%；
邊距：0；
填充：0;
背景顏色：#1F1F3C;
溢出：隱藏；
}

*, *:前, *:之後 {
框大小：邊框框；
位置：相對；
-webkit-animation-timing-function: 三次貝塞爾曲線(0.5, 0, 0.5, 1);
動畫計時函數：cubic-bezier(0.5, 0, 0.5, 1);
-webkit-animation-fill-mode：兩者;
動畫填充模式：兩者;
}

*：之前，*：{
之後內容： '';＃＃＃顯示：塊；
}