实现如图所示的动画效果：
预载动画一：双旋圈
在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码，即内圈比外圈的速率快2倍。
实现如图所示：
<body style="background: #ffb83c;"> div id="preloader-1"> span></</div> body>
css代码：
#preloader-1{ position: relative; } #preloader-1 span{ absolute; border:8px solid #fff; border-top:8px solid transparent; border-radius: 999px; } #preloader-1 span:nth-child(1){ width:80px; height: 80px; animation: spin-1 2s infinite linear; } #preloader-1 span:nth-child(2){ top:20px; left:40px; 40px; spin-2 1s infinite linear; } @keyframes spin-1{ 0%{transform: rotate(360deg); opacity: 1.0;} 50%{transform: rotate(180deg); 0.5;} 100%{ rotate(0deg);opacity: 0;} } @keyframes spin-2{ 1;} }
预载动画二：交错圈
两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。
效果：
="background: #4ad3b4;"="preloader-2"#preloader-2{ #preloader-2 span{30px; 30px; background: #fff; #preloader-2 span:nth-child(1){ cross-1 1.5s infinite linear; } #preloader-2 span:nth-child(2){ cross-2 1.5s infinite linear; } @keyframes cross-1{ translateX(0); translateX(80px); } @keyframes cross-2{ }
预载动画三：旋转圈
效果：
="background: #ab69d9;"="preloader-3"#preloader-3{ relative;4px solid rgba(255,.25); 999px; } #preloader-3 span{4px solid transparent;4px solid #fff; 999px;-4px; rotate 1s infinite linear; } @keyframes rotate{ rotate(0deg);} rotate(360deg);} }
预载动画四：跳动圈
这是一种墨西哥波浪纹的动画效果，通过设置不同圆圈之间的延迟参数来实现。
效果：
="background: #c1d64a;"="preloader-4"#preloader-4{ #preloader-4 span{absolute;16px; 16px; bounce 1s infinite linear; } #preloader-4 span:nth-child(1){0; animation-delay: 0s; } #preloader-4 span:nth-child(2){ 0.25s; } #preloader-4 span:nth-child(3){ 0.5s; } #preloader-4 span:nth-child(4){60px; 0.75s; } #preloader-4 span:nth-child(5){ 1.0s; } @keyframes bounce{ translateY(0px); translateY(-30px); }
预载动画五：雷达圈
一种雷达辐射效果，给3个span elements设置相同的淡入淡出效果，再予每个稍微延迟下即可实现。
效果：
="background: #f9553f;"="preloader-5"#preloader-5{ #preloader-5 span{50px; 50px;5px solid #fff; opacity: 0; radar 2s infinite linear; } #preloader-5 span:nth-child(1){ #preloader-5 span:nth-child(2){ animation-delay: 0.66s; } #preloader-5 span:nth-child(3){ 1.33s; } @keyframes radar{ scale(0); 25%{ scale(1); 75%{ scale(1.5); scale(2); }
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
