CSS3动画：5种预载动画效果实例

前端  /  管理员 发布于 7年前   151

实现如图所示的动画效果：

预载动画一：双旋圈

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

实现如图所示：

html代码：

<body style="background: #ffb83c;">    <div id="preloader-1">        <span></span>        <span></span>    </div></body>

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代码：

<body style="background: #4ad3b4;">    <div id="preloader-2">        <span></span>        <span></span>    </div></body>

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代码：

 

<body style="background: #ab69d9;">    <div id="preloader-3">        <span></span>    </div></body>

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代码：

<body style="background: #c1d64a;">    <div id="preloader-4">        <span></span>        <span></span>        <span></span>        <span></span>        <span></span>    </div></body>

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代码：

<body style="background: #f9553f;">    <div id="preloader-5">        <span></span>        <span></span>        <span></span>    </div></body>

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;}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


  • 上一条：
    详解css样式中的border-image
    下一条：
    CSS3效果：自定义W形运行轨迹实例

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客