<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.icon {
display: inline-block;
width: 20px; height: 20px;
overflow: hidden;// 超出框外的内容不可见
}
.icon-del {
background: url(img/icon-sina.png) no-repeat center;
}
.icon > .icon {
position: relative;
filter: drop-shadow(20px 0px rgb(255, 128, 0)); /*产生一个水平投影*/
left: -20px; /*偏移20px让投影显示出来*/
border-right: 20px solid transparent;
/*在Chrome浏览器下，如果一个元素的主体部分
，无论以何种方式，只要在页面中不可见，
其drop-shadow是不可见的；实体部分哪
怕有1px可见，则drop-shadow完全可见。
所以这里给了一个颜色为透明的右边框
*/
}
</style>
</head>
<body>
<p><strong>原始图标</strong></p>
<i class="icon icon-del"></i>
<p><strong>可以变色的图标</strong></p>
<i class="icon"><i class="icon icon-del"></i></i>
</body>
</html>怎样实现小图标的变色效果
猜你喜欢
转载自blog.csdn.net/chaoxiao1231/article/details/81144632
今日推荐
周排行