2D变形缩放效果

2018-08-15  本文已影响6人  9979eb0cd854

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            section {
                width: 632px;
                height: 340px;
                margin: 100px auto;
                overflow: hidden;/*溢出隐藏*/
            }
            section img {/*谁做动画,谁加过渡*/
                transition: all 0.5s; 
            }
            section:hover img {/*鼠标经过section的时候,里面的img缩放*/
                transform: scale(1.2);
            }
        </style>
    </head>
    <body>
        
        <section>
            <img src="img/1.jpg" width="632" height="340" alt=""/>
        </section>
    </body>
</html>

效果:

image.png
上一篇下一篇

猜你喜欢

热点阅读