网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 css3制作loading加载动画效果代码
内容
    在我们这次的新设计教程中，我将向您展示如何创建纯css3的loading加载动画组件(没有任何图像)。我认为它可以为你减少项目的代码量和额外的图像对你网站的负载。我准备了三种不同风格的加载组件。现在，让我们看看我做的。
    css3-loading
    step 1. html
    你可以在这里看到的三个元素–放置“加载”元素的div。
    <div class=main_body>
    <div class=element>
    <div class=loading1>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
    </div>
    <div class=element>
    <div class=loading2>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
    </div>
    <div class=element>
    <div class=loading3>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>
    </div>
    </div>
    step 2. css
    现在，最有趣的一步，我会给你风格各加载的元素。欢迎来检查的第一个样式：
    .loading1 {
    height:100px;
    position:relative;
    width:80px;
    }
    .loading1 > div {
    background-color:#ffffff;
    height:30px;
    position:absolute;
    width:12px;
    /* css3 radius */
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    /* css3 transform - scale */
    -webkit-transform:scale(0.4);
    -moz-transform:scale(0.4);
    -o-transform:scale(0.4);
    /* css3 animation */
    -webkit-animation-name:loading1;
    -webkit-animation-duration:1.04s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -moz-animation-name:loading1;
    -moz-animation-duration:1.04s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -o-animation-name:loading1;
    -o-animation-duration:1.04s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    }
    .loading1 > div:nth-child(1) {
    left:0;
    top:36px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    /* css3 animation */
    -webkit-animation-delay:0.39s;
    -moz-animation-delay:0.39s;
    -o-animation-delay:0.39s;
    }
    .loading1 > div:nth-child(2) {
    left:10px;
    top:13px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    /* css3 animation */
    -webkit-animation-delay:0.52s;
    -moz-animation-delay:0.52s;
    -o-animation-delay:0.52s;
    }
    .loading1 > div:nth-child(3) {
    left:34px;
    top:4px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    /* css3 animation */
    -webkit-animation-delay:0.65s;
    -moz-animation-delay:0.65s;
    -o-animation-delay:0.65s;
    }
    .loading1 > div:nth-child(4) {
    right:10px;
    top:13px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    /* css3 animation */
    -webkit-animation-delay:0.78s;
    -moz-animation-delay:0.78s;
    -o-animation-delay:0.78s;
    }
    .loading1 > div:nth-child(5) {
    right:0;
    top:36px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    /* css3 animation */
    -webkit-animation-delay:0.91s;
    -moz-animation-delay:0.91s;
    -o-animation-delay:0.91s;
    }
    .loading1 > div:nth-child(6) {
    right:10px;
    bottom:9px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    -o-transform:rotate(135deg);
    /* css3 animation */
    -webkit-animation-delay:1.04s;
    -moz-animation-delay:1.04s;
    -o-animation-delay:1.04s;
    }
    .loading1 > div:nth-child(7) {
    bottom:0;
    left:34px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    /* css3 animation */
    -webkit-animation-delay:1.17s;
    -moz-animation-delay:1.17s;
    -o-animation-delay:1.17s;
    }
    .loading1 > div:nth-child(8) {
    left:10px;
    bottom:9px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(-135deg);
    -moz-transform:rotate(-135deg);
    -o-transform:rotate(-135deg);
    /* css3 animation */
    -webkit-animation-delay:1.3s;
    -moz-animation-delay:1.3s;
    -o-animation-delay:1.3s;
    }
    /* css3 keyframes - loading1 */
    @-webkit-keyframes loading1 {
    0%{ background-color:#000000 }
    100%{ background-color:#ffffff }
    }
    @-moz-keyframes loading1 {
    0%{ background-color:#000000 }
    100%{ background-color:#ffffff }
    }
    @-o-keyframes loading1 {
    0%{ background-color:#000000 }
    100%{ background-color:#ffffff }
    }
    你可以看到–我用css3动画关键帧，每一步(点)是彼此分离的延迟。现在，请查看我们的第二负载的风格元素：
    .loading2 {
    height:140px;
    position:relative;
    width:140px;
    /* css3 transform - scale */
    -webkit-transform:scale(0.6);
    -moz-transform:scale(0.6);
    -o-transform:scale(0.6);
    }
    .loading2 > div {
    background-color:#ffffff;
    height:25px;
    position:absolute;
    width:25px;
    /* css3 radius */
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    /* css3 animation */
    -webkit-animation-name:loading2;
    -webkit-animation-duration:1.04s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -moz-animation-name:loading2;
    -moz-animation-duration:1.04s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -o-animation-name:loading2;
    -o-animation-duration:1.04s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    }
    .loading2 > div:nth-child(1) {
    left:0;
    top:57px;
    /* css3 animation */
    -webkit-animation-delay:0.39s;
    -moz-animation-delay:0.39s;
    -o-animation-delay:0.39s;
    }
    .loading2 > div:nth-child(2) {
    left:17px;
    top:17px;
    /* css3 animation */
    -webkit-animation-delay:0.52s;
    -moz-animation-delay:0.52s;
    -o-animation-delay:0.52s;
    }
    .loading2 > div:nth-child(3) {
    left:57px;
    top:0;
    /* css3 animation */
    -webkit-animation-delay:0.65s;
    -moz-animation-delay:0.65s;
    -o-animation-delay:0.65s;
    }
    .loading2 > div:nth-child(4) {
    right:17px;
    top:17px;
    /* css3 animation */
    -webkit-animation-delay:0.78s;
    -moz-animation-delay:0.78s;
    -o-animation-delay:0.78s;
    }
    .loading2 > div:nth-child(5) {
    right:0;
    top:57px;
    /* css3 animation */
    -webkit-animation-delay:0.91s;
    -moz-animation-delay:0.91s;
    -o-animation-delay:0.91s;
    }
    .loading2 > div:nth-child(6) {
    right:17px;
    bottom:17px;
    /* css3 animation */
    -webkit-animation-delay:1.04s;
    -moz-animation-delay:1.04s;
    -o-animation-delay:1.04s;
    }
    .loading2 > div:nth-child(7) {
    left:57px;
    bottom:0;
    /* css3 animation */
    -webkit-animation-delay:1.17s;
    -moz-animation-delay:1.17s;
    -o-animation-delay:1.17s;
    }
    .loading2 > div:nth-child(8) {
    left:17px;
    bottom:17px;
    /* css3 animation */
    -webkit-animation-delay:1.3s;
    -moz-animation-delay:1.3s;
    -o-animation-delay:1.3s;
    }
    /* css3 keyframes - loading2 */
    @-webkit-keyframes loading2 {
    0%{ background-color:#000000 }
    100%{ background-color:#ffffff }
    }
    @-moz-keyframes loading2 {
    0%{ background-color:#000000 }
    100%{ background-color:#ffffff }
    }
    @-o-keyframes loading2 {
    0%{ background-color:#000000 }
    100%{ background-color:#ffffff }
    }
    我在这里使用相同的理念作为第一要素，但是，稍微改变风格。最后–第三”加载元件：
    .loading3 > div {
    background-color:#ffffff;
    border:1px solid #000000;
    float:left;
    height:114px;
    margin-left:5px;
    width:30px;
    opacity:0.1;
    /* css3 transform - scale */
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    /* css3 animation */
    -webkit-animation-name:loading3;
    -webkit-animation-duration:1.2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -moz-animation-name:loading3;
    -moz-animation-duration:1.2s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -o-animation-name:loading3;
    -o-animation-duration:1.2s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    }
    .loading3 > div:nth-child(1) {
    /* css3 animation */
    -webkit-animation-delay:0.24s;
    -moz-animation-delay:0.24s;
    -o-animation-delay:0.24s;
    }
    .loading3 > div:nth-child(2) {
    /* css3 animation */
    -webkit-animation-delay:0.48s;
    -moz-animation-delay:0.48s;
    -o-animation-delay:0.48s;
    }
    .loading3 > div:nth-child(3) {
    /* css3 animation */
    -webkit-animation-delay:0.72s;
    -moz-animation-delay:0.72s;
    -o-animation-delay:0.72s;
    }
    .loading3 > div:nth-child(4) {
    /* css3 animation */
    -webkit-animation-delay:0.96s;
    -moz-animation-delay:0.96s;
    -o-animation-delay:0.96s;
    }
    .loading3 > div:nth-child(5) {
    /* css3 animation */
    -webkit-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
    -o-animation-delay:1.2s;
    }
    /* css3 keyframes - loading3 */
    @-webkit-keyframes loading3 {
    0% {
    -webkit-transform:scale(1.2);
    opacity:1;
    }
    100% {
    -webkit-transform:scale(0.7);
    opacity:0.1;
    }
    }
    @-moz-keyframes loading3 {
    0% {
    -moz-transform:scale(1.2);
    opacity:1;
    }
    100% {
    -moz-transform:scale(0.7);
    opacity:0.1;
    }
    }
    @-o-keyframes loading3 {
    0% {
    -o-transform:scale(1.2);
    opacity:1;
    }
    100% {
    -o-transform:scale(0.7);
    opacity:0.1;
    }
    }
    这就是今天的。我们刚刚创建的三种不同的“加载”元素。我希望一切都对你很容易和你一样的结果。祝你好运!
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/13 1:02:51