<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. GaussDB(DWS) NOT IN优化技术解密：排他分析场景400倍性能提升

    摘要:本文针对8.1.2版本中的NOT IN场景的Mixed-HashJoin新技术进行介绍.该技术在GaussDB(DWS)与招商银行的联创项目中落地,为招商银行的批量作业带来了总体15%的性能提升 ...

  2. 深度解读鸿蒙轻内核CPU占用率

    摘要:CPUP(Central Processing Unit Percentage,CPU占用率)分为系统CPU占用率和任务CPU占用率.用户通过系统级的CPU占用率,判断当前系统负载是否超出设计规 ...

  3. 为了减少代码复杂度，我将if-else升级为面向状态编程

    摘要:面向过程设计和面向对象设计的主要区别是:是否在业务逻辑层使用冗长的if else判断. 本文分享自华为云社区<从面向if-else编程升级为面向状态编程,减少代码复杂度>,作者:br ...

  4. Axure 表格中根据条件设置不同的字体样式--中继器

    中继器+表格,根据条件设置不同的字体样式 思路:根据情形,设置不同的颜色,因为Axure 不能直接对元件的样式进行交互设置,所以借助[动态面板]进行设置 绘制表格详见:https://www.cnbl ...

  5. 以 Golang 为例详解 AST 抽象语法树

    前言 各位同行有没有想过一件事,一个程序文件,比如 hello.go 是如何被编译器理解的,平常在编写程序时,IDE 又是如何提供代码提示的.在这奥妙无穷的背后, AST(Abstract Synta ...

  6. MySQL 的 crash-safe 原理解析

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/5i9wmJs4_Er7RaYfNnETyA作者:xieweipeng MySQL作为当下最流行 ...

  7. 图扑数字孪生智慧机场，助推民航"四型机场"建设

    前言 民航局印发的<智慧民航建设路线图>文件中,明确提出智慧机场是智慧民航的四个核心抓手之一.并从机场全域协同运行.作业与服务智能化.智慧建造与运维方面,为智慧机场的发展绘制了清晰的蓝图. ...

  8. 数字孪生智慧物流之 Web GIS 地图应用

    前言 随着数字经济时代的来临,新一轮全球化进程速度加快,在大数据.人工智能.物联网等高新技术深度融合下,加快催化智慧物流发展,引领物流行业划入全新时代. 从物流运输到货物分拣再到站点配送,图扑软件数据 ...

  9. C# 排序算法5：归并排序

    归并排序,是将两个(或两个以上)有序表合并成一个新的有序表,即把待排序序列分为若干个有序的子序列,再把有序的子序列合并为整体有序序列.该算法是采用分治法. 原理: 1.申请空间,使其大小为两个已经排序 ...

  10. poj 3246 简单线段树

    线段树还真有点难写... #include <iostream> #include <cstdio> #include <cstring> #include < ...