css如何实现图片轮播

lewis 6年前 (2019-03-15) 阅读数 7 #程序编程

文章标签 css

使用css实现图片轮播的方法：1.创建img标签，添加图片；2.使用position属性定位图片，设置宽高；3.使用@keyframescarousel属性设置图片轮播；

使用css实现图片轮播的方法

1.首先，在页面中创建对个img标签，并添加图片；

<!DOCTYPEhtml><html>
<head>
<metacharset="utf-8"/>
<style>
</style>
</head>
<body>
<imgsrc="1.jpg">
<imgsrc="2.jpg">
<imgsrc="3.jpg">
</body>
</html>

2.图片添加好后，在css中使用position属性对图片进行定位并设置宽高；

<!DOCTYPEhtml><html>
<head>
<metacharset="utf-8"/>
<style>
img{
position:absolute;
width:300px;
height:100px;
}
</style>
</head>
<body>
<imgsrc="1.jpg">
<imgsrc="2.jpg">
<imgsrc="3.jpg">
</body>
</html>

4.最后，图片样式设置好后，使用@keyframescarousel属性设置图片轮播即可；

<!DOCTYPEhtml><html>
<head>
<metacharset="utf-8"/>
<style>
img{
position:absolute;
width:300px;
height:100px;
}
@keyframescarousel{
0%,33%{
　　left:0;
　　}33%,67%{
left:300px;
}67%,100%{
left:600px;
}
}
</style>
</head>
<body>
<imgsrc="1.jpg">
<imgsrc="2.jpg">
<imgsrc="3.jpg">
</body>
</html>