!
也想出现在这里? 联系我们
广告位

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

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

HTML 代码

  1. <div class="container">
  2. <a href="#animals" class="item"><img src="./animals.png" alt="Animals"></a>
  3. <a href="#architecture" class="item"><img src="./architecture.png" alt="Architecture"></a>
  4. <a href="#nature" class="item"><img src="./nature.png" alt="Nature"></a>
  5. <a href="#people" class="item"><img src="./people.png" alt="People"></a>
  6. <a href="#tech" class="item"><img src="./tech.png" alt="Tech"></a>
  7. </div>

CSS 代码

  1. .container {
  2. display: flex;
  3. margin-top: 50px;
  4. }
  5. .item {
  6. position: relative;
  7. display: block;
  8. flex: 1 1 0px;
  9. }
  10. .item img {
  11. display: block;
  12. max-width: 100%;
  13. }

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

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

CSS 代码

  1. .container {
  2. display: flex;
  3. margin-top: 50px;
  4. }
  5. .item {
  6. position: relative;
  7. display: block;
  8. flex: 1 1 0px;
  9. transition: transform 500ms;
  10. }
  11. .container .item:focus,
  12. .container .item:hover {
  13. transform: scale(1.5);
  14. z-index: 1;
  15. }
  16. body {
  17. overflow: hidden;
  18. }
  19. .item img {
  20. display: block;
  21. max-width: 100%;
  22. }

CSS3中鼠标滑过图片突出放大效果
让悬停项的兄弟项远离悬停项是整个过程中很棘手的部分。我们可以使用的一个 CSS 特性是一般的兄弟组合器。这使我们可以选择位于悬停项之后的所有同级项。

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

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

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

这样可以将事物向右移动,但是我们如何转换左边的项目呢?由于通用的同级组合器仅适用于位于给定选择器之后的同级(没有“向后”),因此我们需要另一种方法。我们假设您的文档使用从左到右的书写模式。如果要在从右到左的上下文中使用此效果,则需要将悬停的外部容器内的所有项目设置为向右移动,并使用常规的同级组合器将所有选定的项目向左移动。

  1. .item {
  2. position: relative;
  3. display: block;
  4. flex: 1 1 0px;
  5. transition: transform 500ms;
  6. }
  7. .container:focus-within .item,
  8. .container:hover .item {
  9. transform: translateX(-25%);
  10. }
  11. .item:focus ~ .item,
  12. .item:hover ~ .item {
  13. transform: translateX(25%);
  14. }
  15. .container .item:focus,
  16. .container .item:hover {
  17. transform: scale(1.5);
  18. z-index: 1;
  19. }
  20. body {
  21. overflow: hidden;
  22. }
  23. .item img {
  24. display: block;
  25. max-width: 100%;
  26. }

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

给TA打赏
共{{data.count}}人
人已打赏
前端学习

jQuery 鼠标滑过链接图片滑动展开与隐藏效果

2024-8-30 14:17:24

前端学习

jQuery 通过class名称验证表单值不为空

2024-9-3 17:44:31

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索