鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）
<!DOCTYPE html>
<html>
<head>
</head>
<body id="body">
<!--
/*transition过渡特效*/
第一步：设置目标元素div2的初始样式
第二步：设置目标元素div2在鼠标hover时的表现样式
第三步：给目标元素添加transition属性，并指定需要过渡的属性 /*固定宽高盒子上下左右居于不定宽高容器正中*/
第一步：设置待定位盒子和宽高值
第二步：将待定位盒子position属性设为absolute使其相对于父元素绝对定位（相对于static定位以外的第一个父元素进行定位）,
使其顶部和左侧定位距离设为父元素高和宽的50%（即：先将盒子定位到“父元素4分之1区域的右下部”）
第三步：把待定位盒子的margin-top值和margin-left值设为其高度和宽度一半的负值（即：把盒子从右下区域拉回正中间）
--> <div id="div2">
<div>
content content content content content content content content
</div>
</div> <style>
* {
margin:0;
padding:0;
} #body {
background-color:green;
} #div2 {
width:300px;
height:200px;
background-color:red; position:absolute;
top:50%;
left:50%; margin-top:-100px;
margin-left:-150px; transition:all 3s;
/*transition:width 3s,height 3s,margin-top 3s,margin-left 3s,background-color 3s;*/ /*属性随相同时间过渡，整体过渡显得很规则*/
/*transition:width 1s,height 2s,margin-top 2s,margin-left 3s,background-color 3s;*/ /*属性随不同时间过渡，整体过渡显得更有动态感*/
} #div2:hover {
width:600px;
height:400px;
margin-top:-200px;
margin-left:-300px;
background-color:yellow;
}
</style> <script src="jquery-2.1.1.min.js"></script>
<script> </script>
</body>
</html>
鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）的更多相关文章
- 如何在Vue中，当鼠标hover上元素时,给元素加遮罩层
介绍 当鼠标hover 上元素时,给元素加一层遮罩层. 效果图 使用 import VueHoverMask from 'vue-hover-mask' export default { compon ...
- JavaScript及jQuery中的各种宽高属性图解
文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”. 作者声明:本 ...
- JavaScript中的各种宽高属性
转自慕课网:http://www.imooc.com/article/14516 在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight.offsetHeight.scroll ...
- PHP去除html的宽高属性的正则表达式
PHP去除html的宽高属性的正则表达式 <pre><?php/** * 清除宽高样式 * @param String $content 内容 * @return String */ ...
- CSS Transform让百分比宽高布局元素水平垂直居中
很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...
- css 未知子元素宽高的居中
.parent{ position:relative; } .child{ position:absolute; left:50%; top:50%; transform:translate(-50% ...
- Tooltip鼠标hover放上时文字提示
使用content属性来决定hover时的提示信息. 由placement属性决定展示效果: placement属性值为: 方向-对齐位置: 四个方向:top.left ...
- （转）详解JS位置、宽高属性之一：offset系列
很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...
- js常用宽高属性
document.body.clientWidth //body对象的宽度 document.body.clientHeight //body对象的高度 document.documentElemen ...
随机推荐
- VMWare虚拟机NAT上网方法 亲测可用
首先虚拟机的网卡要选择NAT 然后 在Virtual Network Editor中一定选上DHCP功能. 还要主机的服务必须开启.主机的VMnet8对应NAT模式,这个VMnet8的配置保持默认不要 ...
- 【转】PowerShell 连接SQL Server 数据库 - ADO.NET
转至:http://www.pstips.net/connect-sql-database.html PowerShell 通过ADO.NET连接SQL Server数据库,并执行SQL脚本.工作中整 ...
- Vim命令合集大全
命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filename 打开vim ...
- C#中常用的转义字符及@符号的一些作用
转义符指的就是一个'\'+一个特殊的字符,组成了一个具有特殊意义的字符. \n:表示换行. /b表示一个退格键.放到字符串两边没有效果. \t:表示tab键的空格 \":表示一个英文半角的 ...
- angularJS——自定义服务provider之$get
可以认为provider有三个部分: 第一部分是私有变量和私有函数,这些变量和函数会在以后被修改. 第二部分是在app.config函数里可以访问的变量和函数,所以,他们可以在其他地方使用之前被修改. ...
- javascript - 可编辑表格控件 支持全键盘操作(无JS框架)
项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型 2.支持全键盘操作,自定 ...
- lnmp搭建
一,安装php1,列出php php-fpm是否存在yum list php php-fpm2,安装yum -y install php php-fpm3,启动php-fpm:/etc/init.d/ ...
- Centos7搭建需要mysql的网站
1.在centos7上安装好http.php.php-mysql服务 php-mysql是用来链接的工具 2.在centos5上yum安装mysql 注意在搭建本地yum源时把校验关闭,不然安装不上 ...
- 以小时候玩的贪吃蛇为例，对于Java图像界面的学习感悟
简介 正文 01.JFrame是啥? 02.JPanel 03. KeyListener 04.Runnable 05.游戏Running 06.游戏初始类编写 07.main 简介: 一直以来用代码 ...
- PHP Problem with the SSL CA cert (path? access rights?)
1.php使用curl模块报错问题 开发遇到问题,直接使用系统的curl命令正常,使用php的curl模块报错 错误:PHP Problem with the SSL CA cert (path? a ...