首页 > 其他分享 >前端练习<Html&CSS>——照片墙(附完整代码及实现效果)

前端练习<Html&CSS>——照片墙(附完整代码及实现效果)

时间:2024-07-30 21:24:12浏览次数:15  
标签:box 容器 container 前端 transform Html 设置 选择器 CSS

这个小练习也来源于b站up小K师兄,大家可以通过下面的链接学习哦~up讲的非常详细。

纯CSS写一个简单酷炫的照片墙效果~

先看一下这个照片墙的效果:

1.鼠标没有放到图片上时,照片同比例,每张照片都有倒影的效果。

2.然后是鼠标放置图片上的效果,图片被放大,其他照片旋转缩放,这里需要注意,左右两边的照片是对称倾斜的。

HTML结构

  • <style>标签内包含了CSS样式,用于定义页面的样式。
  • <body>标签内包含了一个<div>元素,类名为container,这个容器包含了多个<div>元素,每个<div>元素类名为box,每个box元素内包含一个<img>元素,用于展示图片。

CSS样式

  • *选择器用于重置所有元素的默认样式,包括marginpadding,并设置box-sizingborder-box,这样元素的宽度和高度就包括了边框和内边距。
  • body选择器设置了displayflex,并使用justify-contentalign-items属性将内容水平和垂直居中,同时设置了最小高度为100vh,背景颜色为#1a252c
  • .container选择器设置了容器的样式,包括positiondisplayjustify-contentalign-itemstransform-origin属性,用于实现3D翻转效果。
  • .container .box选择器设置了每个图片容器的样式,包括宽度、高度、位置、过渡效果和反射效果。
  • .container .box img选择器设置了图片的样式,包括绝对定位、宽度和高度。
  • .container:hover> :not(:hover)选择器用于在鼠标悬停在容器上时,除了悬停的图片容器之外的其他图片容器会向两侧移动,并添加阴影效果和3D旋转。
  • .container .box:hover~.box选择器用于在鼠标悬停在某个图片容器上时,其他图片容器会进行3D旋转。
  • .container .box:hover选择器用于在鼠标悬停在某个图片容器上时,该图片容器会放大并旋转。

实现原理

这段代码通过CSS的transform属性和transition属性实现了3D翻转效果。当鼠标悬停在容器上时,除了悬停的图片容器之外的其他图片容器会向两侧移动,并添加阴影效果和3D旋转。当鼠标悬停在某个图片容器上时,该图片容器会放大并旋转。

