本篇文章给大家分享的是有关使用css怎么实现一个幻灯片效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
实现方法:首先定义多张幻灯片元素;然后使用“@keyframes”规则和animation属性定义动画;接着在动画中根据幻灯片数量定义关键帧;最后在关键帧中使用“transform:translateX()”样式实现切换效果。
通过transfrom属性进行2D转换
html代码:
<section id=box>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>1</li>
</ul>
</section>
css代码:
<style>
* {
margin: 0;
padding: 0;
font-family: 微软雅黑;
list-style: none;
}
#box{
width:400px;
height:200px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
}
ul{
width: 2000px;
animation: dh 10s infinite ease;
}
ul li{
width:400px;
height:200px;
float: left;
}
ul li:nth-child(1){
background:#4b86db;
}
ul li:nth-child(2){
background:#ff9999;
}
ul li:nth-child(3){
background:olivedrab;
}
ul li:nth-child(4){
background:skyblue;
}
ul li:nth-child(5){
background:#4b86db;
}
@keyframes dh {
0%{transform: translateX(0)}
25%{transform: translateX(-400px)}
50%{transform: translateX(-800px)}
75%{transform: translateX(-1200px)}
100%{transform: translateX(-1600px)}
}
</style>
以上就是使用css怎么实现一个幻灯片效果,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。