<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. 中企出海，用火山引擎DataTester开启增长第一步

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   今年 Google 宣布其提供的A/B测试工具 Optimize 将在2023年9月30号停止服务.在全球化浪 ...

  2. linux tar解压命令总结

    把常用的tar解压命令总结下,当作备忘: -c:建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可 ...

  3. 【ToolChains】CLion（VS2019） + CMake + Vcpkg 的使用

    参考博客: https://blog.51cto.com/u_15075510/4201238 http://t.csdn.cn/pADDU https://zhuanlan.zhihu.com/p/ ...

  4. Codeforces Round #719 (Div. 3) A~E题解

    51鸽了几天,有几场比赛的题解还没发布,今天晚上会补上的 1520A. Do Not Be Distracted! 问题分析 模拟,如果存在已经出现的连续字母段则输出NO using ll = lon ...

  5. JXUST_NC - ACM工作室20级选拔赛题解

    A - RioTian学长的星际航线 并查集板子 #include <bits/stdc++.h> using namespace std; const int maxn = 1010; ...

  6. 【每天一个不会秃头的前端案例】CSS + JS 实现早安，晚安动画

    从橘子学姐那边学来的 早安,晚安动画(CSS + js) 成果展示 先看成果. 通过点击太阳实现日夜的动画平滑交替 Movie 这里就不多说什么了,直接贴一下代码 HTML部分 <!DOCTYP ...

  7. Spring Boot 自动配置注解源码解析

    前言 为什么Spring Boot这么火?因为便捷,开箱即用,但是你思考过为什么会这么便捷吗?传统的SSM架构配置文件至少要写半天,而使用Spring Boot之后只需要引入一个starter之后就能 ...

  8. Serverless Devs 重大更新，基于 Serverless 架构的 CI/CD 框架：Serverless-cd

    近日,Serverless 开发者平台 Serverless Devs 重磅发布基于 Serverless 架构的轻量级 CI/CD 框架--Serverless-cd.Serverless-cd 是 ...

  9. <vue 组件 4、插槽的使用>

    代码结构 一.     01-slot-插槽的基本使用 1. 效果 同样的一个插槽,父组件调用的时候不同展现的内容就不同 2.代码 01-slot-插槽的基本使用.html <!DOCTYPE ...

  10. vue学习笔记 十二、通过计算属性获取定义的状态数据

    系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...