用css3实现各种图标效果

最新推荐文章于 2024-06-22 22:54:23 发布
luckymaoyy
最新推荐文章于 2024-06-22 22:54:23 发布
阅读量2.2k
点赞数
分类专栏： css3 文章标签： css3
css3 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        [class^="u-icon"]
        {
            display: inline-block;
            color: #fff;
            vertical-align: middle;
        }
        .u-icon-sel
        {
            position: relative;
            -webkit-box-sizing: border-box;
            width: 32%;
            height: 32px;
            line-height: 30px;
            margin-bottom: 4px;
            border: 1px solid #a4afc6;
            border-radius: 3px;
            color: #a4afc6;
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .u-icon-sel.on
        {
            overflow: hidden;
            border-color: #ff5d1d;
            color: #000;
        }
        .u-icon-sel.on:before
        {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 18px;
            height: 18px;
            background: url(http://webresource.c-ctrip.com/ResCorpMobile/R1/img/common-graphic37.png?20150423) no-repeat -23px -152px/150px 240px;
            content: '';
        }
        .u-icon-sel.more
        {
            color: #6daeee;
        }
        .u-icon-deleteToggle
        {
            width: 75px;
            height: 45px;
            line-height: 45px;
            text-align: center;
        }
        .u-icon-deleteToggle.Blue
        {
            background-color: #3e74b9;
        }
        .u-icon-deleteToggle.Orange
        {
            background-color: #ff5d1d;
        }
        /*白色垃圾桶、灰色垃圾桶图标*/
        .u-icon-trash,.u-icon-grayTrash
        {
            background: url(http://webresource.c-ctrip.com/ResCorpMobile/R1/img/common-graphic37.png?20150423) no-repeat 0 0/150px 240px;
        }
        .u-icon-trash
        {
            background-position: 0 -84px;
            width: 16px;
            height: 18px;
        }
        .u-icon-grayTrash {
            display: inline-block;
            width: 12px;
            height: 18px;
            margin-right: 8px;
            vertical-align: -2px;
            background-position: -3px -178px;
        }
        /*不用任何图标实现删除icon效果*/
        .u-icon-delete
        {
            position: absolute;
            bottom: 5px;
            right: 0;
            width: 40px;
            height: 40px;
        }
        /*给before伪类设置一个默认背景色 设置content*/
        .u-icon-delete:before
        {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background-color: #8e8e93;
            content: '';
        }
        /*给after伪类   -webkit-transform: rotate(-45deg);旋转   background-color: #e1e2e4;设置X的一边的颜色*/
        .u-icon-delete:after
        {
            position: absolute;
            top: 19px;
            left: 14px;
            width: 12px;
            height: 2px;
            -webkit-transform: rotate(-45deg);
            background-color: #e1e2e4;
            content: '';
        }
        /* -webkit-transform: rotate(45deg); 运用的特别巧秒*/
        .u-icon-delete i
        {
            position: absolute;
            top: 19px;
            left: 14px;
            width: 12px;
            height: 2px;
            background-color: #e1e2e4;
            -webkit-transform: rotate(45deg);
        }
        /*橙色背景中间一白色横杠的删除icon */
        .u-icon-del
        {
            position: relative;
            width: 24px;
            height: 24px;
            border: 1px solid #ff5d1d;
            -webkit-border-radius: 24px;
            border-radius: 24px;
            -webkit-transition: 300ms ease-in-out;
            transition: 300ms ease-in-out;
            background-color: #ff5d1d;
        }
        .u-icon-del.on,.on .u-icon-del
        {
            -webkit-transform: rotateZ(90deg);
        }
        /*这里的background-color: #fff;和 content: "\20";实现白色横杠*/
        .u-icon-del::after
        {
            position: absolute;
            top: 10px;
            left: 4px;
            width: 16px;
            height: 4px;
            background-color: #fff;
            content: "\20";
        }
        .u-icon-radioDelete
        {
            position: relative;
            width: 24px;
            height: 24px;
            border: 1px solid #8AADD8;
            -webkit-border-radius: 24px;
            border-radius: 24px;
            -webkit-transition: 300ms ease-in-out;
            transition: 300ms ease-in-out;
        }
        .u-icon-radioDelete::after
        {
            position: absolute;
            top: 11px;
            left: 4px;
            width: 16px;
            height: 2px;
            background-color: #8AADD8;
            color: #8AADD8;
            content: "\20";
        }
        .u-icon-radioDelete.on,.on .u-icon-radioDelete
        {
            -webkit-transform: rotateZ(90deg);
            -ms-transform: rotateZ(90deg);
        }
    </style>
</head>
<body>
<span class="u-icon-radioDelete"></span>
<span class="u-icon-deleteToggle Orange">
    <span class="u-icon-trash"></span>删除
</span>
<span class="u-icon-deleteToggle Blue">
    <span class="u-icon-grayTrash"></span>删除
</span>
<span class="u-icon-del"></span>
<span class="u-icon-del on"></span>
<span class='u-icon-sel more'>搜索更多</span>
<span class='u-icon-sel on'>搜索更多</span>
<span class='u-icon-delete'><i></i></span>

</body>
</html>