@mdjsjdq 2015-10-11T11:42:40.000000Z 字数 601 阅读 1997

Hover_Transition_01

HTML 编程

利用CSS设计的浏览器动画

<html>
    <head>
        <title>hover_transition</title>
        <meta charset="utf-8">
            <style type="text/css">
                .go{
                margin: 20px;
                border: solid;
                border-color: goldenrod;
                width: 1000px;
                height: 667px;
                position: relative;
                overflow: hidden;
                background: url("http://img.taopic.com/uploads/allimg/130501/240451-13050106450911.jpg") no-repeat 0px 0px;
            }   
            .go:hover {
                background-position: 500px 0px;
                -webkit-transition: all 0.5s ease-in-out 0s;
                -o-transition: all 0.5s ease-in-out 0s;
                transition: all 0.5s ease-in-out 0s;                
            }
        </style>
    </head>
        <body>      
<div class="go">    
    <a style="width:100%;height:100%;display:block" href="#"></a>
<div>               
        </body>
</html>

eye_2.jpg-171.9kB

eye.jpg-60kB

Hover_Transition_01

内容目录