CSS实现的动画效果：移动卷轴与展开绘画-CSDN博客

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style type="text/css">
	body {
		background: #888;
	}

	@keyframes moveReel {
		to {
			transform: translateX(752px);
		}	
	}

	@keyframes expandPainting {
		100% {
			width: 720px;
	    	border: 20px solid #EBC669;
		}
	}

	.container {
		margin: 0 auto;
		width: 900px;
		height: 500px;
	 	background: #fff;
	 	position: relative;
	 	margin-top: 100px;
	}

	.leftReelWrapper {
		position: absolute;
		left: 50px;
		top: 50%;
		margin-top: -180px;
	}

	.rightReelWrapper {
		position: absolute;
		left: 76px;
		top: 50%;
		margin-top: -180px;
		animation: moveReel 5s linear 1s forwards;
	}

	.leftTopReel, .rightReel {
		width: 20px;
		height: 300px;
		margin-left: 3px;
		background: linear-gradient(90deg, #884433, #FBBC62, #CC5F3D);
	}

	.leftTopHandle, .rightTopHandle, .leftBottomHandle, .rightBottomHandle {
		width: 20px;
		height: 24px;
		margin-left: 3px;
		background: linear-gradient(90deg, #411C1D, #832C29, #411C1D);
	}

	.leftTopHandleBorder, .leftBottomHandleBorder, .rightTopHandleBorder, .rightBottomHandleBorder {
		width: 26px;
		height: 6px;
		border-radius: 6px;
		background: linear-gradient(90deg, #411C1D, #832C29, #411C1D);
	}

	.content {
	    position: absolute;
	    background-color: transparent;
	    border-left: 20px solid #EBC669;
	    border-top: 20px solid #EBC669;
	    border-bottom: 20px solid #EBC669;
	    width: 6px;
	    height: 261px;
    	left: 72px;
	    top: 56%;
	    margin-top: -180px;
		animation: expandPainting 5s linear 1s forwards;
		overflow: hidden;
	}

</style>
<body>
	
	<div class="container">

		<div class="leftReelWrapper">
			<div class="leftTopHandleBorder"></div>
			<div class="leftTopHandle"></div>
			<div class="leftTopReel"></div>
			<div class="leftBottomHandle"></div>
			<div class="leftBottomHandleBorder"></div>
		</div>

		<div class="content">
			<img class="pic" src='https://img0.baidu.com/it/u=2730152508,122072337&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto?sec=1686762000&t=a72ad0b9200d2385ecb5c0617d48c40e' width="720px" height="261px" />
		</div>

		<div class="rightReelWrapper">
			<div class="rightTopHandleBorder"></div>
			<div class="rightTopHandle"></div>
			<div class="rightReel"></div>
			<div class="rightBottomHandle"></div>
			<div class="rightBottomHandleBorder"></div>
		</div>
		
	</div>
</body>
</html>

		<!-- <div class="content">
			<img src='./route.jpeg' width="100%" height="260px" />
		</div> -->

		<!-- 透视过去 -->

		<!-- border问题 -->