纯css实现小球滑滑梯动画效果代码
代码语言:html
所属分类:动画
代码描述:纯css实现小球滑滑梯动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --size: 60vh; --borderS: calc(var(--size) / 10); --ballSize: calc(var(--size) / 5); --rightCorrected: calc(var(--size) / 13.33); } * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #181818; } .container { position: relative; -webkit-box-reflect: below 1px linear-gradient(transparent, #0002); } .arc { width: var(--size); height: var(--size); border-radius: 50%; border: var(--borderS) solid transparent; border-bottom-color: #f00; border-right-color: #00f; transform: rotate(45deg); animation: spin 4s ease-in-out infinite; } @keyframes spin { 0%, 100% { transform: rotate(0); } 50% { tra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0