CSS3 元素水平運動和背景色切換動畫效果
下面分享一段程式碼例項,它利用CSS3的animation動畫實現了div元素的水平運動效果,當然也可以垂直運動,在運動期間,元素的背景顏色會不斷的發生切換。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> div{ width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: red; position: relative; /*建立一個動畫 anim:動畫的名稱 5s:動畫的播放時間 infinite alernate:動畫播放完成後回過頭播放原動畫,類似於Cocos中的resever動作*/ animation: anim 5s infinite alternate; } /*設定各個階段的狀態*/ @keyframes anim { 0%{ background-color: red; left: 0px; top: 0px; } 25%{ background-color: blue; left: 200px; top: 0px; } 50%{ background-color: #ccffcc; left: 200px; top: 200px; } 75%{ background-color: cyan; left: 0px; top: 200px; } 100%{ background-color: red; left: 0px; top: 0px; } } </style> </head> <body> <div>螞蟻部落</div> </body> </html>
相關閱讀:
(1).animation參閱CSS3 animation一章節。
(2).@keyframes參閱CSS3 @keyframes一章節。
相關文章
- CSS3 div水平運動效果CSSS3
- svg實現矩形水平運動動畫效果SVG動畫
- CSS3元素水平運動指定距離CSSS3
- Android切換Activity的動畫效果Android動畫
- 滑鼠懸浮遮罩層動畫方式滑動切換效果遮罩動畫
- css3水平無縫滾動效果CSSS3
- canvas水平勻速運動效果Canvas
- activity切換無動畫效果的實現動畫
- 雙輪播加切換動畫效果元件動畫元件
- jQuery元素動畫方式滑動效果jQuery動畫
- jQuery背景色漸變動畫效果jQuery動畫
- css3動畫效果抖動解決CSSS3動畫
- css3水平滑動導航選單效果CSSS3
- JavaScript元素動畫效果JavaScript動畫
- CSS3滑鼠懸浮div水平運動CSSS3
- javascript元素水平運動程式碼例項JavaScript
- CSS3圖片上下動畫浮動效果CSSS3動畫
- js和css3實現的圖片立體滾動切換效果程式碼例項JSCSSS3
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- css3實現手機效果的“切換標籤”CSSS3
- jquery實現的元素以動畫方式移動和漸變效果jQuery動畫
- CSS 如何根據背景色自動切換黑白文字?CSS
- css3和js實現的大白動畫效果CSSS3JS動畫
- CSS3動畫按鈕效果CSSS3動畫
- 位置寬高元素垂直水平居中效果
- css多列li元素水平居中效果CSS
- vue路由切換滑動效果 vue頁面跳轉互動 vue實現動畫跳轉Vue路由動畫
- css3實現滑鼠懸浮文字水平晃動效果CSSS3
- CSS3 tab選項卡動態切換CSSS3
- ios 卡片切換效果iOS
- 浮動元素水平居中
- CSS3載入等待動畫效果CSSS3動畫
- css3動畫完成打字機效果CSSS3動畫
- CSS3多面體3D運動效果CSSS33D
- CSS3星系運動效果程式碼例項CSSS3
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- javascript選擇項相互移動切換效果JavaScript
- 如何實現span元素垂直水平居中效果