anime实现线条组成的圆圈转动动画效果代码
代码语言:html
所属分类:动画
代码描述:anime实现线条组成的圆圈转动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> :root { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; width: 100%; min-height: calc(max(100vh, 400px)); background-color: #fcbc04; transform: scale(0.75); } body .container { display: flex; justify-content: center; align-items: center; width: 250px; height: 250px; position: relative; opacity: 0.9; } body .container .side { display: flex; justify-content: space-between; position: absolute; width: 250px; height: 25px; } body .container .side > div { height: inherit; background-color: #fff; border-radius: 25px; box-shadow: 0 0 0 7.5px #ffffff22; } body .container .side:nth-child(1) { transform: rotate(0deg); } body .container .side:nth-child(2) { transform: rotate(30deg); } body .container .side:nth-child(3) { transform: rotate(60deg); } body .container .side:nth-child(4) { transform: rotate(90deg); } body .container .side:nth-child(5) { transform: rotate(120deg); } body .container .side:nth-child(6) { transform: rotate(150deg); } body .container .side-odd .left { width: 40px; } body .container .side-odd .right { width: 40px; } body .container .side-even .left { width: 80px; } body .container .side-even .right { width: 80px; } </style> </head> <body > <div class="container"> <div class="side side-odd"> <div class="left"></div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0