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{
        width: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{
        width:15px;
        height:20px;
        border-radius:100%;
        border:2px solid #061E74;
        position:absolute;
        top:90px;
        left:70px;
    }
    .ghostWave{
        position:absolute;
        width: 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;
            width: 80px;
            height: 80px;
            border: 4px solid rgba(255,255,255,.25);
            border-radius: 50%;
            margin: 200px auto;
        }
        #preloader-1 span{
            position: absolute;
            width: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;
            width: 80px;
            margin: 200px auto;
        }
        #preloader-2 span{
            position: absolute;
            width: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

 

posted @ 2017-10-12 16:52  亦心晗  阅读(196)  评论(0)  编辑  收藏  举报