页面中的小效果

自己平时做网页，很多效果都是一样的，于是，我想着把这些归类一下。。。（嗯~这些代码都是自己写的，所以有错误可以提出）

1.弹出层

既然弹出少不了遮罩层<div class="overmask"></div>

给它美化一下position: fixed;left: 0; top: 0;background: rgba(0,0,0,.6); width: 100%;height: 100%;z-index: 100;

再给他一个兄弟节点，就是我们需要弹出的这个块。<div class="tipbox"></div>,样式自己看着给~重要的是它身上必须带着这三条条属性，opacity:0;transform:scale(0,0);transition:0.5s; 这会影响弹出的一个效果

效果:点击弹出框改变块的样式opacity:1;transform:scale(1,1);

 

如图,会有一个动画效果的显示隐藏

 2鼠标hover

结构:

css：

.user{
position: relative;
background-color: #182c47;
color: #fff;
width: 100px;
text-align: center;
height: 35px;
line-height: 35px;
cursor: pointer;
}
.menubox{
position: absolute;
left: 0;
top:50px;
background:#575d55;
filter: alpha(opacify=0);
opacity: 0;
width: 100px;
z-index: 10000;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.user:hover .menubox{
-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);filter:alpha(opacity=100);opacity:1
}
.menubox ul{position: relative;
}
.menubox ul:after{
content: "";
border-style: dashed;
border-color: transparent;
border-width: 8px;
position: absolute;
left: 50%;
margin-left: -5px;
top: -16px;
border-bottom-style: solid;
border-bottom-color: #575d55;
}

 效果