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

feat:增加撒花;调整样式

parent 6583f055
...@@ -432,6 +432,14 @@ body { ...@@ -432,6 +432,14 @@ body {
top: -1.85rem; top: -1.85rem;
left: -50%; left: -50%;
transform: translate(0.4rem); 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 { ...@@ -729,11 +737,11 @@ body {
.robot{ .robot{
position: absolute; position: absolute;
width: 2.5rem; width: 2.33rem;
height: 3.98rem; height: 3.72rem;
background: url(../lib/images/robot.png) no-repeat; background: url(../lib/images/robot.png) no-repeat;
background-position: 0rem 0rem; background-position: 0rem 0rem;
background-size: 75rem 3.98rem; background-size: 70rem 3.72rem;
z-index: 400; z-index: 400;
bottom: 0.2rem; bottom: 0.2rem;
left: 0.2rem; left: 0.2rem;
...@@ -742,5 +750,23 @@ body { ...@@ -742,5 +750,23 @@ body {
@keyframes robot{ @keyframes robot{
0% {background-position-x: 0rem; background-position-y: 0rem;} 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 @@ ...@@ -134,6 +134,7 @@
<div class="medal"> <div class="medal">
<img id="medal" src="../lib/images/excellent.png" style="width: 100%;"> <img id="medal" src="../lib/images/excellent.png" style="width: 100%;">
<div id="score" class="val"></div> <div id="score" class="val"></div>
<div class='celebrate'></div>
</div> </div>
<span class="tips">Great!</span> <span class="tips">Great!</span>
<div class='sub-score'> <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