css简单的轮播图实现

通过css实现简单的轮播图
css简单的轮播图实现_第1张图片


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图title>
  <style>
    #container {width: 400px; height: 300px; overflow: hidden;}
    #photo {width: 1200px; animation: switch 5s ease-out infinite;}
    #photo > img {float: left; width: 400px; height: 300px;}
    @keyframes switch {
      0%, 25% {margin-left: 0;}
      35%, 60% {margin-left: -400px;}
      70%, 100% {margin-left: -800px;}
     }
  style>
head>
<body>
  <div id="container">
    <div id="photo">
      <img src="./img/img0.jpg" alt="0">
      <img src="./img/img1.jpg" alt="1">
      <img src="./img/img2.jpg" alt="2">
    div>
  div>
body>
html>

图片:
css简单的轮播图实现_第2张图片
css简单的轮播图实现_第3张图片
css简单的轮播图实现_第4张图片

你可能感兴趣的:(#,CSS)