CSS 控制鼠标划过,图片放大效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/79050167

♩ 背景

  • 今天在做后台管理 CMS 时,对于小图片的显示感觉太大了会浪费页面空间,想着在鼠标滑动时可以缓慢放大就好.

♪ 知识点

①. transform:scale()

用法:transform: scale(0.5) 或者 transform: scale(0.5, 2); 参数表示缩放倍数; 1. 一个参数时:表示水平和垂直同时缩放该倍率 2. 两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。

②. transition

♫ 代码实现

①. 部分布局代码:

<tr class="tr-menu-6">
        <td>6</td>
        <td>《东京食尸鬼》</td>
        <td class="td-todayWord">
              <img src="/home/images/ps6.png" class="layui-circle">
        </td>
        <td>你觉得被圈养的鸟儿为什么无法自由地翱翔天际?是因为鸟笼不是属于它的东西</td>
        <td>2018-01-12 03:31:59</td>  
</tr>

②. CSS 核心代码参考

.td-todayWord img{
    cursor: pointer;
    transition: all 0.6s;
    width: 50px;
}
.td-todayWord img:hover{
    transform: scale(5);
    position:relative;
    z-index:100;
}

♬ 效果比较

  • 鼠标划过前
  • 鼠标划过后
  • 上述 CSS 代码,如果去掉 position:relative; z-index:100; ,则图片不会覆盖其他.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

ConstraintLayout约束控件详解

简介 在Google IO大会中不仅仅带来了Android Studio 2.2预览版,同时带给我们一个依赖约束控件–ConstraintLayout。一种构建...

3075
来自专栏前端笔记

【HTML5 理论知识】就H5调试技巧,浅谈:iPhone X 适配方案!

image.png 2017年9月苹果发布了iPhone X机型,对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下...

6918
来自专栏AndroidTv

一起撸个简单粗暴的Tv应用主界面的网格布局控件(下)

上一篇中我们已经一起学了怎么简单粗暴的撸个支持动态布局的网格控件出来,但在上一篇的介绍中,并没有学习实现网格控件的滑动效果,所以本篇就来讲讲,要如何让我们的网格...

3618
来自专栏Thinks

10步大幅提升网站可访问性

10步大幅提升网站可访问性。每一步都可以在20分钟内完成。这篇文章也可以在20分钟内看完。 第一步,检查<title></title>,不允许空,不允许过长,简...

771
来自专栏守候书阁

也许vue+css3做交互特效更简单

做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用vue,开发技术栈方面,理所当然就使用了vue+css3开发,过程中发现使用vue+css3开发...

1672
来自专栏软件开发

CSS3与页面布局学习总结(五)——Web Font与Sprite

一、web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体。先了解操作系统中的字体: a)、安装好操作系...

3486
来自专栏java一日一条

前端高性能滚动 scroll 及页面渲染优化

最近在研究页面渲染及web动画的性能问题,以及拜读《CSS SECRET》(CSS揭秘)这本大作。

3283
来自专栏Material Design组件

Human Interface Guidelines —— Page Controls

1315
来自专栏拂晓风起

cocos2d-js 粒子系统使用自定义图片,还原原来的图片宽高

961
来自专栏HTML5学堂

前端特效开发 | JS实现聚光灯看图效果

HTML5学堂(码匠):昏暗的场景下,查看任何的图片、效果都会给人不适的感觉,所以人们往往喜欢在明亮的场景中来体验世界的美好。 对于前端开发来说,想要让用户能在...

4525

扫码关注云+社区

领取腾讯云代金券