拇指上的文本动画



im正在尝试创建一个带有box拇指的下载页面描述文本来自右侧当鼠标在拇指上时

我几乎做了所有的事情我仍然用

  • 格式化但是文本出现在100*100px框外,我不知道是什么我不见了,我只能看到盒子里的动画。

    有什么建议吗?

    tnx

    这是代码:

        <!DOCTYPE html>
        <html>
        <head>
        <style type="text/css">
        div.div0 {
        background:url('t_k1.png');
        display:block;
        width:100px;
        height:100px;
        position:relative;
        }
        div.div1 {
        opacity:0;
        display:block;
        left:100px;
        width:100px;
        height:100px;
        background:#999;
        position:relative;
        text-align:center;
        vertical-align:-50px;
        }
        div.div0:hover div.div1 {
        animation:mymove 2s forwards;
        -moz-animation:mymove 2s forwards;
        -webkit-animation:mymove 2s forwards;
        -o-animation:mymove 2s forwards;
        }
        @keyframes mymove {
        from {left:100px; opacity:0;}
        to {left:0px; opacity:0.8;}
        }
        @-moz-keyframes mymove /*Firefox*/ {
        from {left:100x; opacity:0;}
        to {left:0px; opacity:0.8;}
        }
        @-webkit-keyframes mymove /*Safari and Chrome*/ {
        from {left:100px; opacity:0;}
        to {left:0px; opacity:0.8;}
        }
        @-o-keyframes mymove /*Opera*/ {
        from {left:100px; opacity:0;}
        30% {opacity:0.2;}
        to {left:0px; opacity:0.8;}
        }
        </style>
        </head>
        <body>
        <div style="display:block; left:100px; top:100px; width:100px; height:100px; position:absolute;">
        <div class="div0">
        <div class="div1"><br /><br /><a href="#">prova</a></div>
        </div></div>
    
        </body>
        </html>
    

    http://jsfiddle.net/A97cc/

  • 我更新了你的小提琴:http://jsfiddle.net/A97cc/1

    为了防止元素在其父元素之外可见,您可以将overflow设置为隐藏在父元素上,在您的情况下为div0。

    相关内容

    • 没有找到相关文章

    最新更新