文章摘要：css如何实现图片轮播 css怎么实现图片轮播
使用css实现图片轮播的方法：1.创建img标签，添加图片；2.使用position属性定位图片，设置宽高；3 […]
使用css实现图片轮播的方法：1.创建img标签，添加图片；2.使用position属性定位图片，设置宽高；3.使用@keyframescarousel属性设置图片轮播；
使用css实现图片轮播的方法
1.首先，在页面中创建对个img标签，并添加图片；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
</style>
</head>
<body>
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</body>
</html>
2.图片添加好后，在css中使用position属性对图片进行定位并设置宽高；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img{
position:absolute;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</body>
</html>
4.最后，图片样式设置好后，使用@keyframescarousel属性设置图片轮播即可；
<!DOCTYPE html>
<html>
<head>
<meta charset="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>
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</body>
</html>
声明：
若非注明，本站文章源于互联网收集整理和网友分享发布，如有侵权，请联系站长处理。
文章名称：css如何实现图片轮播 css怎么实现图片轮播
文章链接：http://www.7966.org/post/12341.html
转载请注明出处
