CSS
语言：
CSSSCSS
确定
body {
margin: 0;
background-color: #080d11;
overflow: hidden;
width: 100%;
}
section {
padding: 25% 25% 0 0;
/*seconds*/
}
div {
float: right;
width: 100px;
height: 100px;
margin: 5% 0 0, 0;
padding: 0;
transform: skew(-10deg) scale(0.5, 0.45);
/*milliseconds*/
}
div:nth-child(1) {
width: 55px;
height: 60px;
margin-top: 56px;
margin-left: 15px;
transform: skew(-10deg) scale(0.3, 0.27);
/*decimal*/
}
div:nth-child(1):before {
display: block;
top: 260px;
left: -55px;
width: 34px;
height: 31px;
border-radius: 10px;
content: "";
/* segments && decimal */
}
p,
p:before,
p:after,
div:nth-child(1):before {
position: absolute;
margin: 0;
padding: 0;
background-color: #0618e0;
box-shadow: 2px 2px rgba(4, 36, 174, .25), 5px 5px rgba(4, 36, 174, .2), 8px 8px rgba(4, 36, 174, .15), 11px 11px rgba(4, 36, 174, .1), 14px 14px rgba(4, 36, 174, .05);
/*digits*/
}
p {
width: 29px;
height: 100px;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
p:nth-child(4) {
height: 110px;
}
p:before,
p:after {
content: "";
display: block;
width: 29px;
height: 29px;
transform: rotate(45deg);
}
p:before {
top: -15px;
}
p:after {
bottom: -15px;
}
p:nth-child(4):before,
p:nth-child(4):after {
left: 4px;
width: 20px;
height: 20px;
}
p:nth-child(4):before {
top: -10px;
}
p:nth-child(4):after {
bottom: -10px;
/*found that the #.99 opacity definition for each frame is necessary to keep the opacity constant & accurate through number changes*/
}
@keyframes one {
0% {
opacity: 1;
}
9.99% {
opacity: 1;
}
10% {
opacity: 0.1;
}
39.99% {
opacity: 0.1;
}
40% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes two {
0% {
opacity: 1;
}
9.99% {
opacity: 1;
}
10% {
opacity: 0.1;
}
19.99% {
opacity: 0.1;
}
20% {
opacity: 1;
}
39.99% {
opacity: 1;
}
40% {
opacity: 0.1;
}
49.99% {
opacity: 0.1;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes three {
0% {
opacity: 1;
}
49.99% {
opacity: 1;
}
50% {
opacity: 0.1;
}
69.99% {
opacity: 0.1;
}
70% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes four {
0% {
opacity: 0.1;
}
19.99% {
opacity: 0.1;
}
20% {
opacity: 1;
}
69.99% {
opacity: 1;
}
70% {
opacity: 0.1;
}
79.99% {
opacity: 0.1;
}
80% {
opacity: 1;
}
99.99% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
@keyframes five {
0% {
opacity: 1;
}
9.99% {
opacity: 1;
}
10% {
opacity: 0.1;
}
19.99% {
opacity: 0.1;
}
20% {
opacity: 1;
}
29.99% {
opacity: 1;
}
30% {
opacity: 0.1;
}
59.99% {
opacity: 0.1;
}
60% {
opacity: 1;
}
69.99% {
opacity: 1;
}
70% {
opacity: 0.1;
}
79.99% {
opacity: 0.1;
}
80% {
opacity: 1;
}
89.99% {
opacity: 1;
}
90% {
opacity: 0.1;
}
99.99% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
@keyframes six {
0% {
opacity: 1;
}
9.99% {
opacity: 1;
}
10% {
opacity: 0.1;
}
19.99% {
opacity: 0.1;
}
20% {
opacity: 1;
}
39.99% {
opacity: 1;
}
40% {
opacity: 0.1;
}
49.99% {
opacity: 0.1;
}
50% {
opacity: 1;
}
69.99% {
opacity: 1;
}
70% {
opacity: 0.1;
}
79.99% {
opacity: 0.1;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes seven {
/*duration*/
0% {
opacity: 1;
}
19.99% {
opacity: 1;
}
20% {
opacity: 0.1;
}
29.99% {
opacity: 0.1;
}
30% {
opacity: 1;
}
100% {
opacity: 1;
}
}
div:nth-child(1) p {
animation-duration: 1s;
}
div:nth-child(2) p {
animation-duration: 10s;
}
div:nth-child(3) p {
animation-duration: 100s;
}
div:nth-child(4) p {
animation-duration: 1000s;
/*segments*/
}
p:nth-child(1) {
top: 0;
left: 0;
animation-name: one;
}
p:nth-child(2) {
top: -70px;
left: 70px;
animation-name: two;
}
p:nth-child(3) {
top: 0;
left: 140px;
animation-name: three;
}
p:nth-child(4) {
top: 70px;
left: 70px;
animation-name: four;
}
p:nth-child(5) {
top: 150px;
left: 0;
animation-name: five;
}
p:nth-child(6) {
top: 220px;
left: 70px;
animation-name: six;
}
p:nth-child(7) {
top: 150px;
left: 140px;
animation-name: seven;
/*horizontal rotation */
}
p:nth-child(even) {
transform: rotate(90deg);
/*top & left side borders*/
}
p:nth-child(1):before,
p:nth-child(1):after,
p:nth-child(2):before,
p:nth-child(2):after,
p:nth-child(5):before,
p:nth-child(5):after {
left: -6px;
border-radius: 0 0 0 99px;
/*bottom & right borders */
}
p:nth-child(3):before,
p:nth-child(3):after,
p:nth-child(6):before,
p:nth-child(6):after,
p:nth-child(7):before,
p:nth-child(7):after {
right: -6px;
border-radius: 0 99px 0 0;
/*pause / resume text*/
}
#pause,
#resume {
font-family: 'Orbitron', Arial;
font-size: 10em;
text-decoration: none;
line-height: 50px;
margin-left: -845px;
transition: all 0.5s ease;
}
div:nth-child(5) {
display: none;
visibility: hidden;
}
#counter:target p {
animation-play-state: paused;
}
#counter:target div:nth-child(5) {
display: inline;
visibility: visible;
}
#counter:target div:nth-child(6) {
display: none;
}
#pause {
color: #5fd411;
text-shadow: 1px 6px rgba(89, 165, 13, .4), 2px 8px rgba(89, 165, 13, .35), 3px 10px rgba(89, 165, 13, .3), 4px 12px rgba(89, 165, 13, .2), 5px 14px rgba(89, 165, 13, .19), 6px 16px rgba(89, 165, 13, .18), 7px 18px rgba(89, 165, 13, .17), 8px 20px rgba(89, 165, 13, .16);
}
#pause:active {
text-shadow: 1px 6px rgba(89, 165, 13, .4), 2px 8px rgba(89, 165, 13, .35), 3px 10px rgba(89, 165, 13, .3), 4px 12px rgba(89, 165, 13, .2), 5px 14px rgba(89, 165, 13, .19);
}
#resume {
color: #f9f61f;
text-shadow: 1px 6px rgba(224, 198, 6, .4), 2px 8px rgba(224, 198, 6, .35), 3px 10px rgba(224, 198, 6, .3), 4px 12px rgba(224, 198, 6, .2), 5px 14px rgba(224, 198, 6, .19), 6px 16px rgba(224, 198, 6, .18), 7px 18px rgba(224, 198, 6, .17), 8px 20px rgba(224, 198, 6, .16);
}
#resume:active {
text-shadow: 1px 6px rgba(224, 198, 6, .4), 2px 8px rgba(224, 198, 6, .35), 3px 10px rgba(224, 198, 6, .3), 4px 12px rgba(224, 198, 6, .2), 5px 14px rgba(224, 198, 6, .19);
/*Font for the pause/resume text from http://www.fontsquirrel.com/fonts/orbitron*/
}
@font-face {
font-family: 'Orbitron';
font-style: normal;
font-weight: 800;
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/font.woff') format('woff');
}
986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
