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

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         给盒子添加浮动
  9.         div {
  10.             float: left;
  11.             margin: 10px;
  12.         }
  13.         鼠标经过时给盒子放大效果用scale放大1.1倍 注意！放大1倍是没有效果的1倍就是盒子本身的大小
  14.         div a img:hover {
  15.             transform: scale(1.1);
  16.         }
  17.         为了使得其放大效果更美观使用css的过渡效果0.5秒完成这个放大效果
  18.         div a img {
  19.             transition: all 0.5s;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div>
  25.         <a href="#"><img src="iPhone13.jpg" alt=""></a>
  26.     </div>
  27.     <div>
  28.         <a href="#"><img src="iPhone13.jpg" alt=""></a>
  29.     </div>
  30.     <div>
  31.         <a href="#"><img src="iPhone13.jpg" alt=""></a>
  32.     </div>
  33. </body>
  34. </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. 题目要求：传入数组 内容为[['lisi','男','27'],['wangwu','男',18],['zhaoliu','男','30']],将此二维数组转化为一维数组，创建自定义函数完成

    //自定义函数 function getOne($arr){ $str = ''; //定义空的字符串,用来接收值 foreach ($arr as $key=>$value){ //循环遍历数 ...

  2. LGP3307题解

    题意有点儿神秘,而且出题人可能有点大病( 项链由 \(n\) 颗珠子构成,相邻的珠子不能相同. 每颗珠子上有 \(3\) 个数字,这 \(3\) 个数之间没有顺序,且 \(\gcd\) 为 \(1\) ...

  3. freeswitch tts_commandline模块介绍

    概述 freeswitch是开源.免费的VOIP软交换平台,自带了很多功能各异的模块. mod_tts_commandline模块,本身没有TTS能力,而是通过调用TTS引擎的命令生成语音文件,tts ...

  4. k8s集群关机后，如何解决 kubernetes 重启起不来的问题

    如何解决 kubernetes 重启后,启来不来的问题 登录自己的Kubernetes测试集群时发现集群好像没有启动成功 运行 kubectl get pods --all -A ,报错如下. 第一反 ...

  5. ModelSim10.7安装破解教程

    我打算开始学习ZYNQ,所以先安装好工具ModelSim10.7,很无奈的是倒腾了一个上午也没生产license的txt文档和破解成功. 上面是破解失败的截图,下面是生成不了license,点了直接闪 ...

  6. 【freertos】002-posix模拟器设计与cortex m3异常处理

    目录 前言 posix 标准接口层设计 模拟器的系统心跳 模拟器的task底层实质 模拟器的任务切换原理 cortex M3/M4异常处理 双堆栈指针 双操作模式 栈帧 EXC_RETURN 前言 如 ...

  7. 【深度学习 01】线性回归+PyTorch实现

    1. 线性回归 1.1 线性模型 当输入包含d个特征,预测结果表示为: 记x为样本的特征向量,w为权重向量,上式可表示为: 对于含有n个样本的数据集,可用X来表示n个样本的特征集合,其中行代表样本,列 ...

  8. 基于COLA架构的电商财务系统-总

    财务 清算-clearing 对账-check 结算-settle 平账-correct 划拨-remit 包划分 按照COLA规则进行划分,综合考虑功能和领域两个维度包结构定义 技术参考 dddpl ...

  9. Linux下使用压力测试工具stress

    一:stress的安装 首先解压安装包到/usr/local/src/下 mv stress-1.0.4.tar.gz /usr/local/src​tar -zxf stress-1.0.4.tar ...

  10. Could not find the main class

    最近开发了一个短信报警的服务,打成程序包之后,再本地windows启动(start.bat)没有问题,但是发到生产环境,报如下错: Could not find the main class 莫名其妙 ...