CSS基础——样式效果
作者:互联网
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;
}
标签:1.00,rgba,效果,样式,transition,100px,transform,background,CSS 来源: https://www.cnblogs.com/weirongqi/p/15185246.html