css 实现一个div的背景颜色从左到右慢慢出现 里面文字颜色也改
css 实现一个div的背景颜色从左到右慢慢出现 里面文字颜色也改变
.news-list{
width: 55%;
position: absolute;
top:0px;
height: 400px;
z-index: 10;
left:0px;
}
.news-list ul li{
float: left;
background:#fff;
width: 100%;
height: 110px;
box-sizing: border-box;
margin-top: 18px;
border-left:4px solid #e32b48;
cursor: pointer;
padding:10px 20px;
position: relative;
}
.news-list ul li h4 {
margin-bottom: 10px;
}
.news-list ul li h4 a{
color: #333333;
}
.news-list ul li p{
color: #333;
font-size: 14px;
}
.news-list ul li h5 a{
color: #283448;
font-weight: bold;
display: inline-block;
width: 100%;
text-align: right;
}
.news-list ul li:after{
content: '';
display: block;
width: 0;
height: 100%;
background: #ec340e;
position: absolute;
left: 0;
top: 0;
z-index: -1;
transition: .3s;
}
.news-list ul li:hover::after{
width: 100%;
z-index: 1;
clear: both;
}
.news-list ul li a:after {
color: #fff !important;
position: relative !important;
z-index: 100 !important;
position: absolute;
top:0;
left:0;
}
.news-list ul li:hover{
position: relative;
}
.news-list ul li:hover h4 a{
position: absolute;
z-index: 10;
display: inline-block;
width: 100%;
color: #fff !important;
}
.news-list ul li:hover p{
position: absolute;
z-index: 10;
margin-top: 20px;
box-sizing: border-box;
padding-right: 20px;
color: #fff !important;
}
.news-list ul li:hover h5 a{
position: absolute;
z-index: 10;
display: inline-block;
width: 100%;
color: #fff !important;
margin-top: 60px;
box-sizing: border-box;
padding-right: 40px;
}
css 实现一个div的背景颜色从左到右慢慢出现 里面文字颜色也改相关教程
html图片从左到右慢慢出来 css 实现一个div的背景颜色从左到右慢慢出现 里面文字颜色也改...
