css3获取当前时间并显示,CSS3中关于时间函数的可视化演示

CSS

语言：

CSSSCSS

确定

body {

background: #232a3e;

}

.dot {

width: 50px;

height: 50px;

border-radius: 50%;

background: #ff3048;

position: absolute;

top: 100%;

left: 0%;

margin-top: -50px;

-webkit-animation: Anime 3s cubic-bezier(0.14, 1.14, 0.64, 0) alternate infinite;

animation: Anime 3s cubic-bezier(0.14, 1.14, 0.64, 0) alternate infinite;

}

.wrap {

width: 50px;

position: absolute;

height: 100vh;

left: 0%;

-webkit-animation: Anime2 3s linear alternate infinite;

animation: Anime2 3s linear alternate infinite;

}

@-webkit-keyframes Anime {

0% {

top: 100%;

margin-top: -50px;

}

100% {

top: 0%;

margin-top: 0px;

}

}

@keyframes Anime {

0% {

top: 100%;

margin-top: -50px;

}

100% {

top: 0%;

margin-top: 0px;

}

}

@-webkit-keyframes Anime2 {

0% {

left: 0%;

margin-left: 0px;

}

100% {

left: 100%;

margin-left: -50px;

}

}

@keyframes Anime2 {

0% {

left: 0%;

margin-left: 0px;

}

100% {

left: 100%;

margin-left: -50px;

}

}