当前位置：首页 > 下载 > JS特效 > CSS3特效 > CSS3特效猫挂在线球上左右摇摆动画

CSS3特效猫挂在线球上左右摇摆动画

分类: JS特效 / CSS3特效	发布日期: 2017-12-18	访问量: 1927
下载: 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开发全栈课程全集

1682 2024-04-24
Go语言实战之 GraphQL

1956 2024-04-19
550W粉丝大佬手把手从零学JavaScript

3380 2024-04-18
python大神Mosh，零基础小白6小时完全入门

2908 2024-04-10
MySQL 初学入门（mosh老师）

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

2592 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；
高度：90 像素；
背景图像：-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：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);
}
}
@关键帧脸{
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；
}
}
@关键帧淡入{
从 {＃＃＃不透明度：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：两者；
动画填充模式：两者；
}

*：之前，*：{
之后内容： '';＃＃＃显示：块；
}