元素溢出效果

来源:互联网 发布:五五开德云色事件知乎 编辑:程序博客网 时间:2024/06/05 08:33

通过鼠标悬停时的操作,实现一张图片不同部位图形的切换效果。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            .a{                border: 1px solid #ffffff;                width: 110px;                height: 110px;                margin:200px 300px;                position: absolute;                overflow: hidden;}           img{display: block;                position: absolute;                z-index: -1000;                left:-458px;                top:-183px;            }            .a:hover img{                top:-320px;            }        </style>    </head>    <body>        <div class="a">            <img src="img/564e9dff3572e_1024.jpg" />        </div>    </body></html>
原创粉丝点击