使用CSS3来实现Loading动画特效的代码案例分享

来源：懂视网责编：小采时间：2020-11-27 18:51:28

使用CSS3来实现Loading动画特效的代码案例分享

使用CSS3来实现Loading动画特效的代码案例分享:使用CSS3来实现Loading动画特效的代码案例分享代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>css3 loading等待加载代码 - 何问起</title>

推荐度：

点击下载本文 文档为doc格式

导读使用CSS3来实现Loading动画特效的代码案例分享:使用CSS3来实现Loading动画特效的代码案例分享代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>css3 loading等待加载代码 - 何问起</title>

使用CSS3来实现Loading动画特效的代码案例分享

代码如下：

<!DOCTYPE html><html><head>
 <meta charset="UTF-8">
 <title>css3 loading等待加载代码 - 何问起</title>

 <style>
 @keyframes move {
 from {
 transform: translate(0,50%);
 }

 to {
 transform: translate(0,850%);
 }
 }

 * {
 margin: 0;
 padding: 0;
 }

 body {
 min-width: 325px;
 height: 100vh;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 align-items: center;
 align-content: flex-start;
 background: #2a2a2a;
 }

 figure {
 margin: 30px;
 width: 250px;
 height: 250px;
 border-radius: 50%;
 position: relative;
 background: #1c1c1c;
 }

 section {
 width: 10%;
 height: 100%;
 position: absolute;
 left: 45%;
 }

 section:nth-child(2) {
 transform: rotate(22.5deg);
 }

 section:nth-child(3) {
 transform: rotate(45deg);
 }

 section:nth-child(4) {
 transform: rotate(67.5deg);
 }

 section:nth-child(5) {
 transform: rotate(90deg);
 }

 section:nth-child(6) {
 transform: rotate(112.5deg);
 }

 section:nth-child(7) {
 transform: rotate(135deg);
 }

 section:nth-child(8) {
 transform: rotate(157.5deg);
 }

 figure p {
 height: 10%;
 border-radius: 50%;
 background: dodgerblue;
 animation: move 1s ease-in-out infinite alternate;
 }

 figure:nth-child(1) > section:nth-child(1) > p {
 animation-delay: -0.1875s;
 }

 figure:nth-child(1) > section:nth-child(2) > p {
 animation-delay: -0.175s;
 }

 figure:nth-child(1) > section:nth-child(3) > p {
 animation-delay: -0.1625s;
 }

 figure:nth-child(1) > section:nth-child(4) > p {
 animation-delay: -0.15s;
 }

 figure:nth-child(1) > section:nth-child(5) > p {
 animation-delay: -0.9375s;
 }

 figure:nth-child(1) > section:nth-child(6) > p {
 animation-delay: -0.925s;
 }

 figure:nth-child(1) > section:nth-child(7) > p {
 animation-delay: -0.9125s;
 }

 figure:nth-child(1) > section:nth-child(8) > p {
 animation-delay: -0.9s;
 }

 figure:nth-child(2) > section:nth-child(1) > p {
 animation-delay: -0.875s;
 }

 figure:nth-child(2) > section:nth-child(2) > p {
 animation-delay: -0.75s;
 }

 figure:nth-child(2) > section:nth-child(3) > p {
 animation-delay: -0.625s;
 }

 figure:nth-child(2) > section:nth-child(4) > p {
 animation-delay: -0.5s;
 }

 figure:nth-child(2) > section:nth-child(5) > p {
 animation-delay: -0.375s;
 }

 figure:nth-child(2) > section:nth-child(6) > p {
 animation-delay: -0.25s;
 }

 figure:nth-child(2) > section:nth-child(7) > p {
 animation-delay: -0.125s;
 }

 figure:nth-child(3) > section:nth-child(1) > p {
 animation-delay: -0.5s;
 }

 figure:nth-child(3) > section:nth-child(3) > p {
 animation-delay: -0.5s;
 }

 figure:nth-child(3) > section:nth-child(5) > p {
 animation-delay: -0.5s;
 }

 figure:nth-child(3) > section:nth-child(7) > p {
 animation-delay: -0.5s;
 }

 figure:nth-child(4) > section:nth-child(1) > p {
 animation-delay: -0.35s;
 }

 figure:nth-child(4) > section:nth-child(2) > p {
 animation-delay: -0.3s;
 }

 figure:nth-child(4) > section:nth-child(3) > p {
 animation-delay: -0.25s;
 }

 figure:nth-child(4) > section:nth-child(4) > p {
 animation-delay: -0.2s;
 }

 figure:nth-child(4) > section:nth-child(5) > p {
 animation-delay: -0.15s;
 }

 figure:nth-child(4) > section:nth-child(6) > p {
 animation-delay: -0.1s;
 }

 figure:nth-child(4) > section:nth-child(7) > p {
 animation-delay: -0.05s;
 }
 </style>

 <script src="js/prefixfree.min.js"></script></head><body>

 <figure>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 </figure>

 <figure>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 </figure>

 <figure>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 </figure>

 <figure>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 <section><p></p></section>
 </figure>

 <p style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
 <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
 <p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a></p>
 </p></body></html>

使用CSS3来实现Loading动画特效的代码案例分享

推荐度：

点击下载本文 文档为doc格式

标签：实现代码效果

热门焦点

使用CSS3来实现Loading动画特效的代码案例分享

使用CSS3来实现Loading动画特效的代码案例分享

使用CSS3来实现Loading动画特效的代码案例分享

最新推荐

猜你喜欢

热门推荐