日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

web前端 运用CSS动画 实现图像的幻灯片 自动播放 切换效果

發布時間：2023/12/20 HTML 31 豆豆
生活随笔 收集整理的這篇文章主要介紹了 web前端 运用CSS动画 实现图像的幻灯片 自动播放 切换效果 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

先看一下瀏覽器運行結果：

一、

  • 最初用”background-image”背景圖片屬性定義動畫，結果幻燈片切換時沒有上下滑動的效果。
  • 僅用到HTML和CSS，未用javascript。

    • 二、代碼：
    HTML:

    <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="style.css"/> </head> <body> <div class="box"><ul><li><img src="image/01.jpg" alt=""></li><li><img src="image/02.jpg" alt=""></li><li><img src="image/03.jpg" alt=""></li></ul> </div> </body> </html>

    CSS:

    *{padding: 0;margin: 0; } .box{display: block;width: 800px;height: 360px;overflow: hidden; } ul{position: relative;top: -720px;display: block;width: 800px;height: 1080px;animation:myp 10s infinite linear; } @keyframes myp{33%{top: -360px;}44%{top: -360px;}66%{top: 0;}77%{top: 0;} } li{display: block;/*float: top;*/width: 800px;height: 360px; } li img{display: block;width: 800px;height: 360px; }

    三、
    代碼其實不多，這里說明一下原理吧：

  • 首先設置一個盒子(.box)，把ul放到盒子里。
  • 3張圖片分別為ul的3個列表項目。
  • ul列表的實際高度是盒子高度的三倍，在盒子中使用 "overflow: hidden"屬性,使ul超出盒子的部分隱藏，這樣就實現了只能顯示一張圖片的大小。
  • 最后通過 ul 的 top屬性調整上邊界距離，調用動畫改變li的位置從而達到幻燈片效果。

    • ----------------------------------------------分割線----------------------------------------------
    第一次更新（2020.05.24）：

    一、代碼進行了完善與優化
    HTML：

    <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>CSS3幻燈片切換效果</title><link rel="stylesheet" type="text/css" href="style.css"> </head><body> <div id="slider"><div id="mask"><ul><li id="first"><a href="#"><img src="images/b-ad1.jpg" alt="Python" title="Python"> </a></li><li id="second"><a href="#"><img src="images/b-ad2.jpg" alt="前端開發" title="前端開發"></a></li><li id="third"><a href="#"><img src="images/b-ad3.jpg" alt="Python基礎教程" title="Python基礎教程"></a></li></ul></div> </div> </body> </html>

    CSS:

    *{margin:0;padding:0; } li{list-style:none; } #mask {overflow:hidden;/*指定如果內容溢出元素的框，內容會被修剪，并且其余內容是不可見的。*/height:360px; } #slider ul {position:relative; } #slider li {width:800px;height:360px;position:absolute;}@keyframes animation1 {0% { top:0px; }/*初始狀態*/20% { top:0px; }/*停留了一會兒時間*/40% { top:360px; }/*向下移動了*/100% { top:720px; } } @keyframes animation2 {0% { top:-360px; }/*初始狀態*/20% { top:-360px; }/*停留了一會兒時間*/40% { top:0px;}/*向下移動了*/60% { top:0px;}/*停留了一會兒時間*/80% { top:360px;}/*向下移動了*/100% { top:360px; }/*停留了一會兒時間*/ } @keyframes animation3 {0% { top:-720px; }60% { top:-360px; }80% { top:0px; }/*向下移動了*/100% { top:0px;}/*停留了一會兒時間*/ }#slider {height:360px;width:800px;margin:40px auto 0;overflow:visible;position:relative; }#first {animation:animation1 15s linear infinite;/*調用動畫，整個動畫循環一次時長15s，無限次循環*/ } #second {animation:animation2 15s linear infinite; } #third {animation:animation3 15s linear infinite; } #slider:hover li{animation-play-state:paused;/*設置超鏈接偽類，當鼠標懸停在列表項目上的圖片上時，動畫暫停*/ }

    運行結果如下:

    這次更新主要解決的問題;
    1.第三個圖像切換后，無法立即切換回第一個圖像，需要往上滑動才能回到第一個圖像，現在可以在第三個圖像播放完之后直接跳轉到第一個圖像，然后一直循環下去。
    2.設置了超鏈接偽類，當鼠標懸停在列表項目上的圖片上時，動畫會暫停滾動。

    總結

    以上是生活随笔為你收集整理的web前端 运用CSS动画 实现图像的幻灯片 自动播放 切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。