【html+css+原生js实现炫酷照片展开效果-----女友相册的正确打开方式（详细）】

最新推荐文章于 2024-05-05 08:04:21 发布

是你那

最新推荐文章于 2024-05-05 08:04:21 发布

阅读量1.4k

点赞数 2

文章标签： css html javascript

本文链接：https://blog.csdn.net/jsmylo/article/details/122160137

版权

本文详细介绍了如何利用HTML、CSS和原生JavaScript创建一个具有炫酷展开动画效果的照片相册。通过提供的代码示例，读者可以直接运行查看完整的交互体验。对于代码中的不足，作者欢迎读者提出指正，并鼓励在评论区交流疑问。

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

1.先看效果。有动画效果，截图效果不大明显。copy代码运行可以展示完整效果。

在这里插入图片描述

2.html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>照片展开</title>
		<link rel="stylesheet" type="text/css" href="css/list.css"/>
	</head>
	<body>
		<div id="box">
			<ul>
				<li>
					<div class="wrapper deley">
						<div class="bg"></div>
						<h2>image1</h2>
						<div class="detaction">
							<div class="name">pic1</div>
							<div class="close">x</div>
						</div>
					</div>
				</li>
				<li>
					<div class="wrapper deley">
						<div class="bg"></div>
						<h2>image1</h2>
						<div class="detaction">
							<div class="name">pic2</div>
							<div class="close

最低0.47元/天解锁文章

是你那

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
8
评论
【html+css+原生js实现炫酷照片展开效果-----女友相册的正确打开方式（详细）】

1.先看效果。有动画效果，截图效果不大明显。copy代码运行可以展示完整效果。2.html页面<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>照片展开</title> <link rel="stylesheet" type="text/css" href="css/list.css"/> </head> &lt
复制链接

扫一扫