css3动画：弹出式菜单

css3动画：弹出式菜单

今天主要来讲讲transition和transform结合做的动画，会举一些现在（2017年）常见的动画例子。

注：本人也接触css3不久，如果写的有纰漏请指出，不喜勿喷。

弹出式菜单

效果：

要做这个效果主要用到的是translate()，思路就是把整个菜单放到右下角，并且设置rigth为负值，当hover的时候，translate()的x值设为负值，菜单项就会往左平移，鼠标移出时，也会收回去。

代码如下：

<div class="side-menu">
    <div class="item" id="item1">item1</div>
    <div class="item" id="item2">item2</div>
    <div class="item" id="item3">item3</div>
    <div class="item" id="item4">item4</div>
</div>

.side-menu{
    position: fixed;
    bottom: 50px;
    right: -100px;
}
.item{
    height: 30px;
    line-height: 30px;
    width: 150px;
    transition: 0.5s;
    color: #fff;
    font-size: 18px;
}
.item:hover{
    transform: translate(-100px);
}
#item1{
    background: green;
}
#item2{
    background: red;
}
#item3{
    background: blue;
}
#item4{
    background: grey;
}

我们可以随自己的喜好试着增加一些样式的变化，这里我随便做一个demo：

主要把初始化的透明度设为0.5，hover的高度、行高、字体大小和透明度改变：

.item{
        opacity: 0.5;
    }
.item:hover{
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    opacity: 1;
}

弹出式菜单说到这里，我们以后分享更多css3动画的应用。