1.圆角： border-radius
渐变：background-image: linear-gradient
#d1{
width:100px;
height: 100px;
background: rgba(78,34,89,1.00);
border: 1px solid rgba(211,105,107,1.00);
border-radius: 50px;
background-image: linear-gradient(red,blue);
}
2.移动：ransform: translate
过渡：transition:
#d1:hover{
transform: translate(200px,200px);
transition: transform 5s;
}
3.旋转：transform:rotate
#d2{
width:100px;
height: 100px;
background: rgba(175,204,178,1.00);
}
#d2:hover{
transform:rotate(360deg);
transition: transform 5s;
}
4.放大：transform:scale
#d3{
width: 74px;
height: 82px;
background: rgba(199,191,191,1.00);
overflow: hidden;
}
#d3 img:hover{
transform:scale(1.5,1.5);
transition: transform 5s;
}
5.沿x轴翻转：transform: rotateX
#d4{
width: 200px;
height: 100px;
background: rgba(136,217,127,1.00);
}
#d4:hover{
transform: rotateX(360deg);
transition: transform 5s;
}