1.清除浮动
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}
2.溢出文字隐藏
.overflow {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
3.鼠标经过插入一个伪元素
.div {
width:100px;
height:100px;
position:relative;
}
.div:hover::before {
content:"";
width:100%;
height:100%;
border:10px solid rgba(255,255,255,.3);
display:block;
position:absolute;
top:0;
left:0;
box-sizing:border-box;
}
4.过渡动画
div {
width:300px;
height:100px;
transition: all 0.6s;
}
div:hover {
width:600px;
height:300px;
}
5.盒子居中对齐
div {
width:200px;
height:200px;
background-color:pink;
position:absplute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
6.按中心点旋转
div {
width:200px;
height:200px;
background-color:pink;
transition:all 0.6s;
transform-origin:20px 30px;
}
div:hover{
transform:rotate(360deg);
}
7.动画
div {
width:200px;
height:200px;
background-color:pink;
animation: go 2s ease 0s 2 alternate;
}
@keyframes go{
0%{
transform:translate3d(0,0,0);
}
25%{
transform:translate3d(800px,0,0);
}
50%{
transform:translate3d(800px,400px,0);
}
75%{
transform:translate3d(0,400px,0);
}
100%{
transform:translate3d(0,0,0);
}
}