完成效果:【纯css流畅loading加载动画】
文章插图
html代码:<!--外部容器--><div class="container"><!-- 动画容器--> <div class="box"><!-- 外--> <i></i><!-- 内--> <i></i> </div><!-- 文字--> <span>加载中...</span></div>css代码:<style type="text/css"> /*外部容器样式*/ .container{ width: 300px; height: 300px; background-color: #99999952; border: 1px solid #999; margin: 40px auto; font-size: 10px; /*内部元素居中*/ flex-direction: column; display: flex; justify-content: center; align-items: center; } /*动画元素容器样式*/ .box{ width: 100px; height: 100px; position: relative; } /*动画元素样式*/ .box > i{ display: block; border: 2px solid #333; position: absolute; border-radius: 50%; } /*动画:旋转180度缩放0.6倍*/ @keyframes anim { 0%{ transform: rotate(0) scale(1); } 50%{ transform: rotate(180deg) scale(0.6); } 100%{ transform: rotate(360deg) scale(1); } } /*两个动画元素各自的样式*/ .box i:nth-child(1){ width: 60px; height: 60px; left: 20px; top: 20px; /*transparent为透明*/ border-color:transparent #FF386D; animation: anim 1s infinite 0s ease-in-out; } .box i:nth-child(2){ width: 20px; height: 20px; left: 40px; top: 40px; border-color: transparent #00C3FF; /*reverse反向 调用动画*/ animation: anim 1s infinite 0.5s ease-in-out reverse; }</style>这是一个纯CSS的曲线旋转loading动画
推荐阅读
- 迪拜的马桶是纯金的吗 世界上最贵的马桶多少钱一个
- 很纯很暧昧？我想吃了你 暧昧期男生说想吃你
- 小米大规模推送MIUI 12.0.8稳定版更新，感觉流畅度有明显提升
- 发型|真正懂时尚的人，不会只讲单纯地穿搭，妆容与发型都要兼顾
- 解决前端一切布局的神器：CSS3 Flex弹性布局
- 纯电 浅谈新能源汽车基础知识
- 拼配茶PK纯料茶
- 纯料与拼配 普洱争论的两大核心
- 搞懂CSS 字体单位
- 走进古树纯料普洱茶