网上有很多关于 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 实现。
【注:本文源自网络文章资源,由站长整理发布】