2021-01-21 更新 30 阅读
说到CSS控制图标颜色,我们自然而然会想到icon fonts, 或者使用SVG sprites技术,或者使用混合模式来实现。然而,都是有不足的,SVG的兼容性以及混合模式的理解成本和环境限制等。
因此,转了一圈,会发现,有时候,还是图片来得最实在,且看下面demo实现的效果,虽然使用的是background-image实现的,但是hover态,selected态都和文字hover transition过渡,这是传统背景图片所没法实现的。
演示效果:https://mrju.cn/css/transition-img/
css代码部分:
.type {
max-width: 1000px; min-width: 600px;
margin: 60px auto;
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.type_li {
width: 25%;
color: #666;
float: left;
transition: color .25s;
}
.type_li:hover {
color: #000;
text-decoration: none;
}
.type_li.selected {
color: #00a5e0;
}
.icon_type {
display: inline-block;
height: 140px;
background-color: #c8c8c8;
transition: background-color .25s;
overflow: hidden;
}
.icon_type:after {
position: relative;
content: url(icons-verify-type.png);
}
.icon_type_2:after {
top: -140px;
}
.icon_type_3:after {
top: -280px;
}
.icon_type_4:after {
top: -420px;
}
a:hover .icon_type {
background-color: #666;
}
a.selected .icon_type {
background-color: #00a5e0;
}
html代码部分:
<div id="type" class="type">
<a href="javascript:" class="type_li">
<i class="icon_type icon_type_1"></i>
<h6>企业</h6>
</a>
<a href="javascript:" class="type_li">
<i class="icon_type icon_type_2"></i>
<h6>网店商家</h6>
</a>
<a href="javascript:" class="type_li">
<i class="icon_type icon_type_3"></i>
<h6>媒体</h6>
</a>
<a href="javascript:" class="type_li">
<i class="icon_type icon_type_4"></i>
<h6>其他组织</h6>
</a>
</div>
js代码部分:
if (document.querySelector) {
var elTypeAs = document.querySelectorAll('#type a');
for(var startA=0; startA<elTypeAs.length; startA+=1) {
elTypeAs[startA].onclick = function() {
var eleSelected = document.querySelector('#type .selected');
if (eleSelected) eleSelected.className = 'type_li';
this.className = 'type_li selected';
return false;
};
}
}
评论已关闭