首页 > 代码库 > trasition过度效果

trasition过度效果

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            font-family: myfamily;

            font-size: 20px;

        }

        @font-face {

            font-family: myfamily;    /*字体自定义名称,便于引用*/

            /*自定义字体

            */

            src:url("res/font.TTF");

            /*字体的url*/

        }


        p{

            transition: 500ms;

            font-family: myfamily;

            font-size: 20px;

            position: relative;

            top: 200px;

            left: 100px;

        }

        

        p:hover{

            font-size: 70px;

            color: aquamarine;

        }

        div{

              width: 400px;

              height: 200px;

              background-color: lavenderblush;

              transition: width 2s linear  ;                        /*宽度过度时间为2s,匀速*/


        }

        div:hover{

            width: 600px;


        }

        #div2{

            text-align: center;

            margin: auto;

        line-height: 20px;;

            font-size: 2px;

            width: 50px;;

            height: 20px;;

            background-color: antiquewhite;

            transition:1s;                            /*只改变了背景色,过度时间为1s*/

        }

        #div2:hover{

            background-color: coral;

        }

    </style>

</head>

<body>


    <div id="div1">


    </div>

    <div id="div2">

            红米2

    </div>


</body>

</html>


本文出自 “matengbing” 博客,请务必保留此出处http://matengbing.blog.51cto.com/11395502/1875885

trasition过度效果