Implementation of the simplest carousel effect and rotation (Marquee) effect in css

The code can be used, just replace the picture with your own, and it can be at the same level as html

1. Rotation (Marquee)

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

2. Carousel effect

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

Implementation of the simplest carousel effect and rotation (Marquee) effect in css

Guess you like