CSS3 div從左側滑入效果程式碼例項
分享一段程式碼例項,它實現了div從左側滑入的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> div{ margin:200px; width:150px; height:100px; background:green; animation: bounceInLeft 1s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000) } @keyframes bounceInLeft { 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } 100% { transform: none; } } </style> </head> <body> <div></div> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).animation屬性參閱CSS3 animation一章節。
(2).@keyframes參閱CSS3 @keyframes一章節。
(3).transform:translate3d()參閱CSS3 translate3d(x,y,z)一章節。
(4).transform: rotate3d()參閱CSS3 rotate3d(x,y,z,angle)一章節。
相關文章
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3星空效果程式碼例項CSSS3
- css3水滴效果程式碼例項CSSS3
- CSS3 名片效果程式碼例項CSSS3
- css左側欄固定右側欄寬度自適應程式碼例項CSS
- css3實現的div上下左右翻轉效果程式碼例項CSSS3
- div前後翻轉效果程式碼例項
- div css搜尋框效果程式碼例項CSS
- div的淡入淡出效果程式碼例項
- div css三列布局效果例項程式碼CSS
- CSS3小黃人效果程式碼例項CSSS3
- css3晃動效果程式碼例項CSSS3
- CSS3心形效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3彈球效果程式碼例項CSSS3
- 設定div元素漸隱效果程式碼例項
- CSS3滑過光束效果程式碼例項CSSS3
- css3繪製月牙效果程式碼例項CSSS3
- css3折角效果程式碼例項CSSS3
- CSS3梯形效果程式碼例項CSSS3
- CSS3背景漸變效果程式碼例項CSSS3
- css3立方體效果程式碼例項CSSS3
- css3優惠券效果程式碼例項CSSS3
- CSS3星系運動效果程式碼例項CSSS3
- css3漂浮氣球效果程式碼例項CSSS3
- js實現的div拖動效果例項程式碼JS
- css實現的div垂直居中效果程式碼例項CSS
- 移動端div塊拖動效果程式碼例項
- CSS實現div層半透明效果程式碼例項CSS
- CSS3文字凹凸效果程式碼例項CSSS3
- css3實現的折角效果程式碼例項CSSS3
- css3大象行走效果程式碼例項CSSS3
- css實現div全屏水平垂直居中效果程式碼例項CSS
- js點選div實現閃爍效果程式碼例項JS
- javascript實現的div塊閃爍效果程式碼例項JavaScript
- CSS3文字陰影效果程式碼例項CSSS3