用css3实现各种图标效果

来源：互联网发布：手机游戏录像软件编辑：程序博客网时间：2024/06/07 22:55
<!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>
0 0