CSS3实现鼠标移动图片上图片变大(缓慢变大,放大过程有动画过渡,过渡时间可自定义)

V站笔记

CSS3的transform:scale()可以实现按比例放大或者缩小功能。

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

效果如下图所示:

1、当未鼠标未放到图片上的效果:

2、当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可以自定义):

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            div{  
                width: 300px;  
                height: 300px;  
                border: #000 solid 1px;  
                margin: 50px auto;  
                overflow: hidden;  
            }  
            div img{  
                cursor: pointer;  
                transition: all 0.6s;  
            }  
            div img:hover{  
                transform: scale(1.4);  
            }  
        </style>  
    </head>  
    <body>  
        <div>  
            <img src="img/focus.png" />  
        </div>  
    </body>  
</html>  

其中: transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。 transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

2 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

CSS基础(六):浮动深入

在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素边界;而在竖直方向和兄弟元素依次排列,不能并排。使用浮动方式后,块级元素的表现就会不同。简单的说...

441
来自专栏编程之路

羊皮书APP(Android版)开发系列(七)Android沉浸通知栏

603
来自专栏吴小龙同學

Android Design Support Library之CollapsingToolbarLayout

效果预览 ? 使用方法 Gradle 中添加下面依赖 1compile 'com.android.support:design:23.1.0' Collap...

27010
来自专栏Android知识点总结

2-VVI-材料设计之TabLayout下标签

665
来自专栏分享达人秀

两分钟掌握FrameLayout帧布局

前面学习了线性布局、相对布局、表格布局,那么本期来学习第四种布局——FrameLayout帧布局。 一、认识FrameLayout 帧布局是An...

1989
来自专栏web编程技术分享

【H5 音乐播放实例】第二节 音乐详情页制作(2)1.2 音乐盒子区域

2265
来自专栏学海无涯

Android开发之帧动画

Android动画主要分为3种 View动画(Android开发之View动画) 帧动画 属性动画 何为帧动画? 帧动画最简单,通过顺序播放一系列的图像产生动画...

2928
来自专栏编码小白

mac操作技巧

1清除launchpad界面残留图标 在launchpad界面: 第一步:长按快捷键control+option,图标会抖动 第二步:单击删除图标 2...

3436
来自专栏从零开始学自动化测试

appium+python自动化24-滑动方法封装(swipe)

一、swipe介绍 1.查看源码语法,起点和终点四个坐标参数,duration是滑动屏幕持续的时间,时间越短速度越快。默认为None可不填,一般设置500-1...

3924
来自专栏无原型不设计

Mockplus:如何调整图标的大小和方向?

使用属性面板上的大小设置,可以很方便地调节图标大小。 ? 调整方向还是通过属性面板来完成: ? 另外:有些图标调整了大小之后可以用做特别的用途哟,比如 S...

1953

扫码关注云+社区