<!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. css3动画之小牛奔跑

    今天突然看到阿里云官网的一个悬浮效果挺炫的,就想知道到底是怎么做的,研究了半天,加了一个技术群,原来是css3做的,然后做了一个小 Demo记录下来: <!DOCTYPE html> &l ...

  2. 【转】PowerShell 函数（Function）

    转至:http://blog.csdn.net/kk185800961/article/details/49022395 函数基本操作: [plain] view plain copy #创建函数 F ...

  3. ASP.NET Repeater嵌套Repeater实现菜单加载

    在KS系统中要实现从数据库中读取界面权限文件实现菜单.界面的动态加载. 效果图: ASP.NET界面代码 <div id="menu-container"> <a ...

  4. bootstrap——下拉菜单右对齐

    通过向 .dropdown-menu 添加 .pull-right 类来向右对齐下拉菜单. Bootstrap默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropd ...

  5. c++错误——intermediate.manifest : general error c1010070很傻的错

    .\Debug\sadf.exe.intermediate.manifest : general error c1010070: Failed to load and parse the manife ...

  6. samba

    在/home/下有多个用户目录A.B...,现通过samba共享,要求A用户对A用户组目录具有root权限,对其他目录具有 读权限,B用户对B目录具有root权限,对其他目录只读.并在登陆各个目录时要 ...

  7. [mysql]throw exception

    CREATE PROCEDURE pro_throwException (errorCode char(5), errorMessage text) BEGIN SIGNAL SQLSTATE err ...

  8. Nudnik Photographer -Ural1260动态规划

    Time limit: 1.0 second Memory limit: 64 MB If two people were born one after another with one second ...

  9. [LeetCode_3] Longest Substring Without Repeating Characters

    LeetCode: 3. Longest Substring Without Repeating Characters class Solution { public: int lengthOfLon ...

  10. 【前端】提取URL中的各个GET参数

    /**************************** * 有这样一个URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xx ...