js+css实现一个简单的雷达扫描动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现一个简单的雷达扫描动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: grid; height: 100vh; background: black; overflow: hidden; } .clock { position: relative; width: 90vmin; height: 90vmin; margin: auto; } .clock:after { display: block; position: absolute; top: 0; left: calc(50% - 0.5px); right: calc(50% - 0.5px); bottom: 0; background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(transparent), to(white)); background: linear-gradient(white, transparent, white); content: ""; } .hand { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-animation: spinner 1s linear infinite; animation: spinner 1s linear infinite; } @-webkit-keyframes spinner { to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes spinner { to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } .disc { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: 0 0 10vmin rgba(0, 0, 0, 0.2); } .days { -webkit-animation-duration: 31536000s; animation-duration: 31536000s; } .days .disc { background: conic-gradient(black 33%, #3f51b5); top: 0; left: 0; right: 0; bottom: 0; } .hours { -webkit-animation-duration: 86400s; animation-duration: 86400s; } .hours .disc { background: conic-gradient(black 33%, #2196f3); top: 10%; left: 10%; right: 10%; bottom: 10%; } .minutes { -webkit-animation-duration: 3600s; animation-duration: 3600s; } .minutes .disc { background: conic-gradient(black 33%, #4caf50); top: 20%; left: 20%; right: 20%; bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0