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

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

<頭>
<元字符集=“utf-8”>


<風格>
.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：兩者;
動畫填充模式：兩者;
}

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