<style>

        .box {

            width: 183px;

            height: 130px;

            overflow: hidden;

            border: 1px solid pink;

        }

        div img {

            width: 193px;

            height: 130px;

            transition: all 0.4s;

        }

        div:hover img {

            /* margin-left: -10px; */

            /* 还可以其他的放式*/

            /*transform: translateX(-10px);*/

            transform: scale(1.1);

        }

    </style>

</head>

<body>

    <div class="box">

        <!--386*260-->

        <img src="img/xiaobu.jpg">

    </div>

</body>


谁做动画，动画效果状态写谁身上，

动画过程写hover中

css动画京东小布hover放大的更多相关文章

  1. Animo.js ：一款管理 CSS 动画的强大的小工具

    Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...

  2. CSS动画基础知识

    CSS动画就是通过CSS (Cascading Style Sheet,层叠样式表)代码搭建的网页动画.它允许设计师和开发人员通过编辑网站的CSS代码来添加页面动画,从而轻松取代传统动画图片或flas ...

  3. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  4. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

  5. css动画-animation各个属性详解（转）

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  6. 这样使用 GPU 渲染 CSS 动画（转）

    大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...

  7. CSS动画简介

    现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端. 但是,CSS动画除外,它实在太有用了. 本文介绍CSS动画的两大组成部分:transition和animation.我不打算给出 ...

  8. CSS动画实例

    上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果 代码:最外层div包含2个小的div : a和b.   a有左右边框(高度 ...

  9. CSS动画详解及transform、transition、translate的区别

    刚看完一节慕课网的css动画,在此总结下 1. 先说下 transform.transition.translate的区别 transform 和 transition是css的2个属性,transl ...

  10. CSS动画复习

    一.css动画相关的几个属性 属性 含义 理解 transform 一种CSS属性.用于修改CSS视觉格式模型的坐标空间.使用它,元素可以被移动(translate).旋转(rotate).缩放(sc ...

随机推荐

  1. 无法安装此app,因为无法验证其完整性 ，解决方案

    最近有很多兄弟萌跟我反应"无法安装此app,因为无法验证其完整性 ",看来这个问题无法避免了,今天统一回复下,出现提示主要有以下几种可能 1.安装包不完整 首先申请我所有分享的破解 ...

  2. MongoDB 和 MySQL 之间有何区别？

    MongoDB 和 MySQL 是两个可用于存储和管理数据的数据库管理系统.MySQL 是一个关系数据库系统,以结构化表格格式存储数据.相比之下,MongoDB 以更灵活的格式将数据存储为 JSON ...

  3. OS | 进程和线程基础知识全家桶图文详解✨

    前言 先来看看一则小故事 我们写好的一行行代码,为了让其工作起来,我们还得把它送进城(进程)里,那既然进了城里,那肯定不能胡作非为了. 城里人有城里人的规矩,城中有个专门管辖你们的城管(操作系统),人 ...

  4. IntelliJ JSP 格式化问题

    Q: 当我尝试在 IntelliJ 中格式化一些 JSP 文件时,所有行都从头开始. A: 因为JSP是有关HTML和HTML以下标签的孩子html,body,thead,tbody,tfoot默认情 ...

  5. AtCoder Beginner Contest 196 个人题解

    A - Difference Max 区间左端减去区间右端 int main() { ios_base::sync_with_stdio(false), cin.tie(0); int a, b, c ...

  6. C++函数：std::tie 详解

    在补CF周赛时发现dalao用了一个 tie函数和tuple类型,表示没怎么接触,现在稍微学习记录一下. tuple 即元组,可以理解为pair的扩展,可以用来将不同类型的元素存放在一起,常用于函数的 ...

  7. 如何设置IDEA代码风格为Google风格，使用Google风格format

    1.在Github仓库寻找:google style 为了节省大家时间直接放链接了:Here 2.进到项目 找到名为intellij-java-google-style.xml 文件 Ctrl + F ...

  8. vivo 商城架构升级-SSR 实战篇

    一.前言 在前面几篇文章中,相信大家对vivo官网商城的前端架构演变有了一定的了解,从稳步推进前后端分离到小程序多端探索实践,团队不断创新尝试. 在本文中,我们来分享一下vivo官网商城在Node 服 ...

  9. iviews Radio组件如何获取key而不是value

    iviews RadioGroup 官网里介绍Radio组件获取的值都是name属性没有value 例如: <template> <Space wrap size="lar ...

  10. 基于html+jquery开发的科学计算器（课程作业）

    基于html和jquery开发的科学计算器,该科学计算器可进行乘方.开方.指数.对数.三角函数.统计等方面的运算,又称函数计算器. 科学型带有所有普通的函数,所有的函数都分布在键盘上以致于你可以不用通 ...