[網頁設計]使用CSS3動畫模擬實現小球自由落體效果

0 2015-07-20 14:00:03

使用純CSS代碼模擬實現小球自由落體效果：

html代碼如下：1

2 　　

CSS樣式代碼：/*ball樣式*/#ballDiv{ height:400px; background-color:#333333;}#ball{ width:100px; height:100px; border-radius:50%; background:-webkit-radial-gradient(center center,circle,#fff,blue); box-shadow:3px 7px 8px #ccc; -webkit-animation:ball 5s cubic-bezier(0.0,0.25,0.50,1.0); -webkit-transform:translate(250px, 300px);}@-webkit-keyframes ball{　　0%{-webkit-transform:translate(0, 0);}　　10%{-webkit-transform:translate(0, 330px); height:70px;}　　20%{-webkit-transform:translate(50px, 50px); height:100px;}　　30%{-webkit-transform:translate(50px, 330px); height:70px;}　　40%{-webkit-transform:translate(100px, 100px); height:100px;}　　50%{-webkit-transform:translate(100px, 320px); height:80px;}　　60%{-webkit-transform:translate(150px, 150px); height:100px;}　　70%{-webkit-transform:translate(150px, 320px); height:80px;}　　80%{-webkit-transform:translate(200px, 200px); height:100px;}　　90%{-webkit-transform:translate(200px, 300px); height:100px;}　　100%{-webkit-transform:translate(250px, 300px); height:100px;}}

轉載請保留本文網址：http://www.shaoqun.com/a/127042.html

*特別聲明：以上內容來自于網絡收集，著作權屬原作者所有，如有侵權，請聯系我們：admin@shaoqun.com。

CSS

0

總結

以上是生活随笔為你收集整理的html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。