页面中鼠标移上图片放大效果

原创 2018-12-31 21:01:52 247
摘要:<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>页面中鼠标移上图片放大效果</title>    <link rel="shortcut icon&qu

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>页面中鼠标移上图片放大效果</title>

    <link rel="shortcut icon"  href="static/images/logo.png" type="image/x-icon" />

    <style type="text/css">

       .pic{width: 500px;margin: 150px auto;}

       .pic img{

        border-radius: 5px;

        transition: all 0.5s;/*图片放大过程的秒数*/



       }


       .pic:hover img{

        transform:scale(1.5);

       }


    </style>

</head>

<body style="background:#ccc;">

<div class="pic">

    <img src="static/images/1.jpg">

</div>

</body>

</html>


批改老师:天蓬老师批改时间:2018-12-31 22:33:25
老师总结:margin: 150px auto; 这个规则,展开是什么,知道吗?

发布手记

热门词条