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>