溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS3 中怎么利用animation實(shí)現(xiàn)幻燈片輪播特效

發(fā)布時(shí)間：2021-08-09 16:14:44 來源：億速云 閱讀：87 作者：Leah 欄目：web開發(fā)

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

代碼

  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.   

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手