css實現的div旋轉簡單程式碼例項
由於css3的出現,使得控制元素的功能給位強大,原來在css2中很難實現的功能,在css3中變得輕而易舉,下面就通過例項程式碼介紹一下如何實現元素的旋轉效果,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ transform:rotate(30deg); -webkit-transform:rotate(30deg); -o-transform:rotate(30deg); -ms-transform:rotate(30deg); -moz-transform:rotate(30deg); width:100px; height:100px; background:green; text-align:center; line-height:100px; font-size:12px; margin:50px; } </style> </head> <body> <div>螞蟻部落</div> </body> </html>
以上程式碼實現div的旋轉,但是沒有動態效果,一下就定格在那個位置的,下面將其修改成動態的。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ animation:theanimation 5s infinite alternate; -webkit-animation:theanimation 5s infinite alternate; -moz-animation:theanimation 5s infinite alternate; -o-animation:theanimation 5s infinite alternate; -ms-animation:theanimation 5s infinite alternate ; width:100px; height:100px; background:green; text-align:center; line-height:100px; font-size:12px; margin:50px; } @keyframes theanimation{ 0%{transform:rotate(0deg);} 100%{transform:rotate(30deg);} } @-webkit-keyframes theanimation{ 0%{-webkit-transform:rotate(0deg);} 100% {-webkit-transform:rotate(30deg);} } @-moz-keyframes theanimation{ 0% {-moz-transform:rotate(0deg);} 100% {-moz-transform:rotate(30deg);} } @-o-keyframes theanimation{ 0%{-o-transform:rotate(0deg);} 100%{-o-transform:rotate(30deg);} } @-ms-keyframes theanimation{ 0%{-ms-transform:rotate(0deg);} 100%{-ms-transform:rotate(30deg);} } </style> </head> <body> <div>螞蟻部落</div> </body> </html>
以上程式碼實現了動態旋轉效果。
相關文章
- css控制div元素旋轉指定角度程式碼例項CSS
- css3實現的旋轉魔方效果程式碼例項CSSS3
- 滑鼠懸浮div實現旋轉縮放效果程式碼例項
- CSS3實現的3D旋轉程式碼例項CSSS33D
- css實現的div垂直居中效果程式碼例項CSS
- css3實現旋轉的太極圖效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- css實現的div垂直水平居中程式碼例項CSS
- CSS實現div層半透明效果程式碼例項CSS
- css3實現的div上下左右翻轉效果程式碼例項CSSS3
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- jQuery實現的簡單投票簡單程式碼例項jQuery
- css實現div全屏水平垂直居中效果程式碼例項CSS
- CSS3實現的環形旋轉載入補全效果程式碼例項CSSS3
- css3實現滑鼠懸浮圖示旋轉高亮效果程式碼例項CSSS3
- canvas實現的旋轉的太極圖效果程式碼例項Canvas
- html實現簡單ListViews效果的例項程式碼HTMLView
- javascript實現的動畫效果簡單例項程式碼JavaScript動畫單例
- css3實現div邊框陰影效果程式碼例項CSSS3
- CSS實現div固定於網頁右下角例項程式碼CSS網頁
- css3實現div元素垂直水平居中程式碼例項CSSS3
- CSS讓div水平居中例項程式碼CSS
- div css左右佈局例項程式碼CSS
- css實現梯形程式碼例項CSS
- EasyUI實現的form表單提交簡單程式碼例項UIORM
- javascript實現的簡單驗證碼效果程式碼例項JavaScript
- css簡單水平導航選單程式碼例項CSS
- js實現的div拖動效果例項程式碼JS
- jQuery實現的div垂直水平居中例項程式碼jQuery
- jQuery實現的自動播放簡單程式碼例項jQuery
- canvas實現的簡單餅狀圖程式碼例項Canvas
- canvas實現的簡單塗鴉板程式碼例項Canvas
- canvas實現的簡單畫板效果程式碼例項Canvas
- js實現的字串簡單編碼和解碼程式碼例項JS字串
- 旋轉等待內容載入完畢實現程式碼例項
- css 兄弟選擇器簡單程式碼例項CSS
- div css搜尋框效果程式碼例項CSS