CSS3中怎么利用animation實現(xiàn)幻燈片輪播特效-創(chuàng)新互聯(lián)

CSS3 中怎么利用animation實現(xiàn)幻燈片輪播特效，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),常州企業(yè)網(wǎng)站建設(shè),常州品牌網(wǎng)站建設(shè),網(wǎng)站定制,常州網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,常州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

代碼


  1. <!DOCTYPE html>

  2. <html lang="en">

  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;

  23.         }

  27.         @-webkit-keyframes slider {

  28.             0% {

  29.                 background-image: url(1.jpg) ;

  30.             }

  31.             25% {

  32.                 background-image: url(2.jpg) ;

  34.             }

  35.             50% {

  36.                 background-image: url(3.jpg) ;

  38.             }

  39.             75% {

  40.                 background-image: url(4.jpg);

  42.             }

  43.             100% {

  44.                 background-image: url(5.jpg);

  46.             }

  47.         }

  48. @keyframes slider {

  49.             0% {

  50.                 background-image: url(1.jpg) ;

  52.             }

  53.             25% {

  54.                 background-image: url(2.jpg) ;

  56.             }

  57.             50% {

  58.                 background-image: url(3.jpg) ;

  60.             }

  61.             75% {

  62.                 background-image: url(4.jpg);

  64.             }

  65.             100% {

  66.                 background-image: url(5.jpg);

  68.             }

  69.         }

  72.     </style>

  73. </head>

  75. <body>

  76.     <div class="slider">

  77.         <div class="items"></div>

  78.     </div>

  79. </body>

  81. </html>

看完上述內(nèi)容，你們掌握CSS3 中怎么利用animation實現(xiàn)幻燈片輪播特效的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章題目：CSS3中怎么利用animation實現(xiàn)幻燈片輪播特效-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://muchs.cn/article22/dchdjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、電子商務、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司