关于JavaScript特效

Question

新人自学，类似幕课网的侧边栏，当鼠标放上去，二维码由小到大弹出的效果怎么实现啊~还有掘金下面那个打开应用的特效类似，弹出一个框，由小到大？

Answer 1

http://codepen.io/hj624608494...

Answer 2

下面是慕课网的实现代码

.elevator .elevator-weixin-box {
    position: absolute;
    width: 172px;
    height: 212px;
    bottom: -10px;
    right: 52px;
    -webkit-transition: opacity 0.25s, transform .3s;
    -moz-transition: opacity 0.25s, transform .3s;
    transition: opacity 0.25s, transform .3s;
    opacity: 0;
    filter: alpha(opacity=0);
    max-width: 0;
    -webkit-transform: scale(0.01);
    -ms-transform: scale(0.01);
    transform: scale(0.01);
    -webkit-transform-origin: 100% 95%;
    -ms-transform-origin: 100% 95%;
    transform-origin: 100% 95%;
    background: url(/static/img/common/elevator.png) no-repeat 0 0;
}

.elevator .elevator-weixin:hover .elevator-weixin-box {
    display: block;
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
    max-width: none;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

关键是transform和transition属性

详细的属性说明可以去w3cschool查看

Answer 3

简单来说:hover 的时候display:block。
如果要动画可以使用css3的transition过度,