css如何實(shí)現(xiàn)圖片輪播

css
養(yǎng)魚的貓咪
499
2021-03-29 11:21:06

使用css實(shí)現(xiàn)圖片輪播的方法：1.創(chuàng)建img標(biāo)簽，添加圖片；2.使用position屬性定位圖片，設(shè)置寬高；3.使用@keyframescarousel屬性設(shè)置圖片輪播；

css如何實(shí)現(xiàn)圖片輪播

使用css實(shí)現(xiàn)圖片輪播的方法

1.首先，在頁(yè)面中創(chuàng)建對(duì)個(gè)img標(biāo)簽，并添加圖片；

<!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屬性對(duì)圖片進(jìn)行定位并設(shè)置寬高；

<!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.最后，圖片樣式設(shè)置好后，使用@keyframescarousel屬性設(shè)置圖片輪播即可；

<!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>


0 踩