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

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


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

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

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

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

。貓 {＃＃＃ ? 位置：絕對(duì)；
? 頂部：0;
? 左：0；
? 寬度：100%；
? 高度：100%；
? -webkit-animation：擺動(dòng) 7s 0.2s 無限兩者；
? ? ? ? ? 動(dòng)畫：擺動(dòng) 7s 0.2s 無限兩者；
? -webkit-transform-origin：頂部中心；
? ? ? ? ? 變換原點(diǎn)：頂部中心；
}

.cat-upper {
? 位置：絕對(duì)；
? 頂部：0；
? 左：0；
? 寬度：100%；
? 高度：100%；
? -webkit-transform-origin：頂部中心；
? ? ? ? ? 變換原點(diǎn)：頂部中心；
? z 索引: 1;
}
.cat-upper .cat-leg {
? 位置：絕對(duì)；
? 寬度：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%；
? 位置：絕對(duì)；
? 頂部：100%；
? 寬度：75px；
? 左：計(jì)算（50% - 37.5px）；
? -webkit-animation：反向擺動(dòng) 7s 0.2s 無限兩者；
? ? ? ? ? 動(dòng)畫：反向擺動(dòng) 7s 0.2s 無限兩者；
? -webkit-transform-origin：頂部中心；
? ? ? ? ? 變換原點(diǎn)：頂部中心；
}

.cat-lower {
? 位置：絕對(duì)；
? 頂部：0;
? 左：0；
? 寬度：100%；
? 高度：100%；
? -webkit-animation：擺動(dòng) 7s 0.5s 無限兩者；
? ? ? ? ? 動(dòng)畫：擺動(dòng) 7s 0.5s 無限兩者；
? -webkit-transform-origin：頂部中心；
? ? ? ? ? 變換原點(diǎn)：頂部中心；
}
.cat-lower:{
之后 ? 位置：絕對(duì)；
? 頂部：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；
? 位置：絕對(duì)；
? 高度：20px；
? 寬度：20px；
? -webkit-animation：擺腿 7s 0.3s 無限兩者；
? ? ? ? ? 動(dòng)畫：擺腿 7s 0.3s 無限兩者；
? z 索引: 1;
? -webkit-transform-origin：頂部中心；
? ? ? ? ? 變換原點(diǎn)：頂部中心；
? 左上邊框半徑：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 {
? 位置：絕對(duì)；
? 高度：15px；
? 寬度：10px；
? -webkit-animation: swing-tail 7s 三次貝塞爾曲線(0.5, 0, 0.5, 1) 無限兩者;
? ? ? ? ? 動(dòng)畫：擺尾 7s 三次貝塞爾曲線(0.5, 0, 0.5, 1) 無限兩者;
? -webkit-transform-origin：頂部中心；
? ? ? ? ? 變換原點(diǎn)：頂部中心；
? z 索引: 0;
? 背景圖像：-webkit-線性漸變（左，白色，#D5E8F8，#8B9BD9）;
? 背景圖像：線性漸變（向右，白色，#D5E8F8，#8B9BD9）；
? 左下邊框半徑：10px；
? 右下邊框半徑：10px;
}
.cat-lower .cat-tail > .貓尾巴{
? 頂部：50%；
}
.cat-lower > .貓尾巴{
? 左：計(jì)算（50% - 5px）；
? 頂部：95%；
}

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

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

.貓耳朵{
? 位置：絕對(duì)；
? 頂部：0;
? 左：0；
? 高度：50%；
? 寬度：100%；
? z 索引：-1；
}

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

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

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

.貓須{
? 寬度：50%；
? 高度：8px；
? 位置：絕對(duì)；
? 底部：25%；
? 左：25%；
? -webkit-transform-style：保留-3d;
? ? ? ? ? 變換風(fēng)格：preserve-3d;
? -webkit-透視：60px；
? ? ? ? ? 視角：60px；
}
.cat-whiskers:之前, .cat-whiskers:之后 {
? 位置：絕對(duì)；
? 高度：100%；
? 寬度：30%；
? 邊框：2px實(shí)線#9FA2CB;
? 左邊框：無；
? 右邊框：無；
}
.cat-whiskers:在{
之前 ? 右：100%；
? -webkit-transform-origin：右中心；
? ? ? ? ? 變換原點(diǎn)：右中心；
? -webkit-transform：rotateY（70deg）rotateZ（-10deg）;
? ? ? ? ? 變換：旋轉(zhuǎn)Y(70度)旋轉(zhuǎn)Z(-10度);
}
.cat-whiskers:{
之后 ? 左：100%；
? -webkit-transform-origin：左中心；
? ? ? ? ? 變換原點(diǎn)：左中心；
? -webkit-transform：rotateY（-70deg）rotateZ（10deg）;
? ? ? ? ? 變換：旋轉(zhuǎn)Y(-70度)旋轉(zhuǎn)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);
? }
}

