css3实现简易loading动画_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:23:32
원래의
1219명이 탐색했습니다.

css3已经火的不行,我还很淡(dan)定(teng)地在啃着css2,表示很惭愧啊

周末抽点时间看了下loading效果的实现,开始看到css3有点头大,感觉是不是向外面说的那样每一次标准的发布都像是在学习一门新语言呢,称有些惶恐。。。

说完废话了....开始show代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>loading动画实现</title></head><style type="text/css">    body{        text-align:center;    }    .container{        display: inline-block;    }    .point{        width:10px;        height:10px;        background:#2196F3;        border-radius:50%;        float:left;        margin-left:5px;        animation:myAnima 1.2s ease-in-out infinite;     }    .two{        animation-delay: 200ms;    }    .three{        animation-delay: 400ms;    }    @keyframes myAnima{        from {opacity: 0.8}        to{opacity: 0}    }</style><body><div class="container">    <div class="point one"></div>        <div class="point two"></div>        <div class="point three"></div>    </div></body></html>
로그인 후 복사

效果图:

主要用到:css中的animation属性

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • 实现思路:

    首先,我们需要三个点,这里通过定义三个正方形,并设置他的圆角为50%,来实现的。

    然后,定义一个动画:myAnima(名字可以自定义,此处由于我太懒直接使用animation缩写来命名的),里面定义了透明度从1到0,来实现元素显示和隐藏的效果。

    最后,分别为第二、三个元素设置animation-delay(动画延迟),是他们延迟执行,以达到loading中流动的效果

    END..

     

    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