css动画控制左右轮播

最新推荐文章于 2025-05-04 03:32:42 发布

原创最新推荐文章于 2025-05-04 03:32:42 发布 · 置顶 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css动画控制左右轮播

Js、Jq轮播图、切换专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何使用 CSS3 实现一个无缝过渡的轮播图效果，通过关键帧动画和 transform 属性实现图片平滑滚动。代码示例中包含了 HTML 结构、CSS 样式及动画设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
<title>Css3无缝轮播</title>    
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>    
<meta name="apple-mobile-web-app-capable" content="yes">    
<meta name="apple-mobile-web-app-status-bar-style" content="black">    
<meta name="format-detection" content="telephone=no">    
<style>    
    @keyframes move{ 
    0%,20%{    
        transform:translateX(0px);    
    }    
    20%,40%{    
        transform:translateX(-300px);    
    }     
    40%,60%{    
        transform:translateX(-600px);    
    }    
    60%,80%{    
        transform:translateX(-900px);    
    }  
    80%,100%{    
        transform:translateX(-1200px);    
    }   
	/*上面为继承效果无过渡平均分5份 0%20%,25%50%,55%70%,75%100% 这种是过渡效果4份看实际情况分析*/    
}    
    .wrap{    
        width: 300px;    
        height: 200px;    
        margin: 0 auto;    
        overflow: hidden;    
         border: 5px solid red;    
    }    
    ul{    
        list-style: none;    
        margin: 0;    
        padding:0;    
    }    
    .list{    
        width: 500%;/*对应图片的数量*/    
        animation:move 10s infinite;    
    }    
    .list li{    
        float: left;    
    }    
    img{    
        width: 300px;    
        height: 200px;    
    }    
</style>    
</head>    
<body>    
 <div class="wrap">    
    <ul class="list">    
        <li><img src="img/1.jpg" alt=""></li>    
        <li><img src="img/2.jpg" alt=""></li>    
        <li><img src="img/3.jpg" alt=""></li>    
        <li><img src="img/4.jpg" alt=""></li>    
        <li><img src="img/1.jpg" alt=""></li>  
    </ul>    
 </div>    
</body>    
</html>