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

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

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

CSS3特效貓掛在線上球上左右搖擺動畫
分類:   JS特效 / CSS3特效 發佈時間:  2017-12-18 訪問量:  1906
下載:  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
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:兩者;
動畫填充模式:兩者;
}

*:之前,*:{
之後 內容: '';### 顯示:塊;
}

本網站聲明
本站所有資源都是由網友投搞發佈,或轉載各大下載站,請自行檢測軟件的完整性! 本站所有資源僅供學習與參攷,請勿用於商業用途,否則產生的一切後果將由您自己承擔! 如有侵權請聯繫我們删除下架,聯繫方式: admin@php.cn

相關推薦

行動端開心刮刮樂HTML5插件

行動端開心刮刮樂HTML5插件是適合雙12活動的行動端H5刮刮樂插件。
html5特效
2024-02-29

HTML5紙片折成禮盒動畫特效

HTML5紙片折成禮盒動畫特效是一款適合聖誕節或任何節日使用的css實現的聖誕節禮物動畫效果。
html5特效
2024-02-29

純CSS3復古底片播放器特效

純CSS3復古底片播放器特效是一款簡單的底片音樂播放器,底片錄音播放器特效。
播放器特效
2024-02-29

HTML5影片播放器視窗浮動程式碼

HTML5影片播放器視窗浮動程式碼是一款黑色好看的MP4影片播放器程式碼。
播放器特效
2024-02-29

輕量級html5 WinBox頁面彈跳視窗插件

輕量級html5 WinBox頁面彈窗外掛非常方便易操作,支援最大化、最小化、全螢幕、關閉、移動、開啟多個視窗等功能。
html5特效
2024-02-29

jQuery手風琴圖片滑動選單欄

jQuery手風琴圖片滑動選單列是一款酷炫的手風琴圖片滑動效果導覽選單列特效。
手風琴效果
2024-02-29

純CSS3製作紅色下拉導覽選單代碼

純CSS3製作紅色下拉導覽選單代碼是純css3 transition屬性製作紅色的導覽選單,滑鼠懸停展開下拉式選單,支援三級下拉選單代碼。
選單導航
2024-02-29

HTML5滑鼠滾輪旋轉圖片展示特效

HTML5滑鼠滾輪旋轉圖片展示特效是一款滑鼠滾輪旋轉並點擊放大圖片的網頁特效,可放大選取的圖片或點擊還原至原處。
圖片特效
2024-02-29

熱門推薦

jQuery+Html5實作唯美表白動畫程式碼

jQuery+Html5實作唯美表白動畫程式碼,動畫效果很棒,程式設計師表白必備!
其它特效
2017-02-14

情侶浪漫表白js特效程式碼

情侶浪漫表白js特效程式碼,這樣的特效,可以用在婚禮攝影的網站上,也可以放在個人網站中,也還一個不錯的特效,php中文網推薦下載!
其它特效
2017-02-08

酷炫的系統登入頁

酷炫的系統登入頁
jQuery特效
2019-12-30

H5熊貓彈跳小遊戲原始碼

html5手機熊貓也瘋狂小遊戲原始碼。遊戲說明:長按螢幕調整熊貓彈簧的強度,跳到石柱上。掉到河裡遊戲結束。
html5特效
2019-08-22

H5 3D滾球遊戲原始碼

html5酷炫3D彩球滾動手機遊戲代碼下載。遊戲介紹:一個彩色圓球滾動,透過滑鼠或手機觸控螢幕拖曳來控制彩球的運行當前線路軌跡。這是一款簡單易操作的手機小遊戲原始碼。
html5特效
2019-08-26

HTML5 canvas射擊鴨子小遊戲

HTML5 canvas射擊鴨子小遊戲
html5特效
2017-11-24

簡單js戀愛表白神器

簡單原生js戀愛表白神器
其它特效
2017-02-14

碉堡的html5粒子動畫表白特效

碉堡的html5粒子動畫表白特效程式碼,動畫特效文字可以在程式碼裡面進行更改,大家可以做個頁面,大家可以自訂文字的輸入是應該是非常受歡迎的,此HTML5特效非常美的。
其它特效
2017-02-14
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!