div+css实现线条弯曲成圆形加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现线条弯曲成圆形加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #111; min-height: 100vh; display: grid; place-items: center; overflow: hidden; } .line { position: relative; -webkit-animation: linedirection 4s step-end infinite; animation: linedirection 4s step-end infinite; } @-webkit-keyframes linedirection { 0% { transform: scale(0.5) rotateY(0deg); } 50% { transform: scale(0.5) rotateY(180deg); } } @keyframes linedirection { 0% { transform: scale(0.5) rotateY(0deg); } 50% { transform: scale(0.5) rotateY(180deg); } } .line div { position: absolute; left: 6px; top: 0; width: 12px; height: 120px; background-color: rosybrown; background-image: linear-gradient(#fff7, #fffa 33%, #0007); -webkit-animation: lineAngle 2s ease-in-out infinite alternate; animation: lineAngle 2s ease-in-out infinite alternate; } @-webkit-keyframes lineAngle { from { transform: rotate(0deg); } to { transform: rotate(-3deg); } } @keyframes lineAngle { from { transform: rotate(0deg); } to { transform: rotate(-3deg); } } .line > div { left: -3px; top: 160px; -webkit-animation: lineAngle1 2s linear infinite alternate; animation: lineAngle1 2s linear infinite alternate; } @-webkit-keyframes lineAngle1 { from { transform: translateX(-360px) rotate(0deg); } to { transform: translateX(0px) rotate(-3deg); } } @keyframes lineAngle1 { from { transform: translateX(-360px) rotate(0deg); } to { transform: translateX(0px) rotate(-3deg); } } </style> </head> <body> <div class="line"> <div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div> <div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0