鼠标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>

　　

posted @ 2017-01-05 15:16  Arlar  阅读(3663)  评论(0)  编辑  收藏  举报