@關(guān)鍵幀鮑勃{
? 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: 旋轉(zhuǎn)(5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(5deg);
? }
? 12.5% {
? ? -webkit-transform: 旋轉(zhuǎn)(-10deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-10deg);
? }
? 25% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(10deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(10deg);
? }
? 37.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-15deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-15deg);
? }
? 50% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(23deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(23deg);
? }
? 62.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-23deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-23deg);
? }
? 75% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(15deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(15deg);
? }
? 87.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-10deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-10deg);
? }
? 100% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(5deg);
? }
}
@關(guān)鍵幀擺動(dòng){
? 0% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(5deg);
? }
? 12.5% {
? ? -webkit-transform: 旋轉(zhuǎn)(-10deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-10deg);
? }
? 25% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(10deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(10deg);
? }
? 37.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-15deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-15deg);
? }
? 50% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(23deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(23deg);
? }
? 62.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-23deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-23deg);
? }
? 75% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(15deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(15deg);
? }
? 87.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-10deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-10deg);
? }
? 100% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(5deg);
? }
}
@-webkit-keyframes 擺腿 {
? 0% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(0.5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(0.5deg);
? }
? 12.5% {
? ? -webkit-transform: 旋轉(zhuǎn)(-1deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-1deg);
? }
? 25% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(1deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)（1deg）；
? }
? 37.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-1.5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-1.5deg);
? }
? 50% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(2.3deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(2.3deg);
? }
? 62.5% {
#? ? -webkit-transform: 旋轉(zhuǎn)(-2.3deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-2.3deg);
? }
? 75% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(1.5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(1.5deg);
? }
? 87.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-1deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-1deg);
? }
? 100% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(0.5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(0.5deg);
? }
}
@keyframes 擺腿 {
? 0% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(0.5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(0.5deg);
? }
? 12.5% {
? ? -webkit-transform: 旋轉(zhuǎn)(-1deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-1deg);
? }
? 25% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(1deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)（1deg）；
? }
? 37.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-1.5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-1.5deg);
? }
? 50% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(2.3deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(2.3deg);
? }
? 62.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-2.3deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-2.3deg);
? }
? 75% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(1.5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(1.5deg);
? }
? 87.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-1deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-1deg);
? }
? 100% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(0.5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(0.5deg);
? }
}
@-webkit-keyframes swing-tail {
? 0% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-2deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-2deg);
? }
? 12.5% {
? ? -webkit-transform: 旋轉(zhuǎn)(4deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(4deg);
? }
? 25% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-4deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-4deg);
? }
? 37.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(6deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)（6deg）；
? }
? 50% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-9.2deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-9.2deg);
? }
? 62.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(9.2deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(9.2deg);
? }
? 75% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-6deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-6deg);
? }
? 87.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(4deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(4deg);
? }
? 100% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-2deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-2deg);
? }
}
@keyframes 擺動(dòng)尾部 {
? 0% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-2deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-2deg);
? }
? 12.5% {
? ? -webkit-transform: 旋轉(zhuǎn)(4deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(4deg);
? }
? 25% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-4deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-4deg);
? }
? 37.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(6deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)（6deg）；
? }
? 50% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-9.2deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-9.2deg);
? }
? 62.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(9.2deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(9.2deg);
? }
? 75% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-6deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-6deg);
? }
? 87.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(4deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(4deg);
? }
? 100% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-2deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-2deg);
? }
}
@-webkit-keyframes 反向擺動(dòng) {
? 0% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-5deg);
? }
? 12.5% {
? ? -webkit-transform: 旋轉(zhuǎn)(10deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(10deg);
? }
? 25% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-10deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-10deg);
? }
? 37.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(15deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(15deg);
? }
? 50% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-23deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-23deg);
? }
? 62.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(23deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(23deg);
? }
? 75% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-15deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-15deg);
? }
? 87.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(10deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(10deg);
? }
? 100% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-5deg);
? }
}
@keyframes 反向擺動(dòng) {
? 0% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-5deg);
? }
? 12.5% {
? ? -webkit-transform: 旋轉(zhuǎn)(10deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(10deg);
? }
? 25% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-10deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-10deg);
? }
? 37.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(15deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(15deg);
? }
? 50% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-23deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-23deg);
? }
? 62.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(23deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(23deg);
? }
? 75% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-15deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-15deg);
? }
? 87.5% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(10deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(10deg);
? }
? 100% {
# ? ? -webkit-transform: 旋轉(zhuǎn)(-5deg);
? ? ? ? ? ? 變換：旋轉(zhuǎn)(-5deg);
? }
}
@-webkit-keyframes 面對(duì) {
? 0% {
# ? ? -webkit-transform：translateX(-2.5px);
? ? ? ? ? ? 變換：translateX(-2.5px);
? }
? 12.5% {
? ? -webkit-transform：translateX(5px);
? ? ? ? ? ? 變換：translateX(5px);
? }
? 25% {
# ? ? -webkit-transform：translateX(-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);
? }
}
@關(guān)鍵幀臉{
? 0% {
# ? ? -webkit-transform：translateX(-2.5px);
? ? ? ? ? ? 變換：translateX(-2.5px);
? }
? 12.5% {
? ? -webkit-transform：translateX(5px);
? ? ? ? ? ? 變換：translateX(5px);
? }
? 25% {
# ? ? -webkit-transform：translateX(-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；
? }
}
@關(guān)鍵幀淡入{
? 從 {＃＃＃ ? ? 不透明度：0；
? }
? 到 {＃＃＃ ? ? 不透明度：1；
? }
}
@-webkit-keyframes 閃爍 {
? 從、到、10%、25%、80% {
? ? -webkit-transform:scaleY(1);
? ? ? ? ? ? 變換：scaleY(1);
? }
? 8%、23%、78% {
? ? -webkit-transform:scaleY(0.1);
? ? ? ? ? ? 變換：scaleY(0.1);
? }
}
@關(guān)鍵幀閃爍{
? 從、到、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;
? 溢出：隱藏；
}

*, *:之前, *:之后 {
? 框大?。哼吙蚩?；
? 位置：相對(duì)；
? -webkit-animation-timing-function: 三次貝塞爾曲線(0.5, 0, 0.5, 1);
? ? ? ? ? 動(dòng)畫計(jì)時(shí)函數(shù)：cubic-bezier(0.5, 0, 0.5, 1);
? -webkit-animation-fill-mode：兩者；
? ? ? ? ? 動(dòng)畫填充模式：兩者；
}

*：之前，*：{
之后 ? 內(nèi)容： '';＃＃＃ ? 顯示：塊；
}