CSS3实现打乒乓球游戏动画效果 demo教程

网上有很多关于 CSS3 的动画教程，只要大家学会了最基本的动画知识，任何有难度的动画效果都可以轻松的实现。今天为大家分享一款简易的打乒乓球动画。

该动画全部由 CSS3 实现的乒乓球动画特效，主要是模拟了乒乓球运动动画，画面上用 CSS3?绘制了一张乒乓球桌，一个乒乓球在球桌上来回运动，就好象两个运动员在打乒乓球一样。当然如果你可以在球桌两端绘制两个运动员那就更加逼真的。

动画的静态图效果：

页面html代码：

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
 <meta charset="UTF-8">
 <title>纯CSS3乒乓球动画DEMO演示lisa33xiaoq.net</title>
 <link rel="stylesheet" href="css/style.css"></head>
 
 <body>
 <div id="pingpong">
 <div id="table">
 <div id="line"></div>
 <div id="net-top"></div>
 <div id="net-middle"></div>
 <div id="net-bottom"></div>
 <div id="net-shadow"></div>
 </div>
 <!-- web前端中文站 -->
 <div id="c1">
 <div id="b1"></div>
 </div>
 <div id="c2">
 <div id="b2"></div>
 </div>
 <div id="c3">
 <div id="b3"></div>
 </div>
 <div id="c4">
 <div id="b4"></div>
 </div>
 <span id="ping">PING</span>
 <span id="pong">PONG</span></div>
 </body>

 </html>

style.css 代码：

 @import url(https://fonts.googleapis.com/css?family=Chewy);
 body {
 background:#7FA3C7;
 font-family:'Chewy',cursive;
 text-align:center;
 font-size:50px;
 color:white;
 overflow:hidden;
}
#ping {
 position:absolute;
 top:30px;
 left:-80px;
 opacity:0;
 animation:animPing 2s linear infinite;
}
#pong {
 position:absolute;
 top:30px;
 right:-90px;
 opacity:0;
 animation:animPing 2s 1s linear infinite;
}
@keyframes animPing {
 0% {
 opacity:0.8;
}
35%,100% {
 opacity:0;
}
}#pingpong {
 margin:0 auto;
 margin-top:100px;
 position:relative;
 width:380px;
 height:150px;
}
#table {
 position:absolute;
 top:30px;
 left:0px;
 border-bottom:80px solid #fff;
 border-left:80px solid transparent;
 border-right:80px solid transparent;
 height:0;
 width:220px;
}
#table:before {
 display:block;
 content:' ';
 position:absolute;
 top:1px;
 left:-78px;
 border-bottom:78px solid #2E4E80;
 border-left:78px solid transparent;
 border-right:78px solid transparent;
 height:0;
 width:220px;
}
#table:after {
 display:block;
 content:' ';
 position:absolute;
 top:80px;
 left:-80px;
 height:20px;
 width:380px;
 background:#192A44;
}
#line {
 position:absolute;
 width:280px;
 top:30px;
 left:-30px;
 border-bottom:solid 1px white;
}
#net-top {
 position:absolute;
 top:-25px;
 margin-left:106px;
 margin-right:106px;
 width:8px;
 height:25px;
 background:#333;
}
#net-top:before {
 display:block;
 content:" ";
 position:absolute;
 top:-3px;
 width:4px;
 border-left:solid 2px transparent;
 border-right:solid 2px transparent;
 border-bottom:solid 3px rgb(115,115,115);
}
#net-middle {
 position:absolute;
 top:-20px;
 left:109px;
 width:2px;
 height:80px;
 background:white;
}
#net-bottom {
 position:absolute;
 top:65px;
 left:104px;
 width:12px;
 height:43px;
 background:#333;
 z-index:1;
}
#net-bottom:before {
 display:block;
 content:" ";
 position:absolute;
 top:-8px;
 width:10px;
 border-left:solid 1px transparent;
 border-right:solid 1px transparent;
 border-bottom:solid 8px rgb(115,115,115);
}
#net-shadow {
 position:absolute;
 left:111px;
 border-bottom:80px solid rgba(0,0,0,0.2);
 border-right:30px solid transparent;
 height:0;
 width:20px;
}
#c1,#c2 {
 position:absolute;
 width:300px;
 height:300px;
}
#c3,#c4 {
 position:absolute;
 width:150px;
 height:150px;
}
#c1 {
 top:0;
 left:0;
 animation:rotateC1 2s linear infinite;
}
#c2 {
 top:0;
 left:80px;
 animation:rotateC2 2s linear infinite;
}
#c3 {
 top:40px;
 left:-10px;
 animation:rotateC3 2s linear infinite;
}
#c4 {
 top:40px;
 right:-10px;
 animation:rotateC4 2s linear infinite;
}
@keyframes rotateC1 {
 0% {
 opacity:1;
 transform:rotate(-44deg);
}
35% {
 opacity:1;
 transform:rotate(52deg);
}
36%,100% {
 opacity:0;
}
}@keyframes rotateC2 {
 0%,49% {
 opacity:0;
}
50% {
 opacity:1;
 transform:rotate(44deg);
}
85% {
 opacity:1;
 transform:rotate(-52deg);
}
86%,100% {
 opacity:0;
}
}@keyframes rotateC3 {
 0%,84% {
 opacity:0;
}
85% {
 opacity:1;
 transform:rotate(39deg);
}
100% {
 opacity:1;
 transform:rotate(-15deg);
}
}@keyframes rotateC4 {
 0%,34% {
 opacity:0;
}
35% {
 opacity:1;
 transform:rotate(-39deg);
}
50% {
 opacity:1;
 transform:rotate(15deg);
}
51%,100% {
 opacity:0;
}
}#b1,#b2,#b3,#b4 {
 position:absolute;
 width:10px;
 height:10px;
 background:white;
 border-radius:10px;
}
#b1,#b2 {
 top:-5px;
 left:145px;
}
#b3,#b4 {
 top:-5px;
 left:70px;
}

整个动画的源代码不到2kb，没有一个图片，全部由 CSS3 实现。

【注：本文源自网络文章资源，由站长整理发布】