常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)

文字超出部分用省略号显示:

white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出部分不显示 */
text-overflow: ellipsis; /* 超出部分显示为... */

鼠标经过图片放大

.team-img img{
width:188px;
height: 200px;
border-radius: 50%;
transition: all 1.2s;
-moz-transition: all 1.2s;
-webkit-transition: all 1.2s;
-o-transition: all 1.2s;
}
.team-img img:hover{
transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}

鼠标经过,div出现阴影

.team-item{
background: #fff;
border-radius: 7px;
transition: all .3s linear;
}
.team-item:hover{ 
transition: .3s all;
box-shadow: 0px 6px 17px #888888;
}

猜你喜欢

转载自www.cnblogs.com/vientiane/p/9938582.html