html鼠标移上去变色放大,CSS3 鼠标滑过图片突出放大效果 | 腾讯云
今天给大家分享一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示的图片中,这样可以将鼠标移到图片上进行快速预览图片。同时你也可以在此基础上扩展它,比如给图片加投影和边框等。整一个图片放大特效还是比较酷的。
这里我们只用纯CSS实现!没错,没有一句JavaScript语句。也没有依赖关系。就是普通CSS。但在写代码之前,我们要做的就是:
悬停在上面的卡应该在保持长宽比的同时展开。
当一张牌悬停时,其他牌不应改变大小并向外移动,以免彼此重叠。
所有的牌应该保持垂直居中。
听起来不错吧?现在让我们开始带大家一步步写代码。
一、HTML和flexible元素
让我们先设置一行预览的图像。其中包括:
包含多个.item元素的.container父元素容器
每个.item元素都包含一个包装在锚标记中的图像
将.container转换为一个flex容器,该容器将行中的项对齐
设置.item类的flex行为,使它们在行中占用相等的空间
HTML代码如下:
CSS代码如下:
.container {
display: flex;
margin-top: 50px;
}
.item {
position: relative;
display: block;
flex: 1 1 0px;
}
.item img {
display: block;
max-width: 100%;
}
效果如下:
二、悬停时展开项目
我们的下一步是让项目在悬停时展开。我们可以通过设置元素宽度的动画来实现这一点,但这会影响文档的流动,并导致悬停项的同级项收缩–另外,设置宽度属性的动画在某些情况下会降低性能。
为了避免挤压悬停项的同级,我们将设置transform属性的动画(特别是它的scale()函数)。这不会像width那样影响文档流。关于transform属性的用法请看我之前写的一篇文章《css3 Transform属性如何在项目中使用?》
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效果如下:
三、向外移动兄弟元素
让悬停项的兄弟项远离悬停项是整个过程中很棘手的部分。我们可以使用的一个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效果如下:
此时悬停效果看起来更加圆滑,不再那么生硬。需要注意的一点是:此最终版本正在使用:focus和:focus-within伪类来支持键盘导航。
html鼠标移上去变色放大,CSS3 鼠标滑过图片突出放大效果 | 腾讯云相关推荐
- html 图片鼠标移上去点亮,CSS3 实现鼠标移到图片上时一片亮光一闪而过的效果...
01 效果描述 CSS3 实现鼠标移到图片上时一片亮光一闪而过的效果 02 效果图摘 03 关键代码 html: CSS: .hover14{ width:500px; float:left; } . ...
- JS-隔行换色+鼠标移上去变色
<style>ul{list-style: none;} </style> <body><ul><li>111</li>< ...
- 用jQuery一句话实现鼠标移上变色
按钮移上变色效果 <style> .round-corner-btn { -moz-border-radius:4px; -webkit-b ...
- php改变鼠标箭头形状手指,dreamweaver怎么让鼠标移过button按钮时,鼠标变成手指形状手指形状?...
用cursor属性可以实现,可选值及说明如表2.1.6.2所示. 表2.1.6.2 cursor属性的可选值 可选值说明 hand手型 crosshair十字型 text鼠标移动到水平文本上的样式 w ...
- html鼠标滚动图片折叠,鼠标滑过图片3D折叠效果
本教程我们将使用CSS3 3D transforms和jQuery来制作一个神奇的3D折叠效果. 在我们的demo中,图片在鼠标滑过的时候被折叠,空出来的部分将显示图片的一些信息.我们将创建一个放置图 ...
- JS实现鼠标滑过图片的抖动效果
在上网时候发现了这个效果(效果演示地址:http://www.baidu.com/search/baike/usertask/mingmantianxia/). 在鼠标放到图片上, 图片会有个上下抖动 ...
- 如何放大图像不模糊?图片无损放大
如何放大图像不模糊?工作中我们经常需要使用图片,所以也经常需要将图片修改成我们想要的尺寸,这是一项比较简单的工作,但是也包含很多的技巧.例如将图片尺寸放大的时候,如果你没有好的方法,放大后的图片会出现 ...
- DataGrid实现自定义分页,鼠标移至变色,删除确认、可编辑,可删除
先在数据库中定义存储过程,轻易实现百万级数据分页: //@PageSize:分页大小,PageIndex:页号,@PageCount:总页数,@recordCount:记录数 CREATE PROCE ...
- html表格鼠标划过变色,CSS实现鼠标滑过表格变色
每个单元格变色: 第1行 第1列 第2行 第2列 第3行 第3列 第4行 第4列 第5行 第5列 ------------------------ 以上都用到expression,实现变得很方便,但是 ...
最新文章
- Mr Big [To be with you]
- SQLServer数据的基本操作:简单的增、删、改、查
- rust设置里面那个是能见度_IDEA maven设置里面的Repositories这个设置问题
- Boost: 对uncaught_exceptions函数的测试
- java多线程编程一之java线程的原理
- 拼接大屏数据展示_可视化大屏的UI设计是根据哪几个方面来进行?
- [UiAutomator] UiSelector中使用instance与index方法定位控件的区别
- 牛客网–华为机试在线训练6:质数因子
- Android 开机自启动应用
- 【图像去噪】基于matlab即插即用法图像去噪【含Matlab源码 152期】
- 哈工大计算机报深圳还是本部,哈工大本部和哈工大深圳哪个比较好?
- 第三方系统平台如何对接gooflow2.0
- 截止失真放大电路_新手必看!基本放大电路应该如何分析?
- linux bond四网卡绑定,Linux bond 网卡绑定配置教程
- Windows电脑如何访问小米路由器的移动硬盘
- Mac pro M2芯片如何进入恢复模式
- 处女座与小姐姐(三)
- 文华财经指标公式大全,通达信指标加密破解DLL加密防破解技术方法
- POI处理Excel中公式不能自动计算出来的问题
- Python负数除法取余操作