使用CSS实现图片轮播的方法:1.创建img标签,添加图片;2.使用position属性定位图片,设置宽高;3.使用@keyframescarousel属性设置图片轮播;使用css实现图片轮播的方法首先,在页面中创建对个img标签,并添加图
使用CSS实现图片轮播的方法:1.创建img标签,添加图片;2.使用position属性定位图片,设置宽高;3.使用@keyframescarousel属性设置图片轮播;
使用css实现图片轮播的方法
首先,在页面中创建对个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>
图片添加好后,在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>
最后,图片样式设置好后,使用@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>
--结束END--
本文标题: css如何实现图片轮播
本文链接: https://www.lsjlt.com/news/111724.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0