给盒子一个鼠标经过时放大里面的图片效果在css中使用过渡效果transition结合

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        给盒子添加浮动

        div {

            float: left;

            margin: 10px;

        }

        鼠标经过时给盒子放大效果用scale放大1.1倍 注意！放大1倍是没有效果的1倍就是盒子本身的大小

        div a img:hover {

            transform: scale(1.1);

        }

        为了使得其放大效果更美观使用css的过渡效果0.5秒完成这个放大效果

        div a img {

            transition: all 0.5s;

        }

    </style>

</head>

<body>

    <div>

        <a href="#"><img src="iPhone13.jpg" alt=""></a>

    </div>

    <div>

        <a href="#"><img src="iPhone13.jpg" alt=""></a>

    </div>

    <div>

        <a href="#"><img src="iPhone13.jpg" alt=""></a>

    </div>

</body>

</html>```

css过渡效果和盒子缩放大小的结合的更多相关文章

  1. CSS基础-7 盒子模型大小

    在盒子模型当中,有些元素是影响盒子大小的. 首先border就会影响盒子的大小. 其次padding也会影响盒子的大小. 例子: .one { width:100px; height:100px; b ...

  2. 【CSS学习】--- 盒子模型

    一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...

  3. 在css中控制图像的大小

    可在CSS中利用width属性和height属性控制一个图像得到大小,就像控制其他任何盒子的大小一样. <html> <head> <title>TODO supp ...

  4. js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小

    众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...

  5. echarts图表自适应盒子的大小（盒子的大小是动态改变的），大到需要全屏展示

    项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...

  6. [19/06/06-星期四] CSS基础_盒子模型

    一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒 ...

  7. CSS进阶内容—盒子和阴影详解

    CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...

  8. css中的盒子模型

    css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型.   1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...

  9. Css中光标,DHTML,缩放的使用

    Css中光标的使用: 属性名称                属性值                                         说明cursor                 ...

随机推荐

  1. ELKB-ElasticSearch-Logstash-Kibana-beats 个人理解

    先说一下ELK,E是ElasticSearch,L是Logstash,K是Kibana,还有一个Beats.按照从采集到展示的顺序介绍下各个组件的作用. 1.Beats Beats 是一个免费且开放的 ...

  2. 制作自己的rpm包，并为其制作patch包。

    本文分为两个部分,第一部分是制作一个简单的自己的rpm包,并安装运行它.第二部分是为其制作一个patch包,并通过spec配置文件去打补丁,安装.运行打补丁后的程序. 一.安装工具 [yh@local ...

  3. npm vue项目的创建

    一.创建项目之前需要先下载一个node.js 官方网址:https://nodejs.org/en/  二.创建 (1)建一个文件夹,进入这个文件夹输入cmd打开小黑窗: Vue.js文档:https ...

  4. WinDbg调试托管程序环境问题总结

    基本环境搭建及安装 安装 有2个方式可以安装WinDbg. 新版 安装WinDbg Preview 在商店里搜WinDbg直接就可以安装,这里安装的版本是x64版本.x64版本的WinDbg其实是可以 ...

  5. Wireshark DTN解析器拒绝服务漏洞

    受影响系统:Wireshark Wireshark 2.2.0 - 2.2.1Wireshark Wireshark 2.0.0 - 2.0.7描述:CVE(CAN) ID: CVE-2016-937 ...

  6. vim编写C/C++程序过程

    vim编写C.C++程序过程(以hello world为例): vim hello.c/hello.cpp 或者vi hello.c/hello.cpp创建hello.c/hello.cpp文件并进入 ...

  7. Java基础——自动装箱与拆箱

    装箱:把基本数据类型转换为对应的包装类类型 //装箱Integer i=Integer.ValuesOf(100);//自动装箱integer i1=100;//能够直接赋值成功的称为自动装箱,也调用 ...

  8. 常用正则表达式与python中的re模块

    正则表达式是一种通用的字符串匹配技术,不会因为编程语言不一样而发生变化. 部分常用正则表达式规则介绍: . 匹配任意的一个字符串,除了\n * 匹配任意字符串0次或者任意次 \w 匹配字母.数字.下划 ...

  9. 深度学习工具LabelXml安装教程

    LabelXml安装教程 1,下载LabelXml工具 前往github上下载labelxml,官网地址如下:https://github.com/tzutalin/labelImg 下载打包源码为z ...

  10. SIMOTION D435-2 PN报错1915，无法进入RUN状态 解决方法

    1.现象 2.解决方法 以下几种情况会导致SIMOTION D CPU无法RUN状态: 1.SIMOTION D设置CPU上电后自动进入RUN状态,上电后D4x5 CPU准备就绪,开始执行系统任务区的 ...