这段CSS代码创建了一个包含多个魔法咒语效果的场景，包括'Expelliarmus', 'Stupefy', 'Levioso'和'Avada Kedavra'。每个咒语都有独特的动画，如旋转、模糊、颜色变化和阴影效果，模拟魔法释放和轨迹。此外，还定义了角色的身体部分如手臂和腿的动态变化，进一步增强了视觉效果。
CSS
语言：
CSSSCSS
确定
body {
font-family: microsoft yahei;
}
header {
text-align: center;
}
label {
margin-right: 0.5em;
}
input {
margin: 0 0.2em;
}
.arena {
height: 340px;
position: relative;
}
.my-wand {
background: brown;
height: 50px;
left: 10%;
position: absolute;
top: 160px;
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
width: 3px;
}
.spell {
border-radius: 50%;
display: block;
-webkit-filter: blur(0.05em);
filter: blur(0.05em);
font-size: 0.05em;
height: 1em;
left: calc(10% + 30px);
opacity: 0;
position: absolute;
top: 170px;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 1em;
}
.spell.expeliarmus {
background: whitesmoke;
}
.spell.expeliarmus:before,
.spell.expeliarmus:after {
background: white;
}
.spell.expeliarmus.build:before,
.spell.expeliarmus.build:after {
background: whitesmoke;
box-shadow: 0 -0.24641em 0.2em 0.05em white, -0.2em 0.07321em 0.2em 0.05em white, 0.2em 0.07321em 0.2em 0.05em white;
}
.spell.expeliarmus.build:after {
-webkit-animation-name: rotate, box-shadow-exp;
animation-name: rotate, box-shadow-exp;
}
.spell.expeliarmus.travel {
-webkit-animation-name: travel-exp;
animation-name: travel-exp;
box-shadow: inset -0.1em 0 0 0.05em #f7f7f7, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f7f7f7, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f7f7f7, inset -0.1em 0 0.3em 0.05em whitesmoke;
}
@-webkit-keyframes box-shadow-exp {
0% {
box-shadow: -0.45em 0.2em 0 white, 0 0.45em 0.2em 0 white, 0.45em 0 0.2em 0 white, -0.45em 0 0.2em 0 white;
}
25% {
box-shadow: -0.35em 0.2em 0 white, 0 0.35em 0.2em 0 white, 0.35em 0 0.2em 0 white, -0.35em 0 0.2em 0 white;
}
50% {
box-shadow: -0.25em 0.2em 0 white, 0 0.25em 0.2em 0 white, 0.25em 0 0.2em 0 white, -0.25em 0 0.2em 0 white;
}
}
@keyframes box-shadow-exp {
0% {
box-shadow: -0.45em 0.2em 0 white, 0 0.45em 0.2em 0 white, 0.45em 0 0.2em 0 white, -0.45em 0 0.2em 0 white;
}
25% {
box-shadow: -0.35em 0.2em 0 white, 0 0.35em 0.2em 0 white, 0.35em 0 0.2em 0 white, -0.35em 0 0.2em 0 white;
}
50% {
box-shadow: -0.25em 0.2em 0 white, 0 0.25em 0.2em 0 white, 0.25em 0 0.2em 0 white, -0.25em 0 0.2em 0 white;
}
}
@-webkit-keyframes travel-exp {
0% {
box-shadow: inset 0 0 0 0 #f7f7f7, 0 0 0 0 #f9f9f9, 0 0 0 0 #f7f7f7, 0 0 0 0 whitesmoke, 0 0 0 0 #f7f7f7, inset -0.1em 0 0.3em 0.05em whitesmoke;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
20% {
box-shadow: inset -0.1em 0 0 0.05em #f7f7f7, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f7f7f7, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f7f7f7, inset -0.1em 0 0.3em 0.05em whitesmoke;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
70% {
box-shadow: inset -0.1em 0 0 0.05em #f7f7f7, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f7f7f7, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f7f7f7, inset -0.1em 0 0.3em 0.05em whitesmoke;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
100% {
box-shadow: inset -0.1em 0 0 0.05em #f7f7f7, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f7f7f7, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f7f7f7, inset -0.1em 0 0.3em 0.05em whitesmoke;
opacity: 0;
-webkit-transform: scale(30) translateX(0%) translateY(0%);
transform: scale(30) translateX(0%) translateY(0%);
}
}
@keyframes travel-exp {
0% {
box-shadow: inset 0 0 0 0 #f7f7f7, 0 0 0 0 #f9f9f9, 0 0 0 0 #f7f7f7, 0 0 0 0 whitesmoke, 0 0 0 0 #f7f7f7, inset -0.1em 0 0.3em 0.05em whitesmoke;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
20% {
box-shadow: inset -0.1em 0 0 0.05em #f7f7f7, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f7f7f7, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f7f7f7, inset -0.1em 0 0.3em 0.05em whitesmoke;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
70% {
box-shadow: inset -0.1em 0 0 0.05em #f7f7f7, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f7f7f7, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f7f7f7, inset -0.1em 0 0.3em 0.05em whitesmoke;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
100% {
box-shadow: inset -0.1em 0 0 0.05em #f7f7f7, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f7f7f7, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f7f7f7, inset -0.1em 0 0.3em 0.05em whitesmoke;
opacity: 0;
-webkit-transform: scale(30) translateX(0%) translateY(0%);
transform: scale(30) translateX(0%) translateY(0%);
}
}
.spell.stupify {
background: crimson;
}
.spell.stupify:before,
.spell.stupify:after {
background: red;
}
.spell.stupify.build:before,
.spell.stupify.build:after {
background: crimson;
box-shadow: 0 -0.24641em 0.2em 0.05em red, -0.2em 0.07321em 0.2em 0.05em red, 0.2em 0.07321em 0.2em 0.05em red;
}
.spell.stupify.build:after {
-webkit-animation-name: rotate, box-shadow-stu;
animation-name: rotate, box-shadow-stu;
}
.spell.stupify.travel {
-webkit-animation-name: travel-stu;
animation-name: travel-stu;
box-shadow: inset -0.1em 0 0 0.05em #e44e6c, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e44e6c, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e44e6c, inset -0.1em 0 0.3em 0.05em crimson;
}
@-webkit-keyframes box-shadow-stu {
0% {
box-shadow: -0.45em 0.2em 0 red, 0 0.45em 0.2em 0 red, 0.45em 0 0.2em 0 red, -0.45em 0 0.2em 0 red;
}
25% {
box-shadow: -0.35em 0.2em 0 red, 0 0.35em 0.2em 0 red, 0.35em 0 0.2em 0 red, -0.35em 0 0.2em 0 red;
}
50% {
box-shadow: -0.25em 0.2em 0 red, 0 0.25em 0.2em 0 red, 0.25em 0 0.2em 0 red, -0.25em 0 0.2em 0 red;
}
}
@keyframes box-shadow-stu {
0% {
box-shadow: -0.45em 0.2em 0 red, 0 0.45em 0.2em 0 red, 0.45em 0 0.2em 0 red, -0.45em 0 0.2em 0 red;
}
25% {
box-shadow: -0.35em 0.2em 0 red, 0 0.35em 0.2em 0 red, 0.35em 0 0.2em 0 red, -0.35em 0 0.2em 0 red;
}
50% {
box-shadow: -0.25em 0.2em 0 red, 0 0.25em 0.2em 0 red, 0.25em 0 0.2em 0 red, -0.25em 0 0.2em 0 red;
}
}
@-webkit-keyframes travel-stu {
0% {
box-shadow: inset 0 0 0 0 #e44e6c, 0 0 0 0 #ea728a, 0 0 0 0 #e44e6c, 0 0 0 0 crimson, 0 0 0 0 #e44e6c, inset -0.1em 0 0.3em 0.05em crimson;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
20% {
box-shadow: inset -0.1em 0 0 0.05em #e44e6c, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e44e6c, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e44e6c, inset -0.1em 0 0.3em 0.05em crimson;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
70% {
box-shadow: inset -0.1em 0 0 0.05em #e44e6c, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e44e6c, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e44e6c, inset -0.1em 0 0.3em 0.05em crimson;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
100% {
box-shadow: inset -0.1em 0 0 0.05em #e44e6c, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e44e6c, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e44e6c, inset -0.1em 0 0.3em 0.05em crimson;
opacity: 0;
-webkit-transform: scale(30) translateX(0%) translateY(0%);
transform: scale(30) translateX(0%) translateY(0%);
}
}
@keyframes travel-stu {
0% {
box-shadow: inset 0 0 0 0 #e44e6c, 0 0 0 0 #ea728a, 0 0 0 0 #e44e6c, 0 0 0 0 crimson, 0 0 0 0 #e44e6c, inset -0.1em 0 0.3em 0.05em crimson;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
20% {
box-shadow: inset -0.1em 0 0 0.05em #e44e6c, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e44e6c, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e44e6c, inset -0.1em 0 0.3em 0.05em crimson;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
70% {
box-shadow: inset -0.1em 0 0 0.05em #e44e6c, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e44e6c, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e44e6c, inset -0.1em 0 0.3em 0.05em crimson;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
100% {
box-shadow: inset -0.1em 0 0 0.05em #e44e6c, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e44e6c, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e44e6c, inset -0.1em 0 0.3em 0.05em crimson;
opacity: 0;
-webkit-transform: scale(30) translateX(0%) translateY(0%);
transform: scale(30) translateX(0%) translateY(0%);
}
}
.spell.levicorpus {
background: gold;
}
.spell.levicorpus:before,
.spell.levicorpus:after {
background: #ffeb00;
}
.spell.levicorpus.build:before,
.spell.levicorpus.build:after {
background: gold;
box-shadow: 0 -0.24641em 0.2em 0.05em #ffeb00, -0.2em 0.07321em 0.2em 0.05em #ffeb00, 0.2em 0.07321em 0.2em 0.05em #ffeb00;
}
.spell.levicorpus.build:after {
-webkit-animation-name: rotate, box-shadow-lev;
animation-name: rotate, box-shadow-lev;
}
.spell.levicorpus.travel {
-webkit-animation-name: travel-lev;
animation-name: travel-lev;
box-shadow: inset -0.1em 0 0 0.05em #ffe13f, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe13f, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe13f, inset -0.1em 0 0.3em 0.05em gold;
}
@-webkit-keyframes box-shadow-lev {
0% {
box-shadow: -0.45em 0.2em 0 #ffeb00, 0 0.45em 0.2em 0 #ffeb00, 0.45em 0 0.2em 0 #ffeb00, -0.45em 0 0.2em 0 #ffeb00;
}
25% {
box-shadow: -0.35em 0.2em 0 #ffeb00, 0 0.35em 0.2em 0 #ffeb00, 0.35em 0 0.2em 0 #ffeb00, -0.35em 0 0.2em 0 #ffeb00;
}
50% {
box-shadow: -0.25em 0.2em 0 #ffeb00, 0 0.25em 0.2em 0 #ffeb00, 0.25em 0 0.2em 0 #ffeb00, -0.25em 0 0.2em 0 #ffeb00;
}
}
@keyframes box-shadow-lev {
0% {
box-shadow: -0.45em 0.2em 0 #ffeb00, 0 0.45em 0.2em 0 #ffeb00, 0.45em 0 0.2em 0 #ffeb00, -0.45em 0 0.2em 0 #ffeb00;
}
25% {
box-shadow: -0.35em 0.2em 0 #ffeb00, 0 0.35em 0.2em 0 #ffeb00, 0.35em 0 0.2em 0 #ffeb00, -0.35em 0 0.2em 0 #ffeb00;
}
50% {
box-shadow: -0.25em 0.2em 0 #ffeb00, 0 0.25em 0.2em 0 #ffeb00, 0.25em 0 0.2em 0 #ffeb00, -0.25em 0 0.2em 0 #ffeb00;
}
}
@-webkit-keyframes travel-lev {
0% {
box-shadow: inset 0 0 0 0 #ffe13f, 0 0 0 0 #ffe766, 0 0 0 0 #ffe13f, 0 0 0 0 gold, 0 0 0 0 #ffe13f, inset -0.1em 0 0.3em 0.05em gold;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
20% {
box-shadow: inset -0.1em 0 0 0.05em #ffe13f, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe13f, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe13f, inset -0.1em 0 0.3em 0.05em gold;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
70% {
box-shadow: inset -0.1em 0 0 0.05em #ffe13f, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe13f, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe13f, inset -0.1em 0 0.3em 0.05em gold;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
100% {
box-shadow: inset -0.1em 0 0 0.05em #ffe13f, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe13f, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe13f, inset -0.1em 0 0.3em 0.05em gold;
opacity: 0;
-webkit-transform: scale(30) translateX(0%) translateY(0%);
transform: scale(30) translateX(0%) translateY(0%);
}
}
@keyframes travel-lev {
0% {
box-shadow: inset 0 0 0 0 #ffe13f, 0 0 0 0 #ffe766, 0 0 0 0 #ffe13f, 0 0 0 0 gold, 0 0 0 0 #ffe13f, inset -0.1em 0 0.3em 0.05em gold;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
20% {
box-shadow: inset -0.1em 0 0 0.05em #ffe13f, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe13f, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe13f, inset -0.1em 0 0.3em 0.05em gold;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
70% {
box-shadow: inset -0.1em 0 0 0.05em #ffe13f, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe13f, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe13f, inset -0.1em 0 0.3em 0.05em gold;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
100% {
box-shadow: inset -0.1em 0 0 0.05em #ffe13f, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe13f, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe13f, inset -0.1em 0 0.3em 0.05em gold;
opacity: 0;
-webkit-transform: scale(30) translateX(0%) translateY(0%);
transform: scale(30) translateX(0%) translateY(0%);
}
}
.spell.avada {
background: limegreen;
}
.spell.avada:before,
.spell.avada:after {
background: chartreuse;
}
.spell.avada.build:before,
.spell.avada.build:after {
background: limegreen;
box-shadow: 0 -0.24641em 0.2em 0.05em chartreuse, -0.2em 0.07321em 0.2em 0.05em chartreuse, 0.2em 0.07321em 0.2em 0.05em chartreuse;
}
.spell.avada.build:after {
-webkit-animation-name: rotate, box-shadow-ava;
animation-name: rotate, box-shadow-ava;
}
.spell.avada.travel {
-webkit-animation-name: travel-ava;
animation-name: travel-ava;
box-shadow: inset -0.1em 0 0 0.05em #65d965, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65d965, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65d965, inset -0.1em 0 0.3em 0.05em limegreen;
}
@-webkit-keyframes box-shadow-ava {
0% {
box-shadow: -0.45em 0.2em 0 chartreuse, 0 0.45em 0.2em 0 chartreuse, 0.45em 0 0.2em 0 chartreuse, -0.45em 0 0.2em 0 chartreuse;
}
25% {
box-shadow: -0.35em 0.2em 0 chartreuse, 0 0.35em 0.2em 0 chartreuse, 0.35em 0 0.2em 0 chartreuse, -0.35em 0 0.2em 0 chartreuse;
}
50% {
box-shadow: -0.25em 0.2em 0 chartreuse, 0 0.25em 0.2em 0 chartreuse, 0.25em 0 0.2em 0 chartreuse, -0.25em 0 0.2em 0 chartreuse;
}
}
@keyframes box-shadow-ava {
0% {
box-shadow: -0.45em 0.2em 0 chartreuse, 0 0.45em 0.2em 0 chartreuse, 0.45em 0 0.2em 0 chartreuse, -0.45em 0 0.2em 0 chartreuse;
}
25% {
box-shadow: -0.35em 0.2em 0 chartreuse, 0 0.35em 0.2em 0 chartreuse, 0.35em 0 0.2em 0 chartreuse, -0.35em 0 0.2em 0 chartreuse;
}
50% {
box-shadow: -0.25em 0.2em 0 chartreuse, 0 0.25em 0.2em 0 chartreuse, 0.25em 0 0.2em 0 chartreuse, -0.25em 0 0.2em 0 chartreuse;
}
}
@-webkit-keyframes travel-ava {
0% {
box-shadow: inset 0 0 0 0 #65d965, 0 0 0 0 #84e184, 0 0 0 0 #65d965, 0 0 0 0 limegreen, 0 0 0 0 #65d965, inset -0.1em 0 0.3em 0.05em limegreen;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
20% {
box-shadow: inset -0.1em 0 0 0.05em #65d965, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65d965, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65d965, inset -0.1em 0 0.3em 0.05em limegreen;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
70% {
box-shadow: inset -0.1em 0 0 0.05em #65d965, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65d965, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65d965, inset -0.1em 0 0.3em 0.05em limegreen;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
100% {
box-shadow: inset -0.1em 0 0 0.05em #65d965, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65d965, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65d965, inset -0.1em 0 0.3em 0.05em limegreen;
opacity: 0;
-webkit-transform: scale(30) translateX(0%) translateY(0%);
transform: scale(30) translateX(0%) translateY(0%);
}
}
@keyframes travel-ava {
0% {
box-shadow: inset 0 0 0 0 #65d965, 0 0 0 0 #84e184, 0 0 0 0 #65d965, 0 0 0 0 limegreen, 0 0 0 0 #65d965, inset -0.1em 0 0.3em 0.05em limegreen;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
20% {
box-shadow: inset -0.1em 0 0 0.05em #65d965, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65d965, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65d965, inset -0.1em 0 0.3em 0.05em limegreen;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
70% {
box-shadow: inset -0.1em 0 0 0.05em #65d965, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65d965, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65d965, inset -0.1em 0 0.3em 0.05em limegreen;
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
}
100% {
box-shadow: inset -0.1em 0 0 0.05em #65d965, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65d965, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65d965, inset -0.1em 0 0.3em 0.05em limegreen;
opacity: 0;
-webkit-transform: scale(30) translateX(0%) translateY(0%);
transform: scale(30) translateX(0%) translateY(0%);
}
}
.spell:before,
.spell:after {
border-radius: 50%;
content: "";
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.spell.build {
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
.spell.build:before,
.spell.build:after {
-webkit-animation: rotate 0.5s linear infinite;
animation: rotate 0.5s linear infinite;
height: 0.4em;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: 0.4em;
}
.spell.build:after {
-webkit-animation-delay: -1s, 0;
animation-delay: -1s, 0;
-webkit-animation-direction: reverse, alternate;
animation-direction: reverse, alternate;
-webkit-animation-duration: 0.3s, 0.4s;
animation-duration: 0.3s, 0.4s;
height: 0.2em;
width: 0.2em;
}
.spell.travel {
-webkit-animation: 0.3s ease-in forwards;
animation: 0.3s ease-in forwards;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0) translateX(-50%) translateY(-50%);
transform: rotate(0) translateX(-50%) translateY(-50%);
}
to {
-webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);
transform: rotate(360deg) translateX(-50%) translateY(-50%);
}
}
@keyframes rotate {
from {
-webkit-transform: rotate(0) translateX(-50%) translateY(-50%);
transform: rotate(0) translateX(-50%) translateY(-50%);
}
to {
-webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);
transform: rotate(360deg) translateX(-50%) translateY(-50%);
}
}
.opponent {
box-shadow: inset 0 -5px 0 0 black;
margin: 150px 0 0;
position: absolute;
right: 0;
width: 230px;
}
figure {
display: inline-block;
font-size: 30px;
margin: 0.8em 2.2em 3em;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transition: -webkit-transform 0.4s ease-in;
transition: transform 0.4s ease-in;
}
.body {
height: 2em;
position: relative;
width: 2px;
}
.body,
.body div {
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
background: dodgerblue;
-webkit-transition: all 0.3 ease-in-out;
transition: all 0.3 ease-in-out;
}
.head {
border-radius: 50%;
height: 0.8em;
left: 0;
position: absolute;
top: 0;
-webkit-transform: translateX(-50%) translateY(-100%);
-ms-transform: translateX(-50%) translateY(-100%);
transform: translateX(-50%) translateY(-100%);
width: 0.8em;
}
.head:before,
.head:after {
background: black;
border-radius: 50%;
box-shadow: 0 0 0 0.03em black, inset -0.01em 0 0 0.06em dodgerblue;
content: "";
height: 0.2em;
left: 0.11em;
position: absolute;
top: 0.16em;
width: 0.2em;
}
.head:after {
left: auto;
right: 0.11em;
}
.arms,
.arm,
.legs,
.leg {
left: 0;
position: absolute;
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
width: 2px;
}
.arms {
top: 0.15em;
-webkit-transition: -webkit-transform 0.4s ease-in;
transition: transform 0.4s ease-in;
}
.arm {
height: 2.2em;
}
.arm.left {
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
}
.arm.right {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.wand {
background: brown !important;
bottom: 0;
height: 1em;
position: absolute;
-webkit-transform: rotate(-105deg);
-ms-transform: rotate(-105deg);
transform: rotate(-105deg);
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom center;
width: 2px;
}
.legs {
top: 2em;
}
.leg {
height: 3em;
}
.leg.left {
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
.leg.right {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
figure.exp div.body {
-webkit-transform-origin: 0.5em 4.85em;
-ms-transform-origin: 0.5em 4.85em;
transform-origin: 0.5em 4.85em;
}
figure.exp div.head {
-webkit-transform: rotate(15deg) translateX(-50%) translateY(-77%);
-ms-transform: rotate(15deg) translateX(-50%) translateY(-77%);
transform: rotate(15deg) translateX(-50%) translateY(-77%);
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
-webkit-transition: -webkit-transform 0.2s ease-out 2.8s;
transition: transform 0.2s ease-out 2.8s;
}
figure.exp div.head:before,
figure.exp div.head:after {
-webkit-animation: exp-eyes 3s cubic-bezier(0.15, 0.5, 0.85, 0.5) forwards;
animation: exp-eyes 3s cubic-bezier(0.15, 0.5, 0.85, 0.5) forwards;
}
figure.exp div.arms {
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-transition: -webkit-transform 1.5s cubic-bezier(0.15, 0.5, 0.85, 0.5) 0.1s;
transition: transform 1.5s cubic-bezier(0.15, 0.5, 0.85, 0.5) 0.1s;
}
figure.exp div.arm.right {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
-webkit-transition: -webkit-transform 0.2s ease-out 2.8s;
transition: transform 0.2s ease-out 2.8s;
}
figure.exp div.wand {
-webkit-animation: exp-wand 1.8s cubic-bezier(0.15, 0.5, 0.85, 0.5) 0.1s forwards;
animation: exp-wand 1.8s cubic-bezier(0.15, 0.5, 0.85, 0.5) 0.1s forwards;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
}
figure.exp.exp-bend div {
-webkit-transition: -webkit-transform 0.6s ease-out 0.2s;
transition: transform 0.6s ease-out 0.2s;
}
figure.exp.exp-bend div.body {
-webkit-transform: rotate(115deg);
-ms-transform: rotate(115deg);
transform: rotate(115deg);
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom center;
}
figure.exp.exp-bend div.head {
-webkit-transform: rotate(0deg) translateX(-50%) translateY(-100%);
-ms-transform: rotate(0deg) translateX(-50%) translateY(-100%);
transform: rotate(0deg) translateX(-50%) translateY(-100%);
}
figure.exp.exp-bend div.arm.left {
-webkit-transform: rotate(-85deg);
-ms-transform: rotate(-85deg);
transform: rotate(-85deg);
}
figure.exp.exp-bend div.arm.right {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
figure.exp.exp-bend div.legs {
-webkit-transform: rotate(-115deg);
-ms-transform: rotate(-115deg);
transform: rotate(-115deg);
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
}
figure.exp.exp-bend div.leg.left {
-webkit-transform: rotate(55deg);
-ms-transform: rotate(55deg);
transform: rotate(55deg);
-webkit-transition: -webkit-transform 0.3s ease-out 0.2s;
transition: transform 0.3s ease-out 0.2s;
}
figure.exp.exp-return div {
-webkit-transition: -webkit-transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
figure.exp.exp-return div.body {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom center;
}
figure.exp.exp-return div.arms {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
figure.exp.exp-return div.arm.left {
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
}
figure.exp.exp-return div.arm.right {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
figure.exp.exp-return div.wand {
-webkit-animation: exp-r-wand 0.6s ease-out forwards;
animation: exp-r-wand 0.6s ease-out forwards;
opacity: 1;
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom center;
}
figure.exp.exp-return div.legs {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
}
figure.exp.exp-return div.leg.left {
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
figure.stu div.body {
-webkit-animation: stu-body 2s linear 0.2s forwards;
animation: stu-body 2s linear 0.2s forwards;
left: 1em;
-webkit-transform-origin: 0.5em 4.85em;
-ms-transform-origin: 0.5em 4.85em;
transform-origin: 0.5em 4.85em;
-webkit-transition: left 0.2s linear 0.2s;
transition: left 0.2s linear 0.2s;
}
figure.stu div.head:before,
figure.stu div.head:after {
-webkit-animation: stu-eyes 0.2s linear 0.2s forwards;
animation: stu-eyes 0.2s linear 0.2s forwards;
box-shadow: 0 -0.01em 0 0.01em black, inset 0.01em 0 0 0.06em dodgerblue;
}
figure.stu div.arm.left {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
-webkit-transition: -webkit-transform 0.2s ease-in 0.2s;
transition: transform 0.2s ease-in 0.2s;
}
figure.stu div.arm.right {
-webkit-transform: rotate(-105deg);
-ms-transform: rotate(-105deg);
transform: rotate(-105deg);
-webkit-transition: -webkit-transform 0.2s ease-in 0.2s;
transition: transform 0.2s ease-in 0.2s;
}
figure.stu.stu-return div.body {
left: 0;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
figure.stu.stu-return div.head:before,
figure.stu.stu-return div.head:after {
-webkit-animation: stu-eyes 0.5s linear reverse forwards;
animation: stu-eyes 0.5s linear reverse forwards;
}
figure.stu.stu-return div.arm {
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
figure.stu.stu-return div.arm.left {
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
}
figure.stu.stu-return div.arm.right {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
figure.stu.stu-return div.leg {
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
figure.stu.stu-return div.leg.left {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
figure.stu.stu-return div.leg.right {
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
figure.lev {
-webkit-transform: rotate(-170deg) translateY(4.2em);
-ms-transform: rotate(-170deg) translateY(4.2em);
transform: rotate(-170deg) translateY(4.2em);
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom center;
}
figure.lev div.body {
-webkit-animation: lev-body 1s ease-in-out 0.2s infinite alternate forwards running;
animation: lev-body 1s ease-in-out 0.2s infinite alternate forwards running;
-webkit-transform-origin: 0.5em 4.85em;
-ms-transform-origin: 0.5em 4.85em;
transform-origin: 0.5em 4.85em;
-webkit-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
figure.lev div.head:before,
figure.lev div.head:after {
-webkit-transform: rotate(90deg) scaleX(0.7);
-ms-transform: rotate(90deg) scaleX(0.7);
transform: rotate(90deg) scaleX(0.7);
-webkit-transition: -webkit-transform 0.3s ease-in 0.2s;
transition: transform 0.3s ease-in 0.2s;
}
figure.lev div.arms {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
figure.lev div.arm {
-webkit-animation: 1s ease-in-out -0.3s infinite alternate forwards running;
animation: 1s ease-in-out -0.3s infinite alternate forwards running;
}
figure.lev div.arm.left {
-webkit-animation-name: lev-arms-left;
animation-name: lev-arms-left;
}
figure.lev div.arm.right {
-webkit-animation-name: lev-arms-right;
animation-name: lev-arms-right;
}
figure.lev div.wand {
-webkit-transform: rotate(-165deg);
-ms-transform: rotate(-165deg);
transform: rotate(-165deg);
-webkit-transition: -webkit-transform 0.2s ease-in 0.2s;
transition: transform 0.2s ease-in 0.2s;
}
figure.lev div.leg.left {
-webkit-animation: lev-legs 0.2s ease-in 0.2s forwards running;
animation: lev-legs 0.2s ease-in 0.2s forwards running;
}
figure.ava {
-webkit-transform: rotate(82deg) translateX(1.12em) translateY(2em);
-ms-transform: rotate(82deg) translateX(1.12em) translateY(2em);
transform: rotate(82deg) translateX(1.12em) translateY(2em);
-webkit-transform-origin: 1em 4.85em;
-ms-transform-origin: 1em 4.85em;
transform-origin: 1em 4.85em;
-webkit-transition: -webkit-transform 1s cubic-bezier(0.85, 0.3, 0.95, 0.7) 0.2s;
transition: transform 1s cubic-bezier(0.85, 0.3, 0.95, 0.7) 0.2s;
}
figure.ava div.head:before,
figure.ava div.head:after {
-webkit-animation: ava-eyes 1.2s linear 0.2s forwards;
animation: ava-eyes 1.2s linear 0.2s forwards;
}
figure.ava div.arms {
-webkit-animation: ava-arms 0.5s ease-out 0.2s 2 alternate forwards;
animation: ava-arms 0.5s ease-out 0.2s 2 alternate forwards;
}
figure.ava div.arm,
figure.ava div.leg,
figure.ava div.wand {
-webkit-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-transition: -webkit-transform 1s ease-in 0.2s;
transition: transform 1s ease-in 0.2s;
}
figure.ava div.leg {
-webkit-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
}
figure.ava div.wand {
-webkit-transform: rotate(-174deg);
-ms-transform: rotate(-174deg);
transform: rotate(-174deg);
}
figure.ava div.legs {
-webkit-animation: ava-legs 0.5s ease-out 0.2s 2 alternate forwards;
animation: ava-legs 0.5s ease-out 0.2s 2 alternate forwards;
}
@-webkit-keyframes exp-eyes {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
10% {
-webkit-transform: scaleY(1) rotate(0);
transform: scaleY(1) rotate(0);
}
50% {
-webkit-transform: scaleY(1) rotate(245deg);
transform: scaleY(1) rotate(245deg);
}
90% {
border-radius: 50%;
-webkit-transform: scaleY(1) rotate(245deg);
transform: scaleY(1) rotate(245deg);
}
100% {
border-radius: 50% 50% 0 0;
-webkit-transform: scaleY(0.4) rotate(180deg);
transform: scaleY(0.4) rotate(180deg);
}
}
@keyframes exp-eyes {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
10% {
-webkit-transform: scaleY(1) rotate(0);
transform: scaleY(1) rotate(0);
}
50% {
-webkit-transform: scaleY(1) rotate(245deg);
transform: scaleY(1) rotate(245deg);
}
90% {
border-radius: 50%;
-webkit-transform: scaleY(1) rotate(245deg);
transform: scaleY(1) rotate(245deg);
}
100% {
border-radius: 50% 50% 0 0;
-webkit-transform: scaleY(0.4) rotate(180deg);
transform: scaleY(0.4) rotate(180deg);
}
}
@-webkit-keyframes exp-wand {
0% {
bottom: 0;
left: 0;
-webkit-transform: rotate(-105deg);
transform: rotate(-105deg);
}
30% {
bottom: 15em;
left: -4em;
-webkit-transform: rotate(1160deg);
transform: rotate(1160deg);
}
60% {
bottom: 15em;
left: 0.5em;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
90% {
bottom: -2.6em;
left: 4em;
-webkit-transform: rotate(1160deg);
transform: rotate(1160deg);
}
95% {
bottom: -1.6em;
left: 3.5em;
-webkit-transform: rotate(620deg);
transform: rotate(620deg);
}
99.9% {
bottom: -2.6em;
left: 3em;
opacity: 1;
-webkit-transform: rotate(80deg);
transform: rotate(80deg);
}
100% {
bottom: 0;
left: 0;
opacity: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes exp-wand {
0% {
bottom: 0;
left: 0;
-webkit-transform: rotate(-105deg);
transform: rotate(-105deg);
}
30% {
bottom: 15em;
left: -4em;
-webkit-transform: rotate(1160deg);
transform: rotate(1160deg);
}
60% {
bottom: 15em;
left: 0.5em;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
90% {
bottom: -2.6em;
left: 4em;
-webkit-transform: rotate(1160deg);
transform: rotate(1160deg);
}
95% {
bottom: -1.6em;
left: 3.5em;
-webkit-transform: rotate(620deg);
transform: rotate(620deg);
}
99.9% {
bottom: -2.6em;
left: 3em;
opacity: 1;
-webkit-transform: rotate(80deg);
transform: rotate(80deg);
}
100% {
bottom: 0;
left: 0;
opacity: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@-webkit-keyframes exp-r-wand {
from {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(-105deg);
transform: rotate(-105deg);
}
}
@keyframes exp-r-wand {
from {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(-105deg);
transform: rotate(-105deg);
}
}
@-webkit-keyframes stu-body {
0% {
-webkit-transform: rotate(0) translateX(0) translateY(0);
transform: rotate(0) translateX(0) translateY(0);
}
10% {
-webkit-transform: rotate(10deg) translateX(0) translateY(-1em);
transform: rotate(10deg) translateX(0) translateY(-1em);
}
30% {
-webkit-transform: rotate(10deg) translateX(0) translateY(-1em);
transform: rotate(10deg) translateX(0) translateY(-1em);
}
40% {
-webkit-transform: rotate(10deg) translateX(0) translateY(0);
transform: rotate(10deg) translateX(0) translateY(0);
}
52% {
-webkit-transform: rotate(0deg) translateX(0) translateY(-0.6em);
transform: rotate(0deg) translateX(0) translateY(-0.6em);
}
62% {
-webkit-transform: rotate(-7.5deg) translateX(0) translateY(0);
transform: rotate(-7.5deg) translateX(0) translateY(0);
}
72% {
-webkit-transform: rotate(0deg) translateX(0) translateY(-0.3em);
transform: rotate(0deg) translateX(0) translateY(-0.3em);
}
80% {
-webkit-transform: rotate(5deg) translateX(0) translateY(0);
transform: rotate(5deg) translateX(0) translateY(0);
}
88% {
-webkit-transform: rotate(0deg) translateX(0) translateY(-0.1em);
transform: rotate(0deg) translateX(0) translateY(-0.1em);
}
94% {
-webkit-transform: rotate(-2.5deg) translateX(0) translateY(0);
transform: rotate(-2.5deg) translateX(0) translateY(0);
}
100% {
-webkit-transform: rotate(0) translateX(0) translateY(0);
transform: rotate(0) translateX(0) translateY(0);
}
}
@keyframes stu-body {
0% {
-webkit-transform: rotate(0) translateX(0) translateY(0);
transform: rotate(0) translateX(0) translateY(0);
}
10% {
-webkit-transform: rotate(10deg) translateX(0) translateY(-1em);
transform: rotate(10deg) translateX(0) translateY(-1em);
}
30% {
-webkit-transform: rotate(10deg) translateX(0) translateY(-1em);
transform: rotate(10deg) translateX(0) translateY(-1em);
}
40% {
-webkit-transform: rotate(10deg) translateX(0) translateY(0);
transform: rotate(10deg) translateX(0) translateY(0);
}
52% {
-webkit-transform: rotate(0deg) translateX(0) translateY(-0.6em);
transform: rotate(0deg) translateX(0) translateY(-0.6em);
}
62% {
-webkit-transform: rotate(-7.5deg) translateX(0) translateY(0);
transform: rotate(-7.5deg) translateX(0) translateY(0);
}
72% {
-webkit-transform: rotate(0deg) translateX(0) translateY(-0.3em);
transform: rotate(0deg) translateX(0) translateY(-0.3em);
}
80% {
-webkit-transform: rotate(5deg) translateX(0) translateY(0);
transform: rotate(5deg) translateX(0) translateY(0);
}
88% {
-webkit-transform: rotate(0deg) translateX(0) translateY(-0.1em);
transform: rotate(0deg) translateX(0) translateY(-0.1em);
}
94% {
-webkit-transform: rotate(-2.5deg) translateX(0) translateY(0);
transform: rotate(-2.5deg) translateX(0) translateY(0);
}
100% {
-webkit-transform: rotate(0) translateX(0) translateY(0);
transform: rotate(0) translateX(0) translateY(0);
}
}
@-webkit-keyframes stu-eyes {
from {
box-shadow: 0 0 0 0.03em black, inset -0.01em 0 0 0.06em dodgerblue;
}
to {
box-shadow: 0 0 0 0.03em black, inset 0 0 0 0.06em dodgerblue;
}
}
@keyframes stu-eyes {
from {
box-shadow: 0 0 0 0.03em black, inset -0.01em 0 0 0.06em dodgerblue;
}
to {
box-shadow: 0 0 0 0.03em black, inset 0 0 0 0.06em dodgerblue;
}
}
@-webkit-keyframes ava-eyes {
0% {
border-radius: 50%;
box-shadow: 0 0 0 0.03em black, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset -0.01em 0 0 0.06em dodgerblue;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
70% {
border-radius: 50%;
box-shadow: 0 0 0 0.03em black, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset -0.01em 0 0 0.06em dodgerblue;
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
70.01% {
border-radius: 0;
box-shadow: 0 0 0 0 black, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset -0.01em 0 0 0.06em dodgerblue;
-webkit-transform: rotate(45deg) scaleX(0.1) scaleY(0.1);
transform: rotate(45deg) scaleX(0.1) scaleY(0.1);
}
100% {
border-radius: 0;
box-shadow: 0 0 0 0 black, 0.23em 0 0 0 black, 0 0.23em 0 0 black, -0.23em 0 0 0 black, 0 -0.23em 0 0 black;
-webkit-transform: rotate(45deg) scaleX(0.4) scaleY(0.4);
transform: rotate(45deg) scaleX(0.4) scaleY(0.4);
}
}
@keyframes ava-eyes {
0% {
border-radius: 50%;
box-shadow: 0 0 0 0.03em black, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset -0.01em 0 0 0.06em dodgerblue;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
70% {
border-radius: 50%;
box-shadow: 0 0 0 0.03em black, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset -0.01em 0 0 0.06em dodgerblue;
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
70.01% {
border-radius: 0;
box-shadow: 0 0 0 0 black, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset -0.01em 0 0 0.06em dodgerblue;
-webkit-transform: rotate(45deg) scaleX(0.1) scaleY(0.1);
transform: rotate(45deg) scaleX(0.1) scaleY(0.1);
}
100% {
border-radius: 0;
box-shadow: 0 0 0 0 black, 0.23em 0 0 0 black, 0 0.23em 0 0 black, -0.23em 0 0 0 black, 0 -0.23em 0 0 black;
-webkit-transform: rotate(45deg) scaleX(0.4) scaleY(0.4);
transform: rotate(45deg) scaleX(0.4) scaleY(0.4);
}
}
@-webkit-keyframes ava-arms {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
}
@keyframes ava-arms {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
}
@-webkit-keyframes ava-legs {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
}
@keyframes ava-legs {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
}
@-webkit-keyframes lev-body {
from {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
to {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
}
@keyframes lev-body {
from {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
to {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
}
@-webkit-keyframes lev-arms-left {
from {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
to {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
}
@keyframes lev-arms-left {
from {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
to {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
}
@-webkit-keyframes lev-arms-right {
from {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes lev-arms-right {
from {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes lev-legs {
from {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
to {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
}
@keyframes lev-legs {
from {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
to {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
}
扫一扫
1817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
