找回密码
当前位置：前端开发者 > CSS > 正文

前端开发纯CSS矢量图标

2018-12-11 分类：CSS 阅读(714) 评论(0)
前端开发视频百度云
前端开发视频计划ppt模板
前端项目开发视频

部分常用图标的css代码，如果需要放大或者缩小，按照相同比例改变：font-size : 15px;width: 25px;height:25px;，加载快捷，使用方便。更多图标开发中。
html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <meta content=”email=no” name=”format-detection” />
        <meta content=”telephone=no” name=”format-detection” />
        <meta name=”msapplication-tap-highlight” content=”no” />
        <meta content=”yes” name=”apple-mobile-web-app-capable” />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
        <meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
        <meta
            content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”
            name=”viewport”
        />
        <link
            rel=”shortcut icon”
            href=”http://www.tyfo.com/market/content/home_image/favicon.ico”
            type=”image/x-icon”
        />
        <title>精灵图库页面</title>
        <style>
            /*加号图标*/
            .plus {
                /*外边框修饰*/
                border: 1px solid;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                box-sizing: border-box;
                display: inline-block;
                position: relative;
                font-size: 15px;
                color: blue;
            }
            .plus:before,
            .plus:after {
                content: ”;
                pointer-events: none;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                box-shadow: inset 0 0 0 1em;
            }
            .plus:before {
                width: 1em;
                height: 2px;
            }
            .plus:after {
                height: 1em;
                width: 2px;
            }
            /*减号图标*/
            .minus {
                /*外边框修饰*/
                border: 1px solid;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                box-sizing: border-box;
                display: inline-block;
                position: relative;
                font-size: 15px;
                color: blue;
            }
            .minus:after {
                content: ”;
                pointer-events: none;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                box-shadow: inset 0 0 0 1em;
                width: 1em;
                height: 2px;
            }
            /*错误符号*/
            .error {
                border: 1px solid;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                box-sizing: border-box;
                display: inline-block;
                position: relative;
                font-size: 15px;
                color: blue;
                transform: rotate(45deg);
            }
            .error:after,
            .error:before {
                content: ”;
                pointer-events: none;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                box-shadow: inset 0 0 0 1em;
            }
            .error:after {
                width: 1em;
                height: 2px;
            }
            .error:before {
                height: 1em;
                width: 2px;
            }
            /*正确符号*/
            .true {
                border: 1px solid;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                overflow: hidden;
                box-sizing: border-box;
                display: inline-block;
                position: relative;
                font-size: 20px;
                color: blue;
                transform: rotate(90deg);
            }
            .true:before,
            .true:after {
                content: ”;
                pointer-events: none;
                position: absolute;
                box-shadow: inset 0 0 0 1em;
                transform: rotate(45deg);
                top: 20%;
            }
            .true:before {
                border: 0.3em solid;
                left: 15%;
            }
            .true:after {
                border: 0.3em solid #fff;
                left: 5%;
            }
            /*大于符号*/
            .gt {
                border: 1px solid;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                overflow: hidden;
                box-sizing: border-box;
                display: inline-block;
                position: relative;
                font-size: 20px;
                color: blue;
            }
            .gt:before,
            .gt:after {
                content: ”;
                pointer-events: none;
                position: absolute;
                box-shadow: inset 0 0 0 1em;
                transform: rotate(45deg);
                top: 20%;
            }
            .gt:before {
                border: 0.3em solid;
                left: 15%;
            }
            .gt:after {
                border: 0.3em solid #fff;
                left: 5%;
            }
            /*小于符号*/
            .lt {
                border: 1px solid;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                overflow: hidden;
                box-sizing: border-box;
                display: inline-block;
                position: relative;
                font-size: 20px;
                color: blue;
            }
            .lt:before,
            .lt:after {
                content: ”;
                pointer-events: none;
                position: absolute;
                box-shadow: inset 0 0 0 1em;
                transform: rotate(45deg);
                top: 20%;
            }
            .lt:before {
                border: 0.3em solid;
                left: 35%;
            }
            .lt:after {
                border: 0.3em solid #fff;
                left: 45%;
            }
            /*向上的三角*/
            .up-triangle {
                border: 1px solid;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                overflow: hidden;
                box-sizing: border-box;
                display: inline-block;
                position: relative;
                font-size: 20px;
                color: blue;
                transform: rotate(-90deg);
            }
            .up-triangle:before,
            .up-triangle:after {
                content: ”;
                pointer-events: none;
                position: absolute;
                box-shadow: inset 0 0 0 1em;
                transform: rotate(45deg);
                top: 20%;
            }
            .up-triangle:before {
                border: 0.3em solid;
                left: 15%;
            }
            .up-triangle:after {
                border: 0.3em solid #fff;
                left: 5%;
            }
            /*向下的三角*/
            .lower-triangle {
                border: 1px solid;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                overflow: hidden;
                box-sizing: border-box;
                display: inline-block;
                position: relative;
                font-size: 20px;
                color: blue;
                transform: rotate(90deg);
            }
            .lower-triangle:before,
            .lower-triangle:after {
                content: ”;
                pointer-events: none;
                position: absolute;
                box-shadow: inset 0 0 0 1em;
                transform: rotate(45deg);
                top: 20%;
            }
            .lower-triangle:before {
                border: 0.3em solid;
                left: 15%;
            }
            .lower-triangle:after {
                border: 0.3em solid #fff;
                left: 5%;
            }
            /*山水图*/
            .icon-img {
                display: inline-block;
                position: relative;
                box-sizing: border-box;
                width: 25px;
                height: 25px;
                border: 1px solid;
                border-radius: 3px;
                color: blue;
                font-size: 20px;
                overflow: hidden;
            }
            .icon-img:before,
            .icon-img:after {
                content: ”;
                pointer-events: none;
                position: absolute;
            }
            .icon-img:before {
                width: 0.15em;
                height: 0.15em;
                top: 10%;
                right: 10%;
                box-shadow: inset 0 0 0 1em;
                border-radius: 50%;
            }
            .icon-img:after {
                width: 1em;
                height: 1em;
                left: 0;
                bottom: -0.7em;
                box-shadow: inset 0 0 0 2em, 0.3em -0.2em 0 0;
                transform: rotate(45deg);
            }
            /*时钟图标*/
            .clock {
                display: inline-block;
                position: relative;
                box-sizing: border-box;
                width: 25px;
                height: 25px;
                border: 1px solid;
                border-radius: 3px;
                color: blue;
                font-size: 20px;
                overflow: hidden;
            }
            .clock:after,
            .clock:before {
                display: block;
                content: ”;
                border: 1px solid;
                position: absolute;
                transform: translate(-50%, -50%);
            }
            .clock:before {
                width: 0.8em;
                height: 0.8em;
                border-radius: 50%;
                top: 50%;
                left: 50%;
            }
            .clock:after {
                width: 0.2em;
                height: 0.2em;
                border-top: none;
                border-right: none;
                top: 45%;
                left: 60%;
            }
            /*定位图标*/
            .position {
                display: inline-block;
                position: relative;
                box-sizing: border-box;
                width: 25px;
                height: 25px;
                border: 1px solid;
                border-bottom: none;
                border-radius: 50%;
                color: blue;
                font-size: 20px;
            }
            .position:after,
            .position:before {
                display: block;
                content: ”;
                border: 1px solid;
                position: absolute;
                transform: translate(-50%, -50%) rotate(-45deg);
            }
            .position:before {
                width: 0.3em;
                height: 0.3em;
                border-radius: 50%;
                top: 50%;
                left: 50%;
            }
            .position:after {
                width: 0.6em;
                height: 0.6em;
                border-top: none;
                border-right: none;
                top: 88%;
                left: 49%;
            }
        </style>
    </head>
    <body>
        <div class=”box” style=”max-width: 800px;padding: 10px;margin: 0 auto;”>
            <h2>加号图标</h2>
            <p>
                <span class=”plus”></span>&nbsp;
                <span class=”plus” style=”background: blue;color: #fff;”></span
                >&nbsp; <span class=”plus” style=”border: none”></span>&nbsp;
                <span class=”plus” style=”border-radius: 4px”></span>
            </p>
            <h2>减号图标</h2>
            <p>
                <span class=”minus”></span>&nbsp;
                <span class=”minus” style=”background: blue;color: #fff;”></span
                >&nbsp; <span class=”minus” style=”border: none”></span>&nbsp;
                <span class=”minus” style=”border-radius: 4px”></span>
            </p>
            <h2>错误图标</h2>
            <p>
                <span class=”error”></span>&nbsp;
                <span class=”error” style=”background: blue;color: #fff;”></span
                >&nbsp; <span class=”error” style=”border: none”></span>&nbsp;
                <span
                    style=”border-radius: 4px;display: inline-block;width: 25px;height: 25px;border: 1px solid blue”
                    ><span class=”error” style=”border: none”></span
                ></span>
            </p>
            <h2>正确图标</h2>
            <p>
                <span class=”true”></span>&nbsp;
                <span class=”true” style=”border: none”></span>&nbsp;
                <span class=”true” style=”border-radius: 4px”></span>
            </p>
            <h2>小于图标</h2>
            <p>
                <span class=”lt”></span>&nbsp;
                <span class=”lt” style=”border: none”></span>&nbsp;
                <span class=”lt” style=”border-radius: 4px”></span>
            </p>
            <h2>大于图标</h2>
            <p>
                <span class=”gt”></span>&nbsp;
                <span class=”gt” style=”border: none”></span>&nbsp;
                <span class=”gt” style=”border-radius: 4px”></span>
            </p>
            <h2>可展开图标</h2>
            <p>
                <span class=”lower-triangle”></span>&nbsp;
                <span class=”lower-triangle” style=”border: none”></span>&nbsp;
                <span class=”lower-triangle” style=”border-radius: 4px”></span>
            </p>
            <h2>已展开图标</h2>
            <p>
                <span class=”up-triangle”></span>&nbsp;
                <span class=”up-triangle” style=”border: none”></span>&nbsp;
                <span class=”up-triangle” style=”border-radius: 4px”></span>
            </p>
            <h2>风景图标</h2>
            <p>
                <span class=”icon-img”></span>&nbsp;
                <span
                    class=”icon-img”
                    style=”background: blue;color: #fff;”
                ></span
                >&nbsp; <span class=”icon-img” style=”border: none”></span>
            </p>
            <h2>时间图标</h2>
            <p>
                <span class=”clock”></span>&nbsp;
                <span class=”clock” style=”border: none”></span>&nbsp;
                <span class=”clock” style=”background: blue;color: #fff”></span>
            </p>
            <h2>地理定位图标</h2>
            <p><span class=”position”></span></p>
        </div>
    </body>
</html>
电脑前端开发视频
前端开发项目的视频
小码哥前端开发视频
赞(0)
前端开发者 » 前端开发纯CSS矢量图标
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论