Browse Source

optimize animation position

main
Rieko-wang 2 years ago
parent
commit
810b96d0a6
  1. 16
      css/style.css

16
css/style.css

@ -312,17 +312,17 @@ img {
.font-animation-box { .font-animation-box {
position: absolute; position: absolute;
/* background-color: rgba(255, 255, 255, 0.7); */ background-color: rgba(255, 255, 255, 0.7);
width: 30%; width: 30%;
left: 25%; left: 25%;
height: 3.2rem; height: 3rem;
top: 0.5rem; top: 0.5rem;
font-size: 1.3rem; font-size: 1.3rem;
color: #fff; color: #fff;
overflow: hidden; overflow: hidden;
} }
.font-animation-box .box-list div { .font-animation-box .box-list div {
height: 3.2rem; height: 3rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -330,13 +330,13 @@ img {
width: 100%; width: 100%;
height: 6.4rem; height: 6.4rem;
position: absolute; position: absolute;
top: 3.2rem; top: 3rem;
animation: fonMoveTop 5s infinite backwards; animation: fonMoveTop 5s infinite backwards;
} }
@keyframes fonMoveTop { @keyframes fonMoveTop {
0% { 0% {
top: 3.2rem; top: 3rem;
} }
10% { 10% {
top: 0; top: 0;
@ -345,12 +345,12 @@ img {
top: 0; top: 0;
} }
60% { 60% {
top: -3.2rem; top: -3rem;
} }
99.99999% { 99.99999% {
top: -3.2rem; top: -3rem;
} }
100% { 100% {
top: 3.2rem; top: 3rem;
} }
} }

Loading…
Cancel
Save