CSS3彈球效果程式碼例項
本章節分享一段程式碼例項,它實現了小球墜地然後談起的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .box { width: 400px; height: 300px; border: 1px #ccc solid; margin: 30px auto; position: relative; } .box .ball { width: 140px; height: 140px; border-radius: 50%; position: absolute; top:0; left: 50%; margin-left: -70px; background: -webkit-linear-gradient(top,#fff,#999); box-shadow: inset 0 0 30px #999, inset 0 -15px 70px #999; -webkit-animation: jump 1s ease-in-out infinite; z-index: 1; } .box .ball:after { content: " "; display: block; width: 70px; height: 30px; border-radius: 50%; position: absolute; top: 10px; left: 50%; margin-left: -35px; background: -webkit-linear-gradient(#fff,#ccc); } .shadow { width: 80px; height: 60px; border-radius: 50%; position: absolute; bottom: 0; left: 50%; margin-left: -40px; background: rgba(20,20,20,.1); box-shadow: 0 0 25px 20px rgba(20,20,20,.1); transform: scaleY(.3); -webkit-animation: shrink 1s infinite; } @-webkit-keyframes jump { 0% { top: 0; -webkit-animation-timing-function: ease-in; } 65% { top: 160px; height: 140px; } 75% { height: 120px; } 100% { top: 0; height: 140px; } } @-webkit-keyframes shrink { 0% { width: 90px; height: 60px; } 65% { width: 10px; height: 5px; margin-left: -5px; background: rgba(20,20,20,.3); box-shadow: 0 0 25px 20px rgba(20,20,20,.3); } 100% { width: 90px; height: 60px; background: rgba(20,20,20,.1); box-shadow: 0 0 25px 20px rgba(20,20,20,.1); } } </style> </head> <body> <div class="box"> <div class="ball"></div> <div class="shadow"></div> </div> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).線性漸變參閱CSS3 linear-gradient一章節。
(2).box-shadow參閱CSS3 box-shadow一章節。
(3).animation參閱CSS3 animation一章節。
(4).transform參閱CSS3 transform一章節。
(5).@keyframes參閱CSS3 @keyframes一章節。
相關文章
- css3漂浮氣球效果程式碼例項CSSS3
- css3實現網狀球體效果程式碼例項CSSS3
- js重力球效果程式碼例項JS
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- css3星空效果程式碼例項CSSS3
- css3水滴效果程式碼例項CSSS3
- CSS3 名片效果程式碼例項CSSS3
- CSS3小黃人效果程式碼例項CSSS3
- css3晃動效果程式碼例項CSSS3
- CSS3心形效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- canvas模擬彈幕效果程式碼例項Canvas
- CSS3滑過光束效果程式碼例項CSSS3
- css3繪製月牙效果程式碼例項CSSS3
- css3折角效果程式碼例項CSSS3
- CSS3梯形效果程式碼例項CSSS3
- CSS3背景漸變效果程式碼例項CSSS3
- css3立方體效果程式碼例項CSSS3
- css3優惠券效果程式碼例項CSSS3
- CSS3星系運動效果程式碼例項CSSS3
- CSS3文字凹凸效果程式碼例項CSSS3
- css3實現的折角效果程式碼例項CSSS3
- css3大象行走效果程式碼例項CSSS3
- canvas實現的彈力小球效果程式碼例項Canvas
- CSS3文字陰影效果程式碼例項CSSS3
- CSS3 div從左側滑入效果程式碼例項CSSS3
- css3文字鏤空效果程式碼例項CSSS3
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- CSS3文字漸現效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- css3鋸齒形邊框效果程式碼例項CSSS3
- CSS3 Flex 彈性佈局例項程式碼詳解CSSS3Flex
- css3實現的斑馬紋效果程式碼例項CSSS3
- css3元素的伸縮效果程式碼例項CSSS3