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

HTML5 herman 797浏览 0评论

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

该动画全部由 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 实现。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763,QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » CSS3实现打乒乓球游戏动画效果