0

我正在尝试研究如何在悬停在一个 div 上时显示隐藏的剪切（facebook、google+、twitter）div。

以右上方分享圆形 div 动画为例：http ://www.gethyapp.com/

请看看我做了什么：http: //goo.gl/6XDM8
这是我在代码中所做的：

HTML

<div class="share">share
    <div class="line"></div>
    <div class="facebook">fb</div>
    <div class="google-plus">g+</div>
    <div class="twitter">t</div>
</div>

CSS

.share{
    background-color: #DA251D;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: relative;
}
.share .facebook,
.share .google-plus,
.share .twitter,
.share .line {
    display:none;
}
.facebook{
    background-color: #FFFF00;
    width: 0px;
    height: 0px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;

}
.google-plus{
    background-color: #FFFF00;
    width: 0px;
    height: 0px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;

}
.twitter{
    background-color: #FFFF00;
    width: 0px;
    height: 0px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;

}
.line{
    width: 1px;
    height: 200px;
    background-color: #000;
    position: absolute;
    left: 30px;
}

JS

$(function(){
    $(".share").hover(function(){
        $(this).find(".line").delay(50).fadeIn().animate({width: 1, height: 200, opacity: 1, top:10},200);
        $(this).find(".facebook").delay(100).fadeIn().animate({width: 32, height: 32, opacity: 1},400);
        $(this).find(".google-plus").delay(300).fadeIn().animate({width: 32, height: 32, opacity: 1},400);
        $(this).find(".twitter").delay(500).fadeIn().animate({width: 32, height: 32, opacity: 1},400);
    }, function(){
          $(this).find(".line").delay(50).fadeIn().animate({width: 1, height: 0, opacity: 0, top:-10},200)
          $(this).find(".facebook").delay(500).animate({width: 0, height: 0, opacity: 0},400);
          $(this).find(".google-plus").delay(300).animate({width: 0, height: 0, opacity: 0},400);
          $(this).find(".twitter").delay(100).animate({width: 0, height: 0, opacity: 0},400);
    });
});

当您将鼠标悬停在共享框上时，如何制作它旁边会出现另一个剪切框？

4

1 回答 1

0

我访问了你提到的网站。参考该站点，我将执行此动画的代码作为

 <style type="text/css">
    #share
    {
        display: none;
        position: absolute;
        right: 65px;
        top: 20px;
        line-height: 46px;
        padding-right: 59px;
    }
    #share .list
    {
        position: absolute;
        top: 0;
        right: 0;
        background: transparent;
    }
    #share .list strong, #share .list a
    {
        position: relative;
        display: block;
        width: 46px;
        height: 46px;
        font-size: 30px;
        font-weight: normal;
        text-align: center;
        -webkit-border-radius: 23px;
        -moz-border-radius: 23px;
        border-radius: 23px;
        background: #fff;
        color: #3fbad8;
        margin: 0 0 6px;
        font-family: 'icomoon';
    }
    #share .list strong
    {
        cursor: default;
    }
    .ie9 #share .list strong
    {
        padding-top: 5px;
        height: 41px;
    }
    #share .list strong span
    {
        position: absolute;
        top: 100%;
        left: 50%;
        width: 1px;
        height: 0;
        background: #fff;
        -webkit-transition: height .0001s linear;
        -moz-transition: height .0001s linear;
        -ms-transition: height .0001s linear;
        -o-transition: height .0001s linear;
        transition: height .0001s linear;
        opacity: 0;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
    #share .list a
    {
        background: #ff3;
        color: #000;
        -webkit-transition: -webkit-transform .0001s linear, background .0001s ease, color .0001s ease;
        -moz-transition: -moz-transform .0001s linear, background .0001s ease, color .0001s ease;
        -ms-transition: -ms-transform .0001s linear, background .0001s ease, color .0001s ease;
        -o-transition: -o-transform .0001s linear, background .0001s ease, color .0001s ease;
        transition: transform .0001s linear,background .0001s ease,color .0001s ease;
        -webkit-transform: scale(0) translate3d(0,0,0);
        -moz-transform: scale(0) translate3d(0,0,0);
        -ms-transform: scale(0) translate3d(0,0,0);
        -o-transform: scale(0) translate3d(0,0,0);
        transform: scale(0) translate3d(0,0,0);
        opacity: 0;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
    #share .list a:hover
    {
        background: #000;
        color: #fff;
        text-decoration: none;
    }
    #share .list .tw
    {
        font-size: 18px;
    }
    #share .list .fb
    {
        font-size: 32px;
    }
    #share .list .gp
    {
        font-size: 32px;
    }
    #share .list:hover strong span, #share .list.hover strong span
    {
        height: 135px;
        opacity: 1;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        -webkit-transition-duration: .3s;
        -moz-transition-duration: .3s;
        -ms-transition-duration: .3s;
        -o-transition-duration: .3s;
        transition-duration: .3s;
    }
    #share .list:hover a, #share .list.hover a
    {
        -webkit-transform: scale(1) translate3d(0,0,0);
        -moz-transform: scale(1) translate3d(0,0,0);
        -ms-transform: scale(1) translate3d(0,0,0);
        -o-transform: scale(1) translate3d(0,0,0);
        transform: scale(1) translate3d(0,0,0);
        opacity: 1;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        -webkit-transition-duration: .3s,.4s,.4s;
        -moz-transition-duration: .3s,.4s,.4s;
        -ms-transition-duration: .3s,.4s,.4s;
        -o-transition-duration: .3s,.4s,.4s;
        transition-duration: .3s,.4s,.4s;
    }
    #share .list:hover .tw, #share .list.hover .tw
    {
        -webkit-transition-delay: .1s,.0001s,.0001s;
        -moz-transition-delay: .1s,.0001s,.0001s;
        -ms-transition-delay: .1s,.0001s,.0001s;
        -o-transition-delay: .1s,.0001s,.0001s;
        transition-delay: .1s,.0001s,.0001s;
    }
    #share .list:hover .fb, #share .list.hover .fb
    {
        -webkit-transition-delay: .2s,.0001s,.0001s;
        -moz-transition-delay: .2s,.0001s,.0001s;
        -ms-transition-delay: .2s,.0001s,.0001s;
        -o-transition-delay: .2s,.0001s,.0001s;
        transition-delay: .2s,.0001s,.0001s;
    }
    #share .list:hover .gp, #share .list.hover .gp
    {
        -webkit-transition-delay: .3s,.0001s,.0001s;
        -moz-transition-delay: .3s,.0001s,.0001s;
        -ms-transition-delay: .3s,.0001s,.0001s;
        -o-transition-delay: .3s,.0001s,.0001s;
        transition-delay: .3s,.0001s,.0001s;
    }
</style>

<p id="share" style="opacity: 1; display: block;">
    Want Solution <span class="list"><strong>?? <span></span>
    </strong><a class="tw">twr</a> <a class="fb">fb</a> <a class="gp">G+</a> </span>
</p>

除了品牌/网站的标志外，这与网站中的动画完全相同。与链接中的代码相同。

请看一次，希望帮助这是你想要的。

谢谢普拉尚特

于 2013-05-04T12:34:42.847 回答