总结一些css加载动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="preloader_1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <style media="screen">
    #preloader_1{
        margin: 300px;
        position:relative;
    }
    #preloader_1 span{
        display:block;
        bottom:0px;
        width: 9px;
        height: 5px;
        background:#9b59b6;
        position:absolute;
        animation: preloader_1 1.5s  infinite ease-in-out;
    }
    #preloader_1 span:nth-child(2){
        left:11px;
        animation-delay: .2s;
    }
    #preloader_1 span:nth-child(3){
        left:22px;
        animation-delay: .4s;
    }
    #preloader_1 span:nth-child(4){
        left:33px;
        animation-delay: .6s;
    }
    #preloader_1 span:nth-child(5){
        left:44px;
        animation-delay: .8s;
    }
    @keyframes preloader_1 {
        0% {height:5px;transform:translateY(0px);background:#9b59b6;}
        25% {height:30px;transform:translateY(15px);background:#3498db;}
        50% {height:5px;transform:translateY(0px);background:#9b59b6;}
        100% {height:5px;transform:translateY(0px);background:#9b59b6;}
    }
    </style>
</body>
</html>

效果二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="preloader_2">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <style media="screen">
    #preloader_2 { position: relative; left: 50%; width: 40px; height: 40px; }
    #preloader_2 span { display: block; bottom: 0px; width: 20px; height: 20px; background: #9b59b6; position: absolute; }
    #preloader_2 span:nth-child(1) { animation: preloader_2_1 1.5s infinite ease-in-out; }
    #preloader_2 span:nth-child(2) { left: 20px; animation: preloader_2_2 1.5s infinite ease-in-out; }
    #preloader_2 span:nth-child(3) { top: 0px; animation: preloader_2_3 1.5s infinite ease-in-out; }
    #preloader_2 span:nth-child(4) { top: 0px; left: 20px; animation: preloader_2_4 1.5s infinite ease-in-out; }
    @keyframes preloader_2_1 {
        0% {
            -transform: translateX(0px) translateY(0px) rotate(0deg);
            webkit-transform:translateX(0px) translateY(0px) rotate(0deg);
            border-radius:0px;
        }
        50% {
            -transform: translateX(-20px) translateY(-10px) rotate(-180deg);
            webkit-transform: translateX(-20px) translateY(-10px) rotate(-180deg);
            border-radius:20px;
            background:#3498db;
        }
        80% {
            -transform: translateX(0px) translateY(0px) rotate(-360deg);
            webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);
            border-radius:0px;
        }
        100% {
            -transform: translateX(0px) translateY(0px) rotate(-360deg);
            webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);
            border-radius:0px;
        }
    }
    @keyframes preloader_2_2 {
        0% {
            -transform: translateX(0px) translateY(0px) rotate(0deg);
            border-radius:0px;
        }
        50% {
            -transform: translateX(20px) translateY(-10px) rotate(180deg);
            border-radius:20px;
            background:#f1c40f;
        }
        80% {
            -transform: translateX(0px) translateY(0px) rotate(360deg);
            border-radius:0px;
        }
        100% {
            -transform: translateX(0px) translateY(0px) rotate(360deg);
            border-radius:0px;
        }
    }
    @keyframes preloader_2_3 {
        0% {
            -transform: translateX(0px) translateY(0px) rotate(0deg);
            border-radius:0px;
        }
        50% {
            -transform: translateX(-20px) translateY(10px) rotate(-180deg);
            border-radius:20px;
            background:#2ecc71;
        }
        80% {
            -transform: translateX(0px) translateY(0px) rotate(-360deg);
            border-radius:0px;
        }
        100% {
            -transform: translateX(0px) translateY(0px) rotate(-360deg);
            border-radius:0px;
        }
    }
    @keyframes preloader_2_4 {
        0% {
            -transform: translateX(0px) translateY(0px) rotate(0deg);
            border-radius:0px;
        }
        50% {
            -transform: translateX(20px) translateY(10px) rotate(180deg);
            border-radius:20px;
            background:#e74c3c;
        }
        80% {
            -transform: translateX(0px) translateY(0px) rotate(360deg);
            border-radius:0px;
        }
        100% {
            -transform: translateX(0px) translateY(0px) rotate(360deg);
            border-radius:0px;
        }
    }
    </style>
</body>
</html>

效果三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="preloader_3"></div>
    <style media="screen">
    #preloader_3{
        margin: 300px;
position:relative;
}
#preloader_3:before{
width:20px;
height:20px;
border-radius:20px;
background:blue;
content:‘‘;
position:absolute;
background:#9b59b6;
animation: preloader_3_before 1.5s infinite ease-in-out;
}

