Commit 768dca62 authored by Chen Jiping's avatar Chen Jiping

feat:增加撒花;调整样式

parent 6583f055
......@@ -432,6 +432,14 @@ body {
top: -1.85rem;
left: -50%;
transform: translate(0.4rem);
animation: back-tips-ani 2s infinite;
}
@keyframes back-tips-ani {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
......@@ -729,11 +737,11 @@ body {
.robot{
position: absolute;
width: 2.5rem;
height: 3.98rem;
width: 2.33rem;
height: 3.72rem;
background: url(../lib/images/robot.png) no-repeat;
background-position: 0rem 0rem;
background-size: 75rem 3.98rem;
background-size: 70rem 3.72rem;
z-index: 400;
bottom: 0.2rem;
left: 0.2rem;
......@@ -742,5 +750,23 @@ body {
@keyframes robot{
0% {background-position-x: 0rem; background-position-y: 0rem;}
100% {background-position-x: -75rem; background-position-y: 0rem;}
100% {background-position-x: -70rem; background-position-y: 0rem;}
}
.celebrate{
position: absolute;
width: 3.54rem;
height: 2.06rem;
background: url(../lib/images/petal.png) no-repeat;
background-position: 0rem 0rem;
background-size: 63.68rem 2.06rem;
z-index: 400;
bottom: 0rem;
left: -0.65rem;
animation: celebrate 1s steps(18);
}
@keyframes celebrate {
0% {background-position-x: 0rem; background-position-y: 0rem;}
100% {background-position-x: -63.68rem; background-position-y: 0rem;}
}
\ No newline at end of file
......@@ -134,6 +134,7 @@
<div class="medal">
<img id="medal" src="../lib/images/excellent.png" style="width: 100%;">
<div id="score" class="val"></div>
<div class='celebrate'></div>
</div>
<span class="tips">Great!</span>
<div class='sub-score'>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment