提交 326bbe1f 编写于 作者: B bayanxing

modify testcase

Signed-off-by: Nbayanxing <bayanxing@kaihongdigi.com>
上级 b31e2d16
...@@ -88,8 +88,9 @@ ...@@ -88,8 +88,9 @@
} }
.ani1{ .ani1{
color: #72ac33; background-color: #72ac33;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 0% 0%; transform-origin: 0% 0%;
animation: ani1Go 3s infinite; animation: ani1Go 3s infinite;
...@@ -102,7 +103,7 @@ ...@@ -102,7 +103,7 @@
opacity:0.3; opacity:0.3;
width:50px; width:50px;
height: 50px; height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); transform:translate(20px) rotate(10deg) scale(0.2);
background-position:10% 10% background-position:10% 10%
} }
30% { 30% {
...@@ -111,7 +112,7 @@ ...@@ -111,7 +112,7 @@
width:70px; width:70px;
height: 70px; height: 70px;
background-position:12% 12%; background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
} }
to { to {
background-color: #6160f7; background-color: #6160f7;
...@@ -123,50 +124,11 @@ ...@@ -123,50 +124,11 @@
} }
} }
.ani2{ .ani2{
color: #ad4e2a; background-color: #ad4e2a;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 2% 3%;
animation-name:ani2Go;
animation-delay:5s;
animation-duration:10s;
animation-iteration-count:4;
animation-timing-function:ease-out;
animation-direction:reverse;
animation-fill-mode:forwards;
animation-play-state:running;
transition:all 0 ease 0;
}
@keyframes ani2Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) translateZ(15px)
rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:translateX(30px) translateY(45px) translateZ(55px)
rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
}
} }
.gradient-container{ .gradient-container{
......
...@@ -209,8 +209,9 @@ ...@@ -209,8 +209,9 @@
} }
.ani1{ .ani1{
color: #72ac33; background-color: #72ac33;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 0% 0%; transform-origin: 0% 0%;
animation: ani1Go 3s infinite; animation: ani1Go 3s infinite;
...@@ -223,7 +224,7 @@ ...@@ -223,7 +224,7 @@
opacity:0.3; opacity:0.3;
width:50px; width:50px;
height: 50px; height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); transform:translate(20px) rotate(10deg) scale(0.2);
background-position:10% 10% background-position:10% 10%
} }
30% { 30% {
...@@ -232,7 +233,7 @@ ...@@ -232,7 +233,7 @@
width:70px; width:70px;
height: 70px; height: 70px;
background-position:12% 12%; background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
} }
to { to {
background-color: #6160f7; background-color: #6160f7;
...@@ -244,52 +245,12 @@ ...@@ -244,52 +245,12 @@
} }
} }
.ani2{ .ani2{
color: #ad4e2a; background-color: #ad4e2a;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 2% 3%;
animation-name:ani2Go;
animation-delay:5s;
animation-duration:10s;
animation-iteration-count:4;
animation-timing-function:ease-out;
animation-direction:reverse;
animation-fill-mode:forwards;
animation-play-state:running;
transition:all 0 ease 0;
}
@keyframes ani2Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) translateZ(15px)
rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:translateX(30px) translateY(45px) translateZ(55px)
rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
}
} }
.gradient-container{ .gradient-container{
flex-direction: column; flex-direction: column;
} }
......
...@@ -209,8 +209,9 @@ ...@@ -209,8 +209,9 @@
} }
.ani1{ .ani1{
color: #72ac33; background-color: #72ac33;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 0% 0%; transform-origin: 0% 0%;
animation: ani1Go 3s infinite; animation: ani1Go 3s infinite;
...@@ -223,7 +224,7 @@ ...@@ -223,7 +224,7 @@
opacity:0.3; opacity:0.3;
width:50px; width:50px;
height: 50px; height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); transform:translate(20px) rotate(10deg) scale(0.2);
background-position:10% 10% background-position:10% 10%
} }
30% { 30% {
...@@ -232,7 +233,7 @@ ...@@ -232,7 +233,7 @@
width:70px; width:70px;
height: 70px; height: 70px;
background-position:12% 12%; background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
} }
to { to {
background-color: #6160f7; background-color: #6160f7;
...@@ -244,50 +245,11 @@ ...@@ -244,50 +245,11 @@
} }
} }
.ani2{ .ani2{
color: #ad4e2a; background-color: #ad4e2a;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 2% 3%;
animation-name:ani2Go;
animation-delay:5s;
animation-duration:10s;
animation-iteration-count:4;
animation-timing-function:ease-out;
animation-direction:reverse;
animation-fill-mode:forwards;
animation-play-state:running;
transition:all 0 ease 0;
}
@keyframes ani2Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) translateZ(15px)
rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:translateX(30px) translateY(45px) translateZ(55px)
rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
}
} }
.gradient-container{ .gradient-container{
......
...@@ -191,8 +191,9 @@ ...@@ -191,8 +191,9 @@
} }
.ani1{ .ani1{
color: #72ac33; background-color: #72ac33;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 0% 0%; transform-origin: 0% 0%;
animation: ani1Go 3s infinite; animation: ani1Go 3s infinite;
...@@ -205,7 +206,7 @@ ...@@ -205,7 +206,7 @@
opacity:0.3; opacity:0.3;
width:50px; width:50px;
height: 50px; height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); transform:translate(20px) rotate(10deg) scale(0.2);
background-position:10% 10% background-position:10% 10%
} }
30% { 30% {
...@@ -214,7 +215,7 @@ ...@@ -214,7 +215,7 @@
width:70px; width:70px;
height: 70px; height: 70px;
background-position:12% 12%; background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
} }
to { to {
background-color: #6160f7; background-color: #6160f7;
...@@ -226,50 +227,11 @@ ...@@ -226,50 +227,11 @@
} }
} }
.ani2{ .ani2{
color: #ad4e2a; background-color: #ad4e2a;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 2% 3%;
animation-name:ani2Go;
animation-delay:5s;
animation-duration:10s;
animation-iteration-count:4;
animation-timing-function:ease-out;
animation-direction:reverse;
animation-fill-mode:forwards;
animation-play-state:running;
transition:all 0 ease 0;
}
@keyframes ani2Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) translateZ(15px)
rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:translateX(30px) translateY(45px) translateZ(55px)
rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
}
} }
.gradient-container{ .gradient-container{
......
...@@ -192,8 +192,9 @@ ...@@ -192,8 +192,9 @@
} }
.ani1{ .ani1{
color: #72ac33; background-color: #72ac33;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 0% 0%; transform-origin: 0% 0%;
animation: ani1Go 3s infinite; animation: ani1Go 3s infinite;
...@@ -206,7 +207,7 @@ ...@@ -206,7 +207,7 @@
opacity:0.3; opacity:0.3;
width:50px; width:50px;
height: 50px; height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); transform:translate(20px) rotate(10deg) scale(0.2);
background-position:10% 10% background-position:10% 10%
} }
30% { 30% {
...@@ -215,7 +216,7 @@ ...@@ -215,7 +216,7 @@
width:70px; width:70px;
height: 70px; height: 70px;
background-position:12% 12%; background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
} }
to { to {
background-color: #6160f7; background-color: #6160f7;
...@@ -227,50 +228,11 @@ ...@@ -227,50 +228,11 @@
} }
} }
.ani2{ .ani2{
color: #ad4e2a; background-color: #ad4e2a;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 2% 3%;
animation-name:ani2Go;
animation-delay:5s;
animation-duration:10s;
animation-iteration-count:4;
animation-timing-function:ease-out;
animation-direction:reverse;
animation-fill-mode:forwards;
animation-play-state:running;
transition:all 0 ease 0;
}
@keyframes ani2Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) translateZ(15px)
rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:translateX(30px) translateY(45px) translateZ(55px)
rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
}
} }
.gradient-container{ .gradient-container{
......
...@@ -47,8 +47,9 @@ ...@@ -47,8 +47,9 @@
} }
.ani1{ .ani1{
color: #72ac33; background-color: #72ac33;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 0% 0%; transform-origin: 0% 0%;
animation: ani1Go 3s infinite; animation: ani1Go 3s infinite;
...@@ -61,7 +62,7 @@ ...@@ -61,7 +62,7 @@
opacity:0.3; opacity:0.3;
width:50px; width:50px;
height: 50px; height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); transform:translate(20px) rotate(10deg) scale(0.2);
background-position:10% 10% background-position:10% 10%
} }
30% { 30% {
...@@ -70,7 +71,7 @@ ...@@ -70,7 +71,7 @@
width:70px; width:70px;
height: 70px; height: 70px;
background-position:12% 12%; background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
} }
to { to {
background-color: #6160f7; background-color: #6160f7;
...@@ -82,50 +83,11 @@ ...@@ -82,50 +83,11 @@
} }
} }
.ani2{ .ani2{
color: #ad4e2a; background-color: #ad4e2a;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 2% 3%;
animation-name:ani2Go;
animation-delay:5s;
animation-duration:10s;
animation-iteration-count:4;
animation-timing-function:ease-out;
animation-direction:reverse;
animation-fill-mode:forwards;
animation-play-state:running;
transition:all 0 ease 0;
}
@keyframes ani2Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) translateZ(15px)
rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:translateX(30px) translateY(45px) translateZ(55px)
rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
}
} }
.gradient-container{ .gradient-container{
......
...@@ -47,8 +47,9 @@ ...@@ -47,8 +47,9 @@
} }
.ani1{ .ani1{
color: #72ac33; background-color: #72ac33;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 0% 0%; transform-origin: 0% 0%;
animation: ani1Go 3s infinite; animation: ani1Go 3s infinite;
...@@ -61,7 +62,7 @@ ...@@ -61,7 +62,7 @@
opacity:0.3; opacity:0.3;
width:50px; width:50px;
height: 50px; height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); transform:translate(20px) rotate(10deg) scale(0.2);
background-position:10% 10% background-position:10% 10%
} }
30% { 30% {
...@@ -70,7 +71,7 @@ ...@@ -70,7 +71,7 @@
width:70px; width:70px;
height: 70px; height: 70px;
background-position:12% 12%; background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
} }
to { to {
background-color: #6160f7; background-color: #6160f7;
...@@ -82,50 +83,11 @@ ...@@ -82,50 +83,11 @@
} }
} }
.ani2{ .ani2{
color: #ad4e2a; background-color: #ad4e2a;
stroke-width: 55px; width: 55px;
height: 55px;
margin: 5px; margin: 5px;
transform-origin: 2% 3%;
animation-name:ani2Go;
animation-delay:5s;
animation-duration:10s;
animation-iteration-count:4;
animation-timing-function:ease-out;
animation-direction:reverse;
animation-fill-mode:forwards;
animation-play-state:running;
transition:all 0 ease 0;
}
@keyframes ani2Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) translateZ(15px)
rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:translateX(30px) translateY(45px) translateZ(55px)
rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
}
} }
.gradient-container{ .gradient-container{
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册