纯CSS3写的动感桌球_表单按钮_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

纯CSS3写的动感桌球

来源：未知作者：大小：大小： 0KB 点击次数：发布时间：2017-06-15 19:58:56 去下载去预览

特效介绍

本插件是用纯CSS3动画效果制作的一个动态的台球效果，没有用到任何的JS代码，小球会在台球桌上来回碰壁滚动，效果逼真。

运行下面代码查看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS3写的动感桌球 - 我爱模板网</title> <style> body { background: #222; } .box { background-color: #61ab20; margin: 0 auto; width: 500px; height: 300px; position: relative; box-shadow: inset 0 0 3px #000; border-radius: 5px; border: 1px solid #111; overflow: hidden; } .box b { display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #3673cf; box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04); position: absolute; -webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; -moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; -o-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; } @-webkit-keyframes moveX { from { left: 0; } to { left: 480px; } } @-moz-keyframes moveX { from { left: 0; } to { left: 480px; } } @-o-keyframes moveX { from { left: 0; } to { left: 480px; } } @keyframes moveX { from { left: 0; } to { left: 480px; } } @-webkit-keyframes moveY { from { top: 0; } to { top: 280px; } } @-moz-keyframes moveY { from { top: 0; } to { top: 280px; } } @-o-keyframes moveY { from { top: 0; } to { top: 280px; } } @keyframes moveY { from { top: 0; } to { top: 280px; } } </style> </head> <body> <div class="box"><b></b></div> </body> </html>
提示：您可以先修改部分代码再运行

使用方法

略