CSS实现3D立体动态相册代码!

最新推荐文章于 2024-07-13 17:22:05 发布

小H的Henry

最新推荐文章于 2024-07-13 17:22:05 发布

阅读量3.1k

点赞数 3

文章标签： css html

本文链接：https://blog.csdn.net/weixin_42208402/article/details/107384898

版权

本文展示了如何利用CSS实现一个3D立体动态相册。通过创建合适的文件结构，将图片放入指定目录，并编写相应的HTML和CSS代码，可以制作出具有视觉效果的3D相册。内容包括HTML布局和CSS样式设置，需要注意调整图片的尺寸和方向以达到最佳效果。

摘要由CSDN通过智能技术生成

1.效果展示

你们喜欢玩的3D立体动态相册都在这里了，有手就行哦。
在这里插入图片描述

2.创建好路径

创建好一个文件夹，css目录下面创建好css文件，img目录下放好需要展示的图片，创建好html文件，具体如图所示：
在这里插入图片描述

3.HTML代码如下

<!DOCTYPE html>
<html>
<head>

<title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title>
<link type="text/css" href="css/1.css" rel="stylesheet" />
</head>
<body>
<div class="box">
	<ul class="minbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol class="maxbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>
</body>
</html>

4.CSS代码如下

@charset "utf-8";
*{
   
	margin:0;
	padding:0;
}
body{
   
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
}
li{
   
	list-style: none;
}
.box{
   
	width:200px;
	height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: 42%;
	margin-top