怎样实现小图标的变色效果

最新推荐文章于 2022-01-05 16:22:19 发布

chaoxiao1231

最新推荐文章于 2022-01-05 16:22:19 发布

阅读量4.2k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/chaoxiao1231/article/details/81144632

版权

CSS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!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>