<!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 过渡效果(以宽高属性居中放大为例)的更多相关文章

  1. 如何在Vue中,当鼠标hover上元素时,给元素加遮罩层

    介绍 当鼠标hover 上元素时,给元素加一层遮罩层. 效果图 使用 import VueHoverMask from 'vue-hover-mask' export default { compon ...

  2. JavaScript及jQuery中的各种宽高属性图解

    文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”.   作者声明:本 ...

  3. JavaScript中的各种宽高属性

    转自慕课网:http://www.imooc.com/article/14516   在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight.offsetHeight.scroll ...

  4. PHP去除html的宽高属性的正则表达式

    PHP去除html的宽高属性的正则表达式 <pre><?php/** * 清除宽高样式 * @param String $content 内容 * @return String */ ...

  5. CSS Transform让百分比宽高布局元素水平垂直居中

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...

  6. css 未知子元素宽高的居中

    .parent{ position:relative; } .child{ position:absolute; left:50%; top:50%; transform:translate(-50% ...

  7. Tooltip鼠标hover放上时文字提示

    使用content属性来决定hover时的提示信息. 由placement属性决定展示效果: placement属性值为:                 方向-对齐位置: 四个方向:top.left ...

  8. (转)详解JS位置、宽高属性之一:offset系列

    很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...

  9. js常用宽高属性

    document.body.clientWidth //body对象的宽度 document.body.clientHeight //body对象的高度 document.documentElemen ...

随机推荐

  1. Qt QObject

    [1]Qt的QObject 1.测试代码如下: #include<QApplication> #include<QPushButton> #include<QDebug& ...

  2. selenium测试(Java)--多窗口切换(十三)

    selenium测试(Java)--多窗口切换(十三) 如果遇到点击按钮或链接后出现新窗口的情况,就需要使用窗口切换的方法. 本例中就是先打开百度搜索界面,然后利用js打开一个百度新闻界面,然后通过s ...

  3. Innodb 表空间传输迁移数据

    在mysql5.5之前,mysql实例中innodb引擎表的迁移是个头疼的问题,要么使用mysqldump导出,要么使用物理备份的方法,但是在mysql5.6之后的版本中,可以使用一个新特性,方便地迁 ...

  4. CSU 1660 K-Cycle(dfs判断无向图中是否存在长度为K的环)

    题意:给你一个无向图,判断是否存在长度为K的环. 思路:dfs遍历以每一个点为起点是否存在长度为k的环.dfs(now,last,step)中的now表示当前点,last表示上一个访问的 点,step ...

  5. Netsuite > Employee Record Name维护规则

    Employee Record Name 维护规则 - 在NS系统设计中,默认的Field展现是:First Name, Middle Name, Last Name - 在General Prefe ...

  6. Fragment全解析系列(三):Fragment之我的解决方案:Fragmentation

    源码地址:Github,欢迎Star,Fork. Demo网盘下载(V_0.7.13)Demo演示:单Activity + 多Fragment,项目中有3个Demo. 流式的单Activity+多Fr ...

  7. JQ完成表格单元格顺序的上移下调

    如有指教及疑问,欢迎留言 HTML代码 <table class="exampletable"> <thead> <tr> <th> ...

  8. 图解MySQL5.5详细安装与配置过程

    MySQL是一个开源的关系型数据库管理系统,原由瑞典MySQL AB公司开发,目前属于Oracle公司旗下.MySQL是目前世界上开源数据库中最受欢迎的产品之一,是应用最为广泛的开源数据库.MySQL ...

  9. 什么是原生的javascript

    在www.cocos.com的cocos2d-js的介绍中写道“Cocos2d-JS 是跨全平台的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windo ...

  10. Date Picker和UITool Bar的使用

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana } span.s1 { } span.s2 { background-colo ...