parent
1214cbc109
commit
2150f346ba
4 changed files with 2 additions and 72 deletions
@ -1,15 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
import "./index.scss"; |
|
||||||
|
|
||||||
const CssCountdown = () => { |
|
||||||
return ( |
|
||||||
<div className="wrapper"> |
|
||||||
<span className="box third-number"></span> |
|
||||||
<span className="box second-number"></span> |
|
||||||
<span className="box first-number"></span> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default CssCountdown; |
|
@ -1,53 +0,0 @@ |
|||||||
body { |
|
||||||
background: #262626; |
|
||||||
} |
|
||||||
|
|
||||||
.wrapper { |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
} |
|
||||||
|
|
||||||
.wrapper span { |
|
||||||
color: #fff; |
|
||||||
border: 5px solid #ddd; |
|
||||||
padding: 0 30px; |
|
||||||
border-radius: 25px; |
|
||||||
margin: 0 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.box { |
|
||||||
display: inline-block; |
|
||||||
overflow: hidden; |
|
||||||
height: 1em; |
|
||||||
font-weight: bold; |
|
||||||
font-size: 16em; |
|
||||||
} |
|
||||||
|
|
||||||
.box::after { |
|
||||||
position: relative; |
|
||||||
white-space: pre; |
|
||||||
content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; |
|
||||||
} |
|
||||||
|
|
||||||
.box.first-number:after { |
|
||||||
animation: animate 1s steps(10) infinite; |
|
||||||
} |
|
||||||
|
|
||||||
.box.second-number:after { |
|
||||||
animation: animate 1s steps(10) infinite; |
|
||||||
} |
|
||||||
|
|
||||||
.box.third-number:after { |
|
||||||
animation: animate 10s steps(10) infinite; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes animate { |
|
||||||
0% { |
|
||||||
top: 0; |
|
||||||
} |
|
||||||
100% { |
|
||||||
top: -10em; |
|
||||||
} |
|
||||||
} |
|
Loading…
Reference in new issue