网上有很多关于 CSS3 的动画教程，只要大家学会了最基本的动画知识，任何有难度的动画效果都可以轻松的实现。今天为大家分享一款简易的打乒乓球动画。
该动画全部由 CSS3 实现的乒乓球动画特效，主要是模拟了乒乓球运动动画，画面上用 CSS3 绘制了一张乒乓球桌，一个乒乓球在球桌上来回运动，就好象两个运动员在打乒乓球一样。当然如果你可以在球桌两端绘制两个运动员那就更加逼真的。
该动画的静态图效果如下：
页面html代码如下：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>纯CSS3乒乓球动画DEMO演示</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>
<!-- www.xttblog.com -->
<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 实现。
： » CSS3实现打乒乓球游戏动画效果
原创文章，作者：wure，如若转载，请注明出处：https://blog.ytso.com/251342.html