CSS3怎么实现预载动画效果

本篇内容主要讲解"CSS3怎么实现预载动画效果"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"CSS3怎么实现预载动画效果"吧!

预载动画一：双旋圈

在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码，即内圈比外圈的速率快2倍。

实现如图所示：

html代码：

css代码：

#preloader-1{    position: relative;}#preloader-1 span{    position: 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:20px;    width:40px;    height: 40px;    animation: spin-2 1s infinite linear;}@keyframes spin-1{    0%{transform: rotate(360deg); opacity: 1.0;}    50%{transform: rotate(180deg); opacity: 0.5;}    100%{transform: rotate(0deg);opacity: 0;}}@keyframes spin-2{    0%{transform: rotate(0deg); opacity: 0.5;}    50%{transform: rotate(180deg); opacity: 1;}    100%{transform: rotate(360deg);opacity: 0.5;}}

预载动画二：交错圈

两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。

效果：

html代码：

css代码：

#preloader-2{    position: relative;}#preloader-2 span{    position: absolute;    width:30px;    height: 30px;    background: #fff;    border-radius: 999px;}#preloader-2 span:nth-child(1){    animation: cross-1 1.5s infinite linear;}#preloader-2 span:nth-child(2){    animation: cross-2 1.5s infinite linear;}@keyframes cross-1{    0%{transform: translateX(0); opacity: 0.5;}    50%{transform: translateX(80px); opacity: 1;}    100%{transform: translateX(0);opacity: 0.5;}}@keyframes cross-2{    0%{transform: translateX(80px); opacity: 0.5;}    50%{transform: translateX(0); opacity: 1;}    100%{transform: translateX(80px);opacity: 0.5;}}

预载动画三：旋转圈

效果：

html代码：

css代码：

#preloader-3{    position: relative;    width:80px;    height: 80px;    border:4px solid rgba(255,255,255,.25);    border-radius: 999px;    }#preloader-3 span{    position: absolute;    width:80px;    height:80px;    border:4px solid transparent;    border-top:4px solid #fff;    border-radius: 999px;    top:-4px;    left:-4px;    animation: rotate 1s infinite linear;}@keyframes rotate{    0%{transform: rotate(0deg);}    100%{transform: rotate(360deg);}}

预载动画四：跳动圈

这是一种墨西哥波浪纹的动画效果，通过设置不同圆圈之间的延迟参数来实现。

效果：

html代码：

css代码：

#preloader-4{    position: relative;}#preloader-4 span{    position:absolute;    width:16px;    height: 16px;    border-radius: 999px;    background: #fff;    animation: bounce 1s infinite linear;}#preloader-4 span:nth-child(1){    left:0;    animation-delay: 0s;}#preloader-4 span:nth-child(2){    left:20px;    animation-delay: 0.25s;}#preloader-4 span:nth-child(3){    left:40px;    animation-delay: 0.5s;}#preloader-4 span:nth-child(4){    left:60px;    animation-delay: 0.75s;}#preloader-4 span:nth-child(5){    left:80px;    animation-delay: 1.0s;}@keyframes bounce{    0%{transform: translateY(0px);opacity: 0.5;}    50%{transform: translateY(-30px);opacity: 1.0;}    100%{transform: translateY(0px);opacity: 0.5;}}

预载动画五：雷达圈

一种雷达辐射效果，给3个span elements设置相同的淡入淡出效果，再予每个稍微延迟下即可实现。

效果：

html代码：

css代码：

#preloader-5{    position: relative;}#preloader-5 span{    position:absolute;    width:50px;    height: 50px;    border:5px solid #fff;    border-radius: 999px;    opacity: 0;    animation: radar 2s infinite linear;}#preloader-5 span:nth-child(1){    animation-delay: 0s;}#preloader-5 span:nth-child(2){        animation-delay: 0.66s;}#preloader-5 span:nth-child(3){    animation-delay: 1.33s;}@keyframes radar{    0%{transform: scale(0);opacity: 0;}    25%{transform: scale(0);opacity: 0.5;}    50%{transform: scale(1);opacity: 1.0;}    75%{transform: scale(1.5);opacity: 0.5;}    100%{transform: scale(2);opacity: 0;}}

到此，相信大家对"CSS3怎么实现预载动画效果"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！