zoukankan      html  css  js  c++  java
  • css3动画学习资料整理

        现在主流浏览器(先不管IE8,IE9吧),尤其是移动端浏览器基本都支持css3了,为了增强页面的表现力,css3动画必不可少了。这篇文章主要整理一下我在学习css3动画所查阅的一些好的资料,并附上两个比较常用的例子。

        css3动画主要包括三个部分transform,transition和animation,具体的属性和用法,如果有一定的英语和数学基础可以看w3c css3标准:https://www.w3.org/standards/techs/css#w3c_all

        其他可以参考的文章:

        循环动画实现:http://www.cnblogs.com/starof/p/5443445.html

        transform:http://www.cnblogs.com/starof/p/4560076.html

        transition:http://www.cnblogs.com/starof/p/4582367.html

        animation:http://www.cnblogs.com/starof/p/4585324.html

        阮一峰的介绍:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

        很多动画例子可以借用animation.css这个项目。

        下面上两个例子,一个是loading动画,一个是webapp常用的切入切出效果。css代码也没什么好解释的,直接上代码和效果吧。

        一.loading动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>loading</title>
        <style>
        .overlay {
            background-color: rgba(30, 30, 30, 0.5);
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 1000;
            left:0;
            top:0;
        }
    
        .loading{
            background: url(./image/loading.png) no-repeat;
            background-size: 100% 100%;
            margin-left: -40px;
            position: fixed;
            z-index: 2000;
            width: 80px;
            height:80px;
            top:50%;
            left:50%;
            -webkit-animation:loadanimation 1s linear infinite;

              /*
              -moz-animation:loadanimation 1s linear infinite;
              -ms-animation:loadanimation 1s linear infinite;
              -o-animation:loadanimation 1s linear infinite;
              animation:loadanimation 1s linear infinite;
              */

        }
    
        @-webkit-keyframes loadanimation{
            0%{
                -webkit-transform: rotate(0deg);
            }
            100%{
                -webkit-transform: rotate(360deg);
            }
        }
        </style>
    </head>
    <body>
        <div class="overlay">
            <div class="loading"></div>
        </div>
    </body>
    </html>

    效果图如下:(中间的小圈是会转的,当然这个并非一定要用css动画,用gif动态图片代替也是一样的)

    更多loading动画效果可以参考这位园友写得 http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html

        二.切入切出效果

    <!DOCTYPE html>
    <head>
    <meta charset="utf-8" />
    <title>slider-4</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <style type="text/css">
    @charset "UTF-8";
    * {margin: 0;padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }
    html {
        width: 100%;
        height: 100%;
    }
    body {
        min-width: 320px;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-family: Verdana;
    }
    
    header {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 44px;
        line-height: 44px;
        background-color: #3e74b9;  
        text-align: center;
        color: #FFF;
    }
    
    section {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    footer {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 50px;
        margin-top: -50px;
        line-height: 50px;
        background-color: rgba(0,0,0,.6);   
        text-align: center;
        color: #FFF;
    }
    
    .view-container {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .page-container {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #F8F8F8;
        -webkit-transform:translate3d(0,0,0);
        -webkit-backface-visibility:hidden;
    }
    
    .page-num {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        margin-top: -25px;
        margin-left: -25px;
        font-size: 72px; 
    }
    
    #pageB {
        background-color: #ECB43A;
    }
    
    /* 差速滑动组合 */
    .slideSlow {
      -webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
          -ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
    }
    .slideFast {
      -webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0);
          -ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0);
    }
    .slideSlowBack {
      -webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0);
          -ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0);
    }
    .slideFastBack {
      -webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
          -ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
    }
    .pageInt {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    }
    .pageOld {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    }
    .pageNew {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    }
    </style>
    </head>
    <body>
        <header>HEADER </header>
      
        <section>
          <!-- view container -->
          <ul id="pages" class="view-container" style="">
            <!-- pageA container -->
            <li id="pageA" class="page-container pageInt" style="display:;"> <b id="btnNext1" class="page-num">A</b> </li>
            <!-- pageB container -->
            <li id="pageB" class="page-container pageNew" style="display:;"> <b id="btnNext2" class="page-num">B</b></li>
            <!-- pageC container -->
            <li id="pageC" class="page-container pageNew" style="display:;"> <b id="pageBack" class="page-num">C</b></li>
          </ul>
        
        </section>
        
        <footer>FOOTER</footer>
    
      <!-- framework -->
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
      <script>
            var screenW = $('body').width();
    
            var btnNext1 = $('#btnNext1');
            var btnNext2 = $('#btnNext2');
            var pageBack = $('#pageBack');
            var pages = $('#pages');
            var pageA = $('#pageA');
            var pageB = $('#pageB');
            var pageC = $('#pageC');
    
            //.slideSlow 慢速滑动,一定是左边的页面
            //.slideFast 快速滑动,一定是右边的页面
            //.slideSlowBack 返回时,慢速滑动,一定是左边的页面
            //.slideFastBack 返回时,快速滑动,一定是右边的页面
            //.pageInt  初始页面位置
            //.pageOld  正向划过页面位置 -100%
            //.pageNew  正向未滑页面位置 +100%
    
            btnNext1.click(function(){
                pageA.css({'-webkit-transform' : 'translate3d(-100%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s'});
                pageB.css({'-webkit-transform' : 'translate3d(0%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1.0)'});
            });
    
            btnNext2.click(function(){
                pageB.css({'-webkit-transform' : 'translate3d(-100%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s'});
                pageC.css({'-webkit-transform' : 'translate3d(0%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1.0)'});
            });
            pageBack.click(function(){
                pageB.css({'-webkit-transform' : 'translate3d(0%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0)'});
                pageC.css({'-webkit-transform' : 'translate3d(100%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s'});
            });
      </script>
    </body>
    </html>
  • 相关阅读:
    禅道的安装
    项目管理必看的几个网站
    禅道管理中的项目管理--组织进行任务分解
    Redis--Springboot使用
    Mapper.xml--配置map<String, List<String>>输入
    SpringBoot-Dubbo、Zk
    高并发--并发编程的三大辅助类
    笔试-2020年西山居Java笔试题(补上,一直忘记补上了)
    HttpWebRequest.GetRequestStream方法timeout【第3次操作时就超时】的原因及解决办法
    洛谷 P2613 【模板】有理数取余(高精度取余,逆元)
  • 原文地址:https://www.cnblogs.com/zhutianpeng/p/5449197.html
Copyright © 2011-2022 走看看