• css3动画效果


    1.背景颜色变换

    css:
    @-webkit-keyframes twinkling{ 0%{ background:#686868; } 50%{ background:#A1D000; } 100%{ background:green; } } @-moz-keyframes twinkling{/* Firefox */ 0%{ background:#686868; } 50%{ background:#A1D000; } 100%{ background:green; } } @-o-keyframes twinkling{/* Opera */ 0%{ background:#686868; } 50%{ background:#A1D000; } 100%{ background:green; } }
    js:
     $('.clickMe').css({"-webkit-animation":"twinkling 4s infinite ease-in-out"});

    2.幽灵浮动效果

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="utf-8">
      <title>纯CSS3实现幽灵漂浮动画DEMO演示</title>
      <style>
      *{padding:0;margin:0;}
        body{
            position:relative;
               background:#90C0F1;
            overflow:hidden;
        }
        
        .ghost{
            width:160px;
            margin:100px auto;
            position:relative;
            animation:ghostUpdown 1s infinite alternate;
            -webkit-animation:ghostUpdown 1s infinite alternate;
        }
    
        .ghostBody{
            width:140px;
            height:180px;
            background:#fff;
            border-radius:100% 100% 0 0;
            position:relative;
        }
        @keyframes ghostUpdown{
            from{margin-top:100px;}
            to{margin-top:70px;}
        }
        @-webkit-keyframes ghostUpdown{
            from{margin-top:100px;}
            to{margin-top:70px;}
        }
      
        .ghostEye{
            15px;
            height:20px;
            border-radius:100%;
            border:2px solid #061E74;
            background:#061E74;
            box-shadow:inset -2px -2px #fff;
            position:absolute;
            top:60px;
        }
        .left{left:45px}
        .right{right:50px;}
        .ghostMouth{
            15px;
            height:20px;
            border-radius:100%;
            border:2px solid #061E74;
            position:absolute;
            top:90px;
            left:70px;
        }
        .ghostWave{
            position:absolute;
             140px;
            height: 20px;
            background-size:25px 20px;
            background-image:radial-gradient(circle at 50% 0%,#fff,71%,transparent 71%);
        }
    
        .shadow{
            width:140px;
            height:10px;
            border-radius:100%;
            background:#061E74;
            opacity:0.3;
            margin-top:70px;
            animation:shadow 1s infinite alternate;
            -webkit-animation:shadow 1s infinite alternate;
        }
        
        @keyframes shadow{
            from{margin-top:70px;opacity:0.3;}
            to{margin-top:100px;opacity:0.1;}
        }
        @-webkit-keyframes shadow{
            from{margin-top:70px;opacity:0.3;}
            to{margin-top:100px;opacity:0.1;}
        }
      </style>
     </head>
     <body>
        <div class="ghost">
            <div class="ghostBody"></div>
            <div class="ghostEye left"></div>
            <div class="ghostEye right"></div>
            <div class="ghostMouth"></div>
            <div class="ghostWave"></div>
       
            <div class="shadow"></div>
        </div>
    
    <div style="text-align:center;clear:both">
    <!--
    <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
    <script src="/follow.js" type="text/javascript"></script>
    -->
    </div>
    </body>
    </html>

     3.预加载动画

    <!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>css3预加载动画</title>
        <style>
            #preloader-1 {
                position: relative;
                 80px;
                height: 80px;
                border: 4px solid rgba(255,255,255,.25);
                border-radius: 50%;
                margin: 200px auto;
            }
            #preloader-1 span{
                position: absolute;
                80px;
                height:80px;
                border:4px solid transparent;
                border-top:4px solid #fff;
                border-radius: 50%;
                top:-4px;
                left:-4px;
                animation: rotate 1s infinite linear;
            }
            @keyframes rotate{
                0%{transform: rotate(0deg);}
                100%{transform: rotate(360deg);}
            }
            #preloader-2{
                position: relative;
                vertical-align:middle;
                 80px;
                margin: 200px auto;
            }
            #preloader-2 span{
                position: absolute;
                30px;
                height: 30px;
                background: #fff;
                border-radius: 50%;
            }
            #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;}
            }
        </style>
    </head>
    <body style="background:#666;">
        <div id="preloader-1">
            <span></span>
        </div>
        <div id="preloader-2">
            <span></span>
            <span></span>
        </div>
    </body>
    </html>
    View Code
  • 相关阅读:
    2012年的结束
    学习嵌入式的点滴(一)
    面试的点滴(一)
    学习嵌入式的点滴(二)
    DB2 SQL脚本批量执行(转)
    联邦数据库的一个例子(转)
    在 DB2 9.7 for Linux, UNIX, and Windows 上运行 Oracle 应用程序(转)
    WINDOWS批处理命令详解(转)
    SQL1159 Initialization error with DB2 .NET Data Provider, reason code 2;reason code 10
    Oracle Package中的包变量的使用(转)
  • 原文地址:https://www.cnblogs.com/wanf/p/7656929.html
Copyright © 2020-2023  润新知