完整的代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 设置所有元素的边距和内边距为0,并设置box-sizing为border-box,使元素的宽度和高度包括边框和内边距 */
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box
			}

			/* 设置body的居中显示,最小高度为100vh,背景颜色为#1a252c */
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background-color: #1a252c;
			}

			/* 设置容器的相对定位,居中显示,设置transform-origin为preserve-3d */
			.container {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				transform-origin: preserve-3d;
			}

			/* 设置box的宽度、高度、相对定位、过渡效果、设置-webkit-box-reflect为下方1px的线性渐变 */
			.container .box {
				width: 300px;
				height: 300px;
				position: relative;
				transition: .5s;
				-webkit-box-reflect: below 1px linear-gradient(transparent, #0002);
			}

			/* 设置box的绝对定位,宽度、高度为100% */
			.container .box img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			/* 设置鼠标悬停时,非悬停元素的边距为-20px,设置filter为drop-shadow(0 0 25px #000) drop-shadow(0 0 25px #000),设置transform为perspective(500px) rotateY(45deg) scale(0.95) */
			.container:hover> :not(:hover) {
				margin: 0 -20px;
				filter: drop-shadow(0 0 25px #000) drop-shadow(0 0 25px #000);
				transform: perspective(500px) rotateY(45deg) scale(0.95);
			}

			/* 设置鼠标悬停时,box的兄弟元素的transform为perspective(500px) rotateY(-45deg) scale(0.95) */
			.container .box:hover~.box {
				transform: perspective(500px) rotateY(-45deg) scale(0.95);
			}

			/* 设置鼠标悬停时,box的transform为perspective(500px) rotateY(0) scale(1.2) */
			.container .box:hover {
				transform: perspective(500px) rotateY(0) scale(1.2);
			}
		</style>

	</head>
	<body>
		<!-- 设置容器的class为container -->
		<div class="container">
			<!-- 设置box的class为box,并设置img的src为1.webp -->
			<div class="box">
				<img src="./1.webp" alt="" />
			</div>
			<!-- 设置box的class为box,并设置img的src为2.webp -->
			<div class="box">
				<img src="./2.webp" alt="" />
			</div>
			<!-- 设置box的class为box,并设置img的src为3.webp -->
			<div class="box">
				<div class="box">
					<img src="./3.webp" alt="" />
				</div>


			</div>
			<!-- 设置box的class为box,并设置img的src为4.webp -->
			<div class="box">
				<img src="./4.webp" alt="" />
			</div>
			<!-- 设置box的class为box,并设置img的src为5.webp -->
			<div class="box">
				<img src="./5.webp" alt="" />
			</div>
			<!-- 设置box的class为box,并设置img的src为6.webp -->
			<div class="box">
				<img src="./6.webp" alt="" />
			</div>
		</div>
	</body>
</html>v>
			<!-- 设置box的class为box,并设置img的src为4.webp -->
			<div class="box">
				<img src="./4.webp" alt="" />
			</div>
			<!-- 设置box的class为box,并设置img的src为5.webp -->
			<div class="box">
				<img src="./5.webp" alt="" />
			</div>
			<!-- 设置box的class为box,并设置img的src为6.webp -->
			<div class="box">
				<img src="./6.webp" alt="" />
			</div>
		</div>
	</body>
</html>

标签:box,容器,container,前端,transform,Html,设置,选择器,CSS
From: https://blog.csdn.net/Blusher1/article/details/140724346

相关文章

  • 05HTML+CSS
    今日学习了CSS样式中的其他东西。复合选择器定义:由两个或多个基础选择器,通过不同的方式组合而成。作用:更准确、更高效的选择目标元素(标签)。后代选择器后代选择器:选中某元素的后代元素。选择器写法:父选择器子选择器{CSS属性},父子选择器之间用空格隔开。<style>divsp......
  • 环形表示进度 css+js+svg
    先看看我做出来的效果人狠话不多直接上代码html部分<divid="box"></div>css部分#box{width:400px;height:400px;background-color:#00E8D7;display:flex;}.circleBox{width:33.333%;display:flex;f......
  • html+css 实现3D分层悬停按钮
    前言:哈喽,大家好,今天给大家分享html+css绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......
  • Jmeter+Ant生成优化HTML的接口测试报告
    为什么要这么做?在实际测试场景遇到这样一种情况,开发重构了接口实现逻辑,该接口主要用于查询操作,接口的入参有上千种可能,查询出来的内容很多,需要与原来接口比对,检查是否一致那此时,单纯用jmeter跑一遍的话,很难直观的看到测试之后的结果,所以就需要这样一种报告来展示,供开发修改在这......
  • 在 html 上添加 json 数据(数据包含多种特殊字符),使用 JSON.stringify 读取 error
    letjsonObj=[{ "Name":"test" "Attach":"www!@#$%^&*(){}|:\"<>?,./;'[]\\"}]lethtml=jsonObj.map((i,v)=>{ letjsonStr=JSON.stringify(jsonObj) return`<trdata='${json......
  • vue-cli使用postcss-plugin-px2rem,自动px转rem
    const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,productionSourceMap:false,css:{loaderOptions:{postcss:{postcssOptions:{plugins:[......
  • 【Vue3】前端使用JWT令牌技术的实践方案
    目录技术介绍简单介绍:详细介绍:操作流程1.后端在登录响应里返回jwt2.前端将该变量存入浏览器当中3.前端使用jwt请求的时候作为请求头解码令牌内信息技术介绍简单介绍:        JWT令牌是一种用户校验机制,在登录后服务器会返回用户一个JWT令牌(相当于门票),用......
  • 上传多个图像时 React 前端和 Flask 后端出现 CORS 策略错误
    实际上,我已经在reactJs中制作了前端,在pythonFlask中制作了后端(使用cnn模型进行一些预测)。当我按照我的请求发送5到6张图像时,它工作正常,但是当我发送10到15张图像和一些时间时令人筋疲力尽,然后它给出了类似的错误,尽管我在下面给出的代码中设置了Cors:192.168.151.24/:1Accesst......
  • 前端Vue组件化实践:打造灵活可维护的地址管理组件
    随着前端技术的不断演进,复杂度和开发难度也随之上升。传统的一体化开发模式使得每次小小的修改或功能增加都可能牵一发而动全身,严重影响了开发效率和维护成本。组件化开发作为一种解决方案,通过模块化、独立化的开发方式,实现了单独开发、单独维护,并允许组件间的自由组合,从而极大......
  • 前端Vue组件化开发:仿京东淘宝的加入购物车与立即购买弹框组件
    随着前端技术的飞速发展,组件化开发已经成为前端工程化不可或缺的一部分。它不仅能够降低代码的耦合度,提高开发效率,还能够极大地简化后期的维护和扩展工作。在复杂的业务场景下,组件化开发更是成为前端工程师的必备技能。本文将介绍一个基于Vue的前端组件——仿京东淘宝的加入购......