gpt4 book ai didi

css - 拇指上的文字动画

转载 作者:行者123 更新时间:2023-11-28 13:46:56 26 4
gpt4 key购买 nike

我正在尝试创建一个带有框拇指的下载页面描述文字来自右侧的位置当鼠标在拇指上时

我做了几乎所有我仍然要格式化的事情

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

    有什么建议吗?

    发送

    这是代码:

        <!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/

  • 最佳答案

    我更新了你的 fiddle :http://jsfiddle.net/A97cc/1

    为了防止元素在其父元素之外可见,您可以将溢出设置为隐藏在父元素上,在您的例子中为 div0。

    关于css - 拇指上的文字动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11798340/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com