网上有很多关于 CSS3 的动画教程，只要大家学会了最基本的动画知识，任何有难度的动画效果都可以轻松的实现。今天为大家分享一款简易的打乒乓球动画。
更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏
该动画全部由 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 实现。
【注：本文源自网络文章资源，由站长整理发布】
