css最简单的轮播效果和旋转（跑马灯）效果的实现

银子先生

已于 2022-04-24 14:47:47 修改

阅读量1.1k

点赞数 1

文章标签： css3 前端 html5

于 2022-04-24 14:46:49 首次发布

本文链接：https://blog.csdn.net/z1093541823/article/details/124382592

版权

代码拿来就能用，只需要将图片替换为自己的就可以，和html同级别即可

一、旋转（跑马灯）

<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<style type="text/css">
		.content {
			width: 1000px;
			height: 500px;
			margin: 0 auto;
			border-radius: 30px;
			/* background-image: url('./bgImg.jpg'); */
			position: relative;
		}

		.content div {
			width: 400px;
			height: 300px;
			position: absolute;
			left: 300px;
			top: 100px;
			transform-style: preserve-3d;
			animation: rotate 12s linear infinite;
		}

		.content div a {
			display: block;
			width: 400px;
			height: 300px;
			position: absolute;

		}

		@keyframes rotate {
			0% {
				transform: rotate(0);
			}

			100% {
				transform: rotateY(360deg);
			}
		}

		.content div a:nth-child(1) {
			background-image: url('./bg2.jpg');
			background-size: cover;
			transform: translateZ(270px);
		}

		.content div a:nth-child(2) {
			background-image: url('./bg3.jpg');
			background-size: cover;
			transform: translateX(270px) rotateY(90deg);
		}

		.content div a:nth-child(3) {
			background-image: url('./bg4.jpg');
			background-size: cover;
			transform: translateZ(-270px);
		}

		.content div a:nth-child(4) {
			background-image: url('./bg.jpg');
			background-size: cover;
			transform: translatex(-270px) rotateY(-90deg);
		}
	</style>
</head>

<body>
	<div class="content">
		<div>
			<a href="#"></a>
			<a href="#"></a>
			<a href="#"></a>
			<a href="#"></a>
		</div>
	</div>
</body>

</html>

二、轮播效果

<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		img {
			width: 450px;
			height: 250px;
			overflow: left;
		}

		#container {
			width: 450px;
			height: 250px;
			overflow: hidden;
			margin: 50px auto;
		}

		#picture {
			width: 1800px;
			height: 250px;
			animation: switch 8s linear infinite;
		}

		#picture:hover {
			animation-play-state: paused;
			opacity: 0.5;
		}

		#picture:li:hover {
			opacity: 1;
		}

		#picture li {
			float: left;
			list-style-type: none
		}

		@keyframes switch {

			0%,
			10% {
				margin-left: 0;
			}

			30%,
			40% {
				margin-left: -450px;
			}

			60%,
			70% {
				margin-left: -900px;
			}

			90%,
			100% {
				margin-left: -1350px;
			}
		}
	</style>
</head>

<body>
	<div id="container">
		<ul id="picture">
			<li><img src="./bg2.jpg" width="1920" height="1080" /></li>
			<li><img src="./bg3.jpg" width="1920" height="1080" /></li>
			<li><img src="./bg4.jpg" width="1920" height="1080" /></li>
			<li><img src="./bg5.jpg" width="1920" height="1080" /></li>
		</ul>
</body>

</html>