css过渡效果和盒子缩放大小的结合
给盒子一个鼠标经过时放大里面的图片效果在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过渡效果和盒子缩放大小的结合的更多相关文章
- CSS基础-7 盒子模型大小
在盒子模型当中,有些元素是影响盒子大小的. 首先border就会影响盒子的大小. 其次padding也会影响盒子的大小. 例子: .one { width:100px; height:100px; b ...
- 【CSS学习】--- 盒子模型
一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...
- 在css中控制图像的大小
可在CSS中利用width属性和height属性控制一个图像得到大小,就像控制其他任何盒子的大小一样. <html> <head> <title>TODO supp ...
- js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小
众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...
- echarts图表自适应盒子的大小(盒子的大小是动态改变的),大到需要全屏展示
项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...
- [19/06/06-星期四] CSS基础_盒子模型
一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒 ...
- CSS进阶内容—盒子和阴影详解
CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...
- css中的盒子模型
css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型. 1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...
- Css中光标,DHTML,缩放的使用
Css中光标的使用: 属性名称 属性值 说明cursor ...
随机推荐
- php模式的设计
工厂模式是我们最常用的实例化对象模式,是用工厂方法代替new操作的一种模式. 工厂模式有一个关键的构造,根据一般原则命名为Factory的静态方法,然而这只是一种原则,虽然工厂方法可以任意命名这个静态 ...
- Lua在Nginx的应用
当 Nginx 标准模块和配置不能灵活地适应系统要求时,就可以考虑使用 Lua 扩展和定制 Nginx 服务.OpenResty集成了大量精良的 Lua 库.第三方模块,可以方便地搭建能够处理超高并发 ...
- 17 数组 Arrays类
Arrays类 概念 数组的工具类java.util.Arrays 由于数组对象本身并没有什么方法可以供我们调用,但API中提供了一个工具类Arrays供我们使用,从而可以对数据对象进行一些基本的操作 ...
- 打靶笔记-04-vulnhub-Jangow
打靶笔记-04-vulnhub-Jangow 前面两篇名称写成了vulhub,已经更改为vulnhub;vulhub的之后再找个时间集中打一遍. 一.靶机信息 Name: Jangow: 1.0.1 ...
- Python的编译安装
到 Python 官网下载 Python3 curl -O https://www.python.org/ftp/python/3.7.4/Python-3.7.4.tgz 安装依赖 sudo apt ...
- js开发文档生成工具jsdoc安装使用
1.全局安装jsdoc,需要先安装node环境哦~ npm install -g jsdoc 2.在项目根目录新建文件conf.json,内容如下: { "tags": { &qu ...
- Linux下查看端口占用进程号,程序名的方法
Linux下查看端口占用进程号,程序名的方法,方便我们查找什么进程导致系统变慢等需要.linux下查看端口占用情况: 1. 查看哪个进程占用了819端口: case9-sghfofo:/usr/loc ...
- django之分页,纯python代码
Django中分页 py文件代码 """ 自定义分页组件 可以返回分页的数据和分页的HTML代码 """ from django.http ...
- 10ISE14.7和modelsim10.5关联编译库
今天准备在ISE14.7中调用PLL的IP核,搞一下时钟的分频和倍频.可在我做好pll的IP核后,我直接用ise生成了一个仿真文件,只需要修改下例化模块名和加一个时钟就行勒. 问题:但怎么在ISE14 ...
- 到底为什么不建议使用SELECT *?
"不要使用SELECT *"几乎已经成为了MySQL使用的一条金科玉律,就连<阿里Java开发手册>也明确表示不得使用*作为查询的字段列表,更是让这条规则拥有了权威的加 ...