热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS3中鼠标滑过图片突出放大效果

这篇前端教程是友联站长发布的,刚刚看了下感觉还不错,纯CSS实现,虽然在开发主题时CSS3用的比较少。这是一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者

文章目录[隐藏]

  • HTML和flexible元素
  • 悬停时展开项目
  • 向外移动兄弟元素

这篇前端教程是友联站长发布的,刚刚看了下感觉还不错,纯CSS实现,虽然在开发主题时CSS3用的比较少。这是一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示的图片中,这样可以将鼠标移到图片上进行快速预览图片。同时你也可以在此基础上扩展它,比如给图片加投影和边框等。整一个图片放大特效还是比较酷的。

但在写代码之前,我们要做的就是:

  1. 悬停在上面的卡应该在保持长宽比的同时展开。
  2. 当一张牌悬停时,其他牌不应改变大小并向外移动,以免彼此重叠。
  3. 所有的牌应该保持垂直居中。

听起来不错吧?现在让我们开始带大家一步步写代码。

HTML和flexible元素

让我们先设置一行预览的图像。其中包括:

  1. 包含多个.item元素的.container父元素容器
  2. 每个.item元素都包含一个包装在锚标记中的图像
  3. .container转换为一个flex容器,该容器将行中的项对齐
  4. 设置.item类的flex行为,使它们在行中占用相等的空间

HTML代码如下:

Animals Architecture Nature People Tech

CSS代码如下:

.container {
  display: flex;
  margin-top: 50px;
}

.item {
  position: relative;
  display: block;
  flex: 1 1 0px;
}

.item img {
  display: block;
  max-width: 100%;
}

效果如下:

CSS3中鼠标滑过图片突出放大效果

CSS3中鼠标滑过图片突出放大效果

悬停时展开项目

我们的下一步是让项目在悬停时展开。我们可以通过设置元素宽度的动画来实现这一点,但这会影响文档的流动,并导致悬停项的同级项收缩–另外,设置宽度属性的动画在某些情况下会降低性能。

为了避免挤压悬停项的同级,我们将设置transform属性的动画(特别是它的scale()函数)。这不会像width那样影响文档流。

CSS代码如下:

.container {
  display: flex;
  margin-top: 50px;
}

.item {
  position: relative;
  display: block;
  flex: 1 1 0px;
  transition: transform 500ms;
}

.container .item:focus,
.container .item:hover {
  transform: scale(1.5);
  z-index: 1;
}

body {
  overflow: hidden;
}

.item img {
  display: block;
  max-width: 100%;
}

GIF效果如下:

CSS3中鼠标滑过图片突出放大效果

CSS3中鼠标滑过图片突出放大效果

向外移动兄弟元素

让悬停项的兄弟项远离悬停项是整个过程中很棘手的部分。我们可以使用的一个CSS特性是一般的兄弟组合器。这使我们可以选择位于悬停项之后的所有同级项。

我们将转到transform属性的translateX()函数来移动对象。同样,对转换设置动画比影响文档流的其他属性(如边距和填充)要好得多。

因为我们设置了一个项目在悬停时可以放大150%,所以转换应该设置为25%。这是悬停项所占用的额外空间的一半。

.item:hover ~ .item {
  transform: translateX(25%);
}

这样可以将事物向右移动,但是我们如何转换左边的项目呢?由于通用的同级组合器仅适用于位于给定选择器之后的同级(没有“向后”),因此我们需要另一种方法。

一种方法是在父容器本身上添加其他悬停规则。这是计划:

  • 悬停父容器时,请将该容器内的所有项目向左移动。
  • 使用通用的同级组合器可以将悬停的项目向右移动后放置的项目。
  • 获得超级特定的信息,因此悬停的项目不会像其他项目一样进行转变。

我们假设您的文档使用从左到右的书写模式。如果要在从右到左的上下文中使用此效果,则需要将悬停的外部容器内的所有项目设置为向右移动,并使用常规的同级组合器将所有选定的项目向左移动。

代码如下:

.container {
  display: flex;
  margin-top: 50px;
}

