前端练习＜HtmlCSS＞——照片墙（附完整代码及实现效果）

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

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

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

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

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

HTML结构

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

CSS样式

  • *选择器用于重置所有元素的默认样式，包括margin和padding，并设置box-sizing为border-box，这样元素的宽度和高度就包括了边框和内边距。
  • body选择器设置了display为flex，并使用justify-content和align-items属性将内容水平和垂直居中，同时设置了最小高度为100vh，背景颜色为#1a252c。
  • .container选择器设置了容器的样式，包括position、display、justify-content、align-items和transform-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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/50782.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

生成式AI和LLM的革命：Transformer架构

生成式AI和LLM的革命：Transformer架构

近年来&#xff0c;随着一篇名为“Attention is All You Need”论文的出现&#xff0c;自然语言处理&#xff08;NLP&#xff09;领域经历了一场巨大的变革。2017年&#xff0c;在谷歌和多伦多大学发表了这篇论文后&#xff0c;Transformer架构出现了。这一架构不仅显著提升了N…
阅读更多...
Spring RestTemplate：简化HTTP请求的利器

Spring RestTemplate：简化HTTP请求的利器

在现代Web开发中&#xff0c;HTTP请求是与外部服务交互的主要方式之一。Spring框架提供的RestTemplate工具&#xff0c;大大简化了HTTP请求的发送和处理过程&#xff0c;让开发者可以更加专注于业务逻辑的实现。本文将带你了解RestTemplate的基本用法及其在实际项目中的配置方法…
阅读更多...
【BUG】已解决：ERROR: Failed building wheel for jupyter-nbextensions-configurator

【BUG】已解决：ERROR: Failed building wheel for jupyter-nbextensions-configurator

ERROR: Failed building wheel for jupyter-nbextensions-configurator 目录 ERROR: Failed building wheel for jupyter-nbextensions-configurator 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我…
阅读更多...
第 3 章 数据和 C

第 3 章 数据和 C

目录 3.1 示例程序 3.1.1 程序中的新元素 3.2 变量与常量数据 3.3 数据: 数据类型关键字 3.3.1 整数和浮点数 3.3.2 整数 3.3.3 浮点数 3.4 C 语言基本数据类型 3.4.1 int 类型 1. 声明 int 变量 2. 初始化变量 3. int 类型常量 4. 打印 int 值 5. 八进制和十六进…
阅读更多...
测试面试中遇到的python题目

测试面试中遇到的python题目

1、九九乘法表 #九九乘法表 for i in range(1, 10): #range函数是左开右闭for j in range(1, i1):result j * iprint(%d*%d%d%(j,i,result), end" ") #print打印会默认换行&#xff0c;end 意思是末尾不换行,加空格print() #换行2、100-10000之间&#x…
阅读更多...
Linux I2C驱动程序

Linux I2C驱动程序

Linux I2C驱动 前言 主要目的记录一下我在野火的i.MX6ULL mini开发板上面编写了一个Linux I2C设备驱动去驱动SSD1306 OLED屏幕的开发过程。源码用的是野火提供的内核源码。 SSD1306 OLED和I2C接口 这块OLED屏幕大家应该都比较熟悉了&#xff0c;小巧迷你&#xff0c;DIY很好…
阅读更多...
习题2.24

习题2.24

没啥好说&#xff0c; 先看解释器给出的结果 说起来也简单&#xff0c;这是一个多层的列表&#xff0c;第一个元素是1 第二个元素是&#xff08;2 &#xff08; 3 4&#xff09;&#xff09; 第二层第一个是2 第二个是 &#xff08;3 4&#xff09; 第三层第一个是 3 第二个…
阅读更多...
项目中自定义python异常类

项目中自定义python异常类

作为一个初学者 &#xff0c;在github上看到一个项目中异常文件&#xff0c;我也不知道当时为什么这么写&#xff0c;越来越觉得写得是不是有问题&#xff0c;所以我先写一遍我认为是对的&#xff0c;在看一下那个项目怎么写的以及我为什么 认为有问题 首先定义异常基类 cla…
阅读更多...
stm32入门-----ADC模数转换器（理论篇——上）

stm32入门-----ADC模数转换器（理论篇——上）

目录 前言 一、ADC模数转换器 1.简介 2.ADC的结构 3.输入通道 4.转换模式 5.触发控制 6.数据对齐 7.转换时间 8.校准 前言 本期就开始学习ADC模数转换器&#xff0c;这个大家在学习51单片机的时候应该就接触过了&#xff0c;实际上就是把模拟电压转换为…
阅读更多...
YOLOv5改进 | 卷积模块 | 即插即用的递归门控卷积gnConv

