css3动画 简单轮播图

效果如下:
css3动画 简单轮播图_第1张图片
代码如下:


<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>轮播图title>
	<style>
		* {
      
			padding: 0;
			margin: 0;
		}

		body {
      
			width: 100vw;
			height: 100vh;
			background-color: #34495e;
			display: grid;
		}

		main {
      
			width: 400px;
			height: 200px;
			align-self: center;
			justify-self: center;
			overflow: hidden;
			position: relative;
		}

		section {
      
			width: 1600px;
			height: 200px;
			display: grid;
			grid-template: 1fr/repeat(4, 1fr);
			animation: slide 8s infinite steps(4, end);
		}

		section:hover,
		section:hover+ul::after {
      
			animation-play-state: paused;
		}

		div {
      
			overflow: hidden;
		}

		img {
      
			width: 100%;
			height: 200px;
		}

		@keyframes slide {
      
			to {
      
				transform: translateX(-1600px);
			}
		}

		ul {
      
			list-style: none;
			position: absolute;
			left: 50%;
			bottom: 10px;
			transform: translateX(-50%);
			display: grid;
			grid-template: 1fr/repeat(4, 1fr);
			width: 100px;
			justify-items: center;
		}

		li {
      
			width: 20px;
			height: 20px;
			background-color: #bdc3c7;
			opacity: .3;
			border-radius: 50%;
			display: grid;
			justify-content: center;
			align-items: center;
			color: #fff;
		}

		ul::after {
      
			content: '';
			position: absolute;
			border-radius: 50%;
			width: 20px;
			height: 20px;
			left: 3px;
			top: 0px;
			z-index: -1;
			background-color: #c0392b;
			animation: dot1 8s infinite steps(4, end);
		}

		@keyframes dot1 {
      
			to {
      
				transform: translateX(100px);
			}
		}
	style>
head>

<body>
	<main>
		<section>
			<div><img src="images/img1.jpg" alt="">div>
			<div><img src="images/img2.jpg" alt="">div>
			<div><img src="images/img3.jpg" alt="">div>
			<div><img src="images/img4.jpg" alt="">div>
		section>
		<ul>
			<li>1li>
			<li>2li>
			<li>3li>
			<li>4li>
		ul>
	main>
body>

html>

你可能感兴趣的:(css,css3)