公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog2,发送下载链接帮助你免费下载!
本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog2,之前的微信号好友位已满,备注:返现
受密码保护的文章请关注“业余草”公众号,回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年,高性价比,助您轻松上云
本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog2,之前的微信号好友位已满,备注:返现
受密码保护的文章请关注“业余草”公众号,回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年,高性价比,助您轻松上云
网上有很多关于 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)!可加作者微信号:xttblog2。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!
本文原文出处:业余草: » CSS3实现打乒乓球游戏动画效果