星际穿越动画效果
代码语言:html
所属分类:视觉差异
代码描述:星际穿越动画效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @-webkit-keyframes lightspeed { 100% { width: 100vh; } } @keyframes lightspeed { 100% { width: 100vh; } } .center { height: 1px; width: 1px; position: absolute; } body { background-color: #111; min-height: 100vh; position: relative; overflow: hidden; } .star { border: 1px solid transparent; border-radius: 50%; border-top-color: #fff; margin: 0; position: absolute; -webkit-transform-origin: left; transform-origin: left; width: 1px; } .star:nth-child(2n) { -webkit-animation-name: lightspeed; animation-name: lightspeed; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } </style> </head> <body translate="no"> <script id="rendered-js"> function calcCenter() { let center = document.createElement("div"); center.setAttribute("class", "center"); center.style.top = scy + "px"; center.style.left = .........完整代码请登录后点击上方下载按钮下载查看
网友评论0