div+css实现三个圈圈交叉旋转loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现三个圈圈交叉旋转loading加载动画效果代码
代码标签: div css 三个 圈圈 交叉 旋转 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <style> * { /* 常规初始化 */ margin: 0; padding: 0; box-sizing: border-box; } body { /* 常规居中显示,简单背景色 */ display: flex; justify-content: center; align-items: center; overflow: hidden; min-height: 100vh; background-color: #15171e; } .box { /* 父盒子确定宽高 */ width: 30vmin; height: 30vmin; /* background-color: #fff1; */ position: relative; } .box div { /* 子盒子撑满父盒子,三个一样 */ width: 100%; height: 100%; /* 基础是圆形 */ border-radius: 50%; /* 分别设置四个边框粗细、颜色,这样就会有一个不规则形状 */ border-top: 4vmin solid #148eff; border-right: 1vmin solid #148eff; border-bottom: 6vmin solid transparent; border-left: 0 solid transparent; /* 定位叠中间 */ position: absolute; } .box div:nth-child(1) { /* 分别给每个形状设置默认旋转角度,分散开 */ transform: rotateX(60deg) rotateY(0deg); /* 由于每个盒子旋转角度不同,所以动画也单独设置 */ animation: rotate-1 1s linear infinite; } .box div:nth-child(2) { transform: rotateX(60deg) rotateY(60deg); anim.........完整代码请登录后点击上方下载按钮下载查看
网友评论0