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

HTML

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

發布時間：2023/12/20 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 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动画实现图像的幻灯片自动播放切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：操作系统-处理机调度详解（调度层次及FC
下一篇：教师计算机考试高频题型,教师资格证考试信

HTML

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

總結

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