YOLOv5改进 | 卷积模块 | 即插即用的递归门控卷积gnConv

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录&#xff1a; 《YOLOv5入门 改…
阅读更多...
认识到自己的无知，需要一定的智慧

认识到自己的无知，需要一定的智慧

知识本是补药&#xff0c;却被变成毒药——“新无知”的三种表现 今天&#xff0c;一个人如果把评书、演义、宫廷剧当作真实历史&#xff0c;把当年从教科书上学来的过时理论当做“观世界”的金科玉律&#xff0c;并以此嘲笑别人“无知”的&#xff0c;属于典型的“新古人”—…
阅读更多...
线程的同步和优先级

线程的同步和优先级

文章目录 前言一、优先级和同步各是什么&#xff1f;二、使用方法 1.线程的优先级2.线程的同步总结 前言 线程不仅可以实现代码的单线程运行和并发运行&#xff0c;在线程安全的情况下&#xff0c;还可以实现共同处理相同的系统资源。该篇文章还介绍了开发者如何设置线程运行的…
阅读更多...
UniApp 打包项目为桌面端 exe 文件

UniApp 打包项目为桌面端 exe 文件

引言 随着跨平台开发的需求日益增长&#xff0c;UniApp 成为了开发者们的首选之一。通过 UniApp&#xff0c;你可以使用 Vue.js 的语法结构和组件系统来构建原生应用、Web 应用甚至是桌面应用。本文将详细介绍如何使用 UniApp 将你的项目打包成 Windows 桌面端的 exe 文件。 …
阅读更多...
【数据结构】单链表带头双向循环链表的实现

【数据结构】单链表带头双向循环链表的实现

一、链表的概念及结构 1.链表的概念 概念&#xff1a;链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的 。 2.链表的结构 一般讲的链表包括数据域和指针域&#xff1a; 二、链表的种类 实际中链表的结构…
阅读更多...
【HashMap源码学习】

【HashMap源码学习】

HashMap的底层结构 HashMap是基于分离链表法解决散列冲突的动态散列表。 1、在jdk7中&#xff0c;使用的是“数组 链表”&#xff0c;发生散列冲突的时候键值对会用头插法添加到单链表中&#xff1b; 2、在jdk8中&#xff0c;使用的是“数组 链表 红黑树”&#xff0c;发…
阅读更多...
【Python】成功解决: [Errno 24] Too many open files

【Python】成功解决: [Errno 24] Too many open files

【Python】成功解决: [Errno 24] Too many open files 在Python编程中&#xff0c;遇到[Errno 24] Too many open files错误是一个常见的系统资源限制问题。这个错误表明你的程序尝试打开的文件数量超过了操作系统允许的最大文件描述符数量。在Linux和Unix系统中&#xff0c;每…
阅读更多...
昇思25天学习打卡营第1天|简单深度学习

昇思25天学习打卡营第1天|简单深度学习

前言 昇思MindSpore是一个全场景深度学习框架&#xff0c;旨在实现易开发、高效执行、全场景统一部署三大目标。 其中&#xff0c;易开发表现为API友好、调试难度低&#xff1b;高效执行包括计算效率、数据预处理效率和分布式训练效率&#xff1b;全场景则指框架同时支持云、边…
阅读更多...
从 Pandas 到 Polars 三十八：Polars 的“瘦身”功能

从 Pandas 到 Polars 三十八：Polars 的“瘦身”功能

Polars 有一个内置工具来进行 dtype 瘦身。调用 shrink_dtype 表达式&#xff0c;它会根据列中的数据将列转换为需要最少内存量的 dtype。 shrink_dtype 是 Polars 中一个非常有用的函数&#xff0c;它用于优化 DataFrame 中列的数据类型&#xff0c;以减小内存占用并可能提高…
阅读更多...
react子组件向父组件传参

react子组件向父组件传参

在React中&#xff0c;子组件向父组件传参&#xff08;或称为“通信”&#xff09;通常通过事件回调的方式实现。父组件向子组件传递一个函数作为props&#xff0c;子组件在需要时调用这个函数&#xff0c;并可以通过参数的形式向父组件传递数据。 下面是一个简单的例子来说明…
阅读更多...
C++之map和set封装以及哈希（unordered_map和unordered_set）的封装（仅代码）

C++之map和set封装以及哈希（unordered_map和unordered_set）的封装（仅代码）

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言进阶 数据结构初阶 Linux C初阶 C进阶​ ​​​​算法 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂 目录 一. map和set封装 1.1红黑树 1.2map …
阅读更多...
最新文章

Copyright @ 2022~2023