CSS
语言：
CSSSCSS
确定
body {
background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
font-family: 'Roboto', sans-serif;
margin: 0;
height: 100vh;
}
.counter {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.counter.hide {
transform: translate(-50%, -50%) scale(0);
animation: hide .2s ease-out;
}
@keyframes hide {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(0);
}
}
.final {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.final.show {
transform: translate(-50%, -50%) scale(1);
animation: show .3s ease-in;
}
@keyframes show {
0% {
transform: translate(-50%, -50%) scale(0);
}
80% {
transform: translate(-50%, -50%) scale(1.4);
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}
.nums {
color: #3498db;
position: relative;
font-size: 50px;
overflow: hidden;
width: 250px;
height: 50px;
}
.nums span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(120deg);
transform-origin: bottom center;
}
.nums span.in {
transform: translate(-50%, -50%) rotate(0deg);
animation: goIn .5s ease-in-out;
}
.nums span.out {
animation: goOut .5s ease-in-out;
}
@keyframes goIn {
0% {
transform: translate(-50%, -50%) rotate(120deg);
}
30% {
transform: translate(-50%, -50%) rotate(-20deg);
}
60% {
transform: translate(-50%, -50%) rotate(10deg);
}
90%,
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
@keyframes goOut {
0%, 30% {
transform: translate(-50%, -50%) rotate(0deg);
}
60% {
transform: translate(-50%, -50%) rotate(20deg);
}
100% {
transform: translate(-50%, -50%) rotate(-120deg);
}
}
h4 {
font-size: 20px;
margin: 5px;
text-transform: uppercase;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
letter-spacing: 1px;
}
footer i {
color: red;
}
footer a {
color: #3C97BF;
text-decoration: none;
}
4553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
