DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> CSS3 animation實現簡易幻燈片輪播特效
CSS3 animation實現簡易幻燈片輪播特效
編輯：關於CSS     

CSS3有個別特性,可以觸發硬件GPU來加速渲染,而不是調用默認浏覽器引擎渲染;

但是很多屬性,默認都是不開啟硬件加速的;需要觸發條件,一個最簡單的觸發條件就是使用3D屬性(對Z軸的操作)

效果圖

代碼

XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <title>CSS3幻燈片</title>  
  7.     <style type="text/css" media="screen">  
  8.         .items {   
  9.             width: 280px;   
  10.             height: 150px;   
  11.             border: 1px solid #ddd;   
  12.                 box-sizing: border-box;   
  13.                 border-radius:10px;   
  14.                 background-size: cover;   
  15.             -webkit-transform: translateZ(0);   
  16.             transform: translateZ(0);   
  17.                 background-repeat: no-repeat;   
  18.             -webkit-animation: slider 15s linear infinite alternate;   
  19.             animation: slider 15s linear infinite alternate;   
  20.             -webkit-transform-origin: center center;   
  21.                     transform-origin: center center;   
  22.   
  23.         }   
  24.   
  25.   
  26.   
  27.         @-webkit-keyframes slider {   
  28.             0% {   
  29.                 background-image: url(1.jpg) ;   
  30.             }   
  31.             25% {   
  32.                 background-image: url(2.jpg) ;   
  33.   
  34.             }   
  35.             50% {   
  36.                 background-image: url(3.jpg) ;   
  37.   
  38.             }   
  39.             75% {   
  40.                 background-image: url(4.jpg);   
  41.   
  42.             }   
  43.             100% {   
  44.                 background-image: url(5.jpg);   
  45.   
  46.             }   
  47.         }   
  48. @keyframes slider {   
  49.             0% {   
  50.                 background-image: url(1.jpg) ;   
  51.   
  52.             }   
  53.             25% {   
  54.                 background-image: url(2.jpg) ;   
  55.   
  56.             }   
  57.             50% {   
  58.                 background-image: url(3.jpg) ;   
  59.   
  60.             }   
  61.             75% {   
  62.                 background-image: url(4.jpg);   
  63.   
  64.             }   
  65.             100% {   
  66.                 background-image: url(5.jpg);   
  67.   
  68.             }   
  69.         }   
  70.   
  71.   
  72.     </style>  
  73. </head>  
  74.   
  75. <body>  
  76.     <div class="slider">  
  77.         <div class="items"></div>  
  78.     </div>  
  79. </body>  
  80.   
  81. </html>  
  82.   

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

關於CSS
淺談CSS中display/float/position屬性值的相互影響
有3個屬性和布局以及box的創建有關：display, position 和 float，彼此交互作
WEB標准布局的Div + CSS 高度自適應解決方法
自適應高度的問題，采用 Div + CSS 進行三列或二列布局時，事先不知道具體高度，只能根據內容的
CSS網頁布局時常犯的幾種小錯誤
1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記　　即使是老手也經常會弄錯P的嵌套關系。可以用

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS經典技巧十則 關於box-sizing的全面理解 利用CSS3把圖片變成灰色模式的實例代碼 常用CSS縮寫語法總結 用CSS來控制網頁背景 CSS重要屬性之 margin 屬性知識大整合(必看篇) 深入理解css中position屬性及z-index屬性(推薦) 三種簡潔的Tab導航(網頁選項卡) 網頁制作：使用css設置iframe樣式 常用CSS縮寫語法
熱門推薦
CSS3模擬IOS滑動開關效果 CSS基礎教程: CSS的分組(Grouping)和嵌套(Nesting) 詳解CSS中zoom屬性或overflow:auto屬性清除浮動的作用 關於css旋轉動畫效果的簡單實現 CSS定義標題的實例講解 網站重構：利用CSS改善網站可訪問性 CSS控制用戶浏覽網頁的光標 CSS的滑動門技術研究 利用純CSS3實現動態的自行車特效源碼
大家都在看
疊加計算出錯的解決方法 Javascript的模塊化編程 新浪微博產品設計細節:CSS3效果的運用 利用Ajax實現在腳本裡傳值實例介紹 castor概述 CSS3的box-shadow屬性實現圖層陰影效果 浮動菜單是如何作出來的mouse事件 解決ajax返回驗證的時候總是彈出error錯誤的方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved