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.预加载动画
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
亦心晗