.item {
  position: relative;
  display: block;
  flex: 1 1 0px;
  transition: transform 500ms;
}

.container:focus-within .item,
.container:hover .item {
  transform: translateX(-25%);
}

.item:focus ~ .item,
.item:hover ~ .item {
  transform: translateX(25%);
}

.container .item:focus,
.container .item:hover {
  transform: scale(1.5);
  z-index: 1;
}

body {
  overflow: hidden;
}

.item img {
  display: block;
  max-width: 100%;
}

最终GIF效果如下:

CSS3中鼠标滑过图片突出放大效果 向外移动兄弟元素

CSS3中鼠标滑过图片突出放大效果
向外移动兄弟元素

此时悬停效果看起来更加圆滑,不再那么生硬。需要注意的一点是:此最终版本正在使用:focus:focus-within伪类来支持键盘导航。


推荐阅读
  • 精通jQuery:深入解析事件处理机制与应用技巧
    本文详细探讨了jQuery的事件处理机制及其应用技巧,通过具体的代码示例,逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准,CSS作为通用样式,确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾,方便读者参考和实践。 ... [详细]
  • 滑动显示大图升级版
    之前做了一个滑动展示大图片的demo,之后在大神博客发现大神也做过一个类似的插件。于是把插件摘了下来研究了一下。改动了插件显示文本的部分并增加了一点注释。效果比我的好 ... [详细]
  • 通过纯CSS技术,可以轻松创建精致的小圆点和三角形图形。本文详细介绍了如何利用CSS的伪元素、边框和背景属性,实现这些图形的高效绘制,并提供了多种应用场景和示例代码,帮助开发者在网页设计中增添更多视觉效果。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • 期末Web开发综合实践项目:运用前端技术打造趣味小游戏体验
    期末Web开发综合实践项目中,学生通过运用HTML、CSS和JavaScript等前端技术,设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况,还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果,直观呈现了游戏的互动性和视觉效果。 ... [详细]
  • 本文介绍了在PHP环境中优化表格列表和表单Label样式的技巧,通过CSS代码提升表单的视觉效果。具体包括为每个标签添加箭头背景,并在标签获得焦点时实现背景高亮的效果。示例代码展示了如何为“姓名”和“邮件”字段应用这些样式,适用于phpStudy开发环境。 ... [详细]
  • 使用React与Ant Design 3.x构建IP地址输入组件
    本文深入探讨了利用React框架结合Ant Design 3.x版本开发IP地址输入组件的方法。通过详细的代码示例,展示了如何高效地创建具备良好用户体验的IP输入框,对于前端开发者而言具有较高的实践指导意义。 ... [详细]
  • 网站前端开发的核心理念与必备技能解析 ... [详细]
  • CSS3 实现鼠标悬停时滚动菜单的流畅过渡效果 ... [详细]
  • Markdown语法说明:http:www.appinn.commarkdown1、前端碎片知识总结篇1.1关于浏览器IE的内核是Trident、Mozilla的内核 ... [详细]
  • DW的div布局
    如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提 ... [详细]
  • css3伪类target实现tab切换
    CSS3target伪类不得不说那些事儿(纯CSS实现tab切换)是不是觉得target有点眼熟?!今天要讲的不是HTML的标签里面有个targe ... [详细]
  • 通过 CSS 中的 transition 属性,可以轻松实现元素状态变化时的平滑过渡效果。本文将详细介绍如何使用 transition 属性,并提供一个具体的示例。 ... [详细]
  • 装饰者模式(Decorator):一种灵活的对象结构设计模式
    装饰者模式(Decorator)是一种灵活的对象结构设计模式,旨在为单个对象动态地添加功能,而无需修改原有类的结构。通过封装对象并提供额外的行为,装饰者模式比传统的继承方式更加灵活和可扩展。例如,可以在运行时为特定对象添加边框或滚动条等特性,而不会影响其他对象。这种模式特别适用于需要在不同情况下动态组合功能的场景。 ... [详细]
  • 深入解析 Android Drawable:第六阶段进阶指南 ... [详细]
author-avatar
奋肀斗小族
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有