console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=">
<meta http-equiv="X-UA-Compatible" content="">
<title>倒计时</title>
</head>
<body>
<h1>Safari这个贱货</h1>
<div class="count-down"></div>
</body>
</html>
html {
font-size: 10px;
}
body {
font-size: 1.4rem;
background-color: #000;
color: #fff;
}
@property --t {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
@counter-style stop {
system: cyclic;
symbols: "Go";
range: infinite 0;
}
.count-down {
display: flex;
align-items: center;
justify-content: center;
font-family: Consolas, Monaco, monospace;
font-size: 12rem;
position: absolute;
top: 26vh;
left: 0;
right: 0;
margin: auto;
color: #eee;
text-shadow: 0.1rem 0.1rem rgb(0, 0, 0);
}
.count-down::after {
-webkit-animation: countn 5s;
animation: countn 5s;
content: "4";
}
@-webkit-keyframes countn {
0% {
opacity: 1;
transform: scale(5);
}
15% {
content: "4";
opacity: 1;
transform: scale(1);
}
24% {
content: "4";
opacity: 0;
transform: scale(.4);
}
25% {
content: "3";
opacity: 0;
transform: scale(5);
}
40% {
content: "3";
opacity: 1;
transform: scale(1);
}
49% {
content: "3";
opacity: 0;
transform: scale(.4);
}
50% {
content: "2";
opacity: 0;
transform: scale(5);
}
65% {
content: "2";
opacity: 1;
transform: scale(1);
}
74% {
content: "2";
opacity: 0;
transform: scale(.4);
}
75% {
content: "1";
opacity: 0;
transform: scale(5);
}
90% {
content: "1";
opacity: 1;
transform: scale(1);
}
99% {
content: "1";
opacity: 0;
transform: scale(.4);
}
100% {
content: "Go";
opacity: 0;
}
}