css炫酷标题,css炫酷特效

鼠标移动上去 展示文字

代码结构：

css:

.tags_list_designer {

position: relative;

width: 100%;

height: 141px;

background-color: #f8f8f8;

}

.auto {

width: 1200px;

margin: 0 auto;

}

.tags_list_designer .tags_list {

position: absolute;

display: -webkit-box;

display: -ms-flexbox;

display: -moz-flexbox;

display: flex;

bottom: 24px;

left: 50%;

margin-left: -600px;

z-index: 29;

}

.tags_list_designer .tags_list .item {

position: absolute;

bottom: 0;

width: 224px;

max-height: 92px;

background-color: #fff;

border-top-left-radius: 4px;

border-top-right-radius: 4px;

overflow: hidden;

cursor: pointer;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.tags_list_designer .tags_list .item:hover {

max-height: 240px;

}

鼠标移动上 内容向内收缩：

html结构：

css:

.index_sjs_box .index_sjs_info_con {

width: 472px;

height: 515px;

margin: 90px auto 0;

border: 1px solid #fff;

}

_index.less:

.index_sjs_box .pr {

position: relative;

}

.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img {

width: 356px;

height: 449px;

left: -56px;

top: -61px;

overflow: hidden;

}

.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img a {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, .4);

opacity: 0;

overflow: hidden;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.index_sjs_box .index_sjs_info_con:hover a {

opacity: 1;

z-index: 9;

}

.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img a .overlay-label {

margin: 207px auto 0;

width: 106px;

height: 51px;

line-height: 51px;

color: #fff;

font-size: 20px;

font-weight: 400;

text-align: center;

position: relative;

overflow: hidden;

opacity: 0;

}

.index_sjs_box .index_sjs_info_con:hover a .overlay-label .line-up-box1, .index_sjs_box .index_sjs_info_con:hover a .overlay-label .line-bot-box1 {

left: 36px;

width: 25%;

}

.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img a .overlay-label .line-up-box1 {

overflow: hidden;

width: 51%;

position: absolute;

top: 0;

left: 0;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img a .overlay-label .line-up-box2 {

overflow: hidden;

width: 50%;

position: absolute;

top: 0;

right: 0;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img a .overlay-label .line-bot-box1 {

overflow: hidden;

width: 51%;

position: absolute;

bottom: 0;

left: 0;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img a .overlay-label .line-bot-box2 {

overflow: hidden;

width: 50%;

position: absolute;

bottom: 0;

right: 0;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.index_sjs_box .index_sjs_info_con:hover a .overlay-label .line-up-box2, .index_sjs_box .index_sjs_info_con:hover a .overlay-label .line-bot-box2 {

right: 36px;

width: 25%;

}

.index_sjs_box .index_sjs_info_con:hover a .overlay-label .line-up-box2, .index_sjs_box .index_sjs_info_con:hover a .overlay-label .line-bot-box2 {

right: 36px;

width: 25%;

}

鼠标移动上去，图片放大：

.mall_box .center_right .center .hd .left_box img {

-webkit-transform: scale(1);

transform: scale(1);

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.mall_box .center_right .center .hd .left_box .l_img:hover img {

-webkit-transform: scale(1.1);

transform: scale(1.1);

-webkit-transition: all 0.5s;

transition: all 0.5s;

}