#preloader_3:after{
width:20px;
height:20px;
border-radius:20px;
background:blue;
content:‘‘;
position:absolute;
background:#2ecc71;
left:22px;
animation: preloader_3_after 1.5s infinite ease-in-out;
}
@keyframes preloader_3_before {
0% {transform: translateX(0px) rotate(0deg)}
50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
  100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
0% {transform: translateX(0px)}
50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100% {transform: translateX(0px)}
}
    </style>
</body>
</html>

效果四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
    <style media="screen">
    .spinner {
margin: 100px auto 0;
width: 150px;
text-align: center;
}

.spinner > div {
width: 30px;
height: 30px;
background-color: #67CF22;

border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
    </style>
</body>
</html>

效果五

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
    <style media="screen">
    .spinner {
width: 60px;
height: 60px;

position: relative;
margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #67CF22;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;

-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
    </style>
</body>
</html>

时间： 2024-10-14 17:52:34

总结一些css加载动画的相关文章

为网格布局图片打造的超炫 CSS 加载动画

今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Normalize.css 来替代传统的 CSS 复位: ZURB Foundation 创建具有响应式的网格: Masonry 创建一个动态的网格布局: imagesLoaded 检查是否已加载图像: Infinite Scroll加载更多图片并追加到画廊. 现在,让我们来看看一些实际的代码,这应该是大家

css加载动画...

1 加载动画... 2 3 4 5 <p>加载动画...</p> 6 <p> </p> 7 <p> </p> 8 <style><!-- 9 .container { 10 position: absolute; 11 top: 0; 12 left: 0; 13 bottom: 0; 14 right: 0; 15 display: flex; 16 align-items: center; 17 justify-

5.偶然看到的一个css加载动画

书上偶然看到的先上一张素材 DOM <div class="loader"> </div> @keyframes loader{ to{background-position: -400px 0;} } .loader{ margin: 0 auto; width: 50px; height: 50px; background: url(img/loader.png) 0 0; background-size: cover; animation: loader

炫！一组单元素实现的 CSS 加载进度提示效果

之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 您可能感兴趣的相关文章太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实现3D图

弹跳加载动画特效Bouncing loader

一款非常常用的css 加载动画,这款CSS3 Loading动画主要由几个小球通过规律的上下跳动,渐隐渐显而成,效果十分生动.流畅.兼容IE8以上,尤其适合在移动端中使用,基本代替了图片实现加载的效果. HTML 1 <div class="bouncing-loader"> 2 <div></div> 3 <div></div> 4 <div></div> 5 </div> CSS 1 @

CSS 实现加载动画之五-光盘旋转

原文:CSS 实现加载动画之五-光盘旋转今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键点在于如何将元素拼凑成风车形状.然后定义动画的关键帧为rotate 360度,应用于整个元素上,就可以使整个元素旋转起来.案例在请在chrome中查看. 1. 先看截图 2. 代码实现思路 2.1 首先还是定义四个元素,元素的中心为这四个元素组成的圆的圆心.

CSS 实现加载动画之四-圆点旋转

原文:CSS 实现加载动画之四-圆点旋转圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以实现.这个实现也比较简单. 1. 动画截图 2. 案例源代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html

CSS 实现加载动画之三-钢琴按键

原文:CSS 实现加载动画之三-钢琴按键今天做的这个动画实现也是非常简单,简单数几行代码就可以搞定.给这个动画取了个优雅的名字--钢琴按键,也实在是想不出什么更形象的名字了.废话不多说,直接上图. 1. 先看gif图 2. 代码实现思路 2.1 定义五个方块的元素. 2.2 对方块元素使用动画,延时改变透明度. 3. 主要使用的技术主要用到了animation动画 @-webkit-keyframes load{ 0%{opacity:1;} 100%{opacity:0;}}.m-load

使用Animate.css和wow.js，实现各大网站常用的页面加载动画

经常见到某个网站的动画是在屏幕显示到This元素的时候,会有个过渡动画. 主要区别于在普通页面是在页面加载完成后所有动画一起动,或者设置延迟时间. 而这两个插件混搭使用可以是页面现在到该元素时才加载动画.拥有非常不错的效果. 算个比较常见的交互效果,研究了一下午,主要使用以下两个插件完成. 1.wow.js 实现了在网页滚动时的动画效果,有漂亮的动画效果,依赖于Animate.css. 2.Animate.css 非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画用法: <link