用css画图标

最新推荐文章于 2025-04-28 15:32:58 发布
最新推荐文章于 2025-04-28 15:32:58 发布
阅读量327 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/devincob/article/details/106998231
版权

css3的属性 transform(转换) 用途很广泛，功能也很强大，为了熟悉它的各种转换方式(平移 translate，旋转 rotate，扭曲 skew，放缩 scale)，我做了一些平常常用的一些简单的图标。
这些图标很多是通过三角形来拼贴起来的，所以我们需要知道怎么样画三角形。
前人栽树：用css画图标原文链接

  1. 我们要将该 div 的 width 和 height 都设置为 0，三角形是通过设置 border 来实现；
  2. 通过我们需要画成的三角形的目标分析，这个三角形的朝向(只针对规则的朝向：上、右、下、左、上左、上右、下右、下左，不规则的朝向可以通过旋转来实现)；
  3. 如果是上、右、下、左四种中的一种，将朝向的对面的 border-color 设置为我们需要的颜色，该朝向的这一边不设置 border，其它两边的 border-color 设置为 transparent；
  4. 如果是上左、上右、下右、下左中的一种，以上右为例，设置相关的两边：上和右的 border-color 设置成我们想要的颜色，其它两边的 border-width 设置成 transparent。
  5. border-width 的值就是底边长和高。
    后记：防丢失
    看几个例子：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        div {
            margin-left:50px;
            margin-top:50px;
        }
        .top {
            width:0;
            height:0;
            border-bottom:2em solid #000;
            border-right:1.8em solid transparent;
            border-left:1.8em solid transparent;
        }
        .bottom {
            width:0;
            height:0;
            border-top:2em solid #000;
            border-right:1.8em solid transparent;
            border-left:1.8em solid transparent;
        }
        .left {
            width:0;
            height:0;
            border-left:2em solid #000;
            border-bottom:1.8em solid transparent;
            border-top:1.8em solid transparent;
        }
        .right {
            width:0;
            height:0;
            border-right:2em solid #000;
            border-bottom:1.8em solid transparent;
            border-top:1.8em solid transparent;
        }
        .bottomLeft {
            width:0;
            height:0;
            border-width:2em 1em;
            border-style:solid;
            border-color:transparent transparent #000 #000;
        }
        .bottomLeftRotate {
            width:0;
            height:0;
            border-width:2em 1em;
            border-style:solid;
            border-color:transparent transparent #000 #000;
            transform:rotate(60deg);
        }
        .up {
            box-sizing:border-box;
            position:relative;
            width:0;
            height:0;
            border-right:.9em solid transparent;
            border-bottom:.9em solid #000;
            border-left:.9em solid transparent;
        }
        .up:after {
            content:"";
            position:absolute;
            left:50%;
            top:.7em;
            margin-left:-.45em;
            /*宽度的一半，结合 left:50%;
            使用*/
            width:.9em;
            height:1.3em;
            background-color:#000;
        }
        .up_right {
            box-sizing:border-box;
            position:relative;
            width:1.3em;
            height:.9em;
            background-color:#000;
        }
        .up_right:after {
            content:"";
            position:absolute;
            top:50%;
            left:1.1em;
            margin-top:-.9em;
            width:0;
            height:0;
            border-top:.9em solid transparent;
            border-bottom:.9em solid transparent;
            border-left:.9em solid #000;
        }
        .up_bottom {
            box-sizing:border-box;
            position:relative;
            width:.9em;
            height:1.3em;
            background-color:#000;
        }
        .up_bottom:after {
            content:"";
            position:absolute;
            left:50%;
            top:1.1em;
            margin-left:-.9em;
            width:0;
            height:0;
            border-right:.9em solid transparent;
            border-top:.9em solid #000;
            border-left:.9em solid transparent;
        }
        .up_left {
            box-sizing:border-box;
            position:relative;
            width:0;
            height:0;
            border-top:.9em solid transparent;
            border-right:.9em solid #000;
            border-bottom:.9em solid transparent;
        }
        .up_left:after {
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            /*在绝对定位中，top:0;
            bottom:0;
            margin:auto;
            结合使用能竖直居中*/
            left:.7em;
            margin:auto;
            width:1.3em;
            height:.9em;
            background-color:#000;
        }
        .true {
            display:inline-block;
            width:20px;
            height:15px;
            background:black;
            line-height:0;
            font-size:0;
            vertical-align:middle;
            -webkit-transform:rotate(45deg);
        }
        .true:after {
            content:'/';
            display:block;
            width:50px;
            height:15px;
            background:black;
            -webkit-transform:rotate(-90deg) translateY(-5%) translateX(35%);
        }
        .true_one {
            position:relative;
            width:1.2em;
            height:.3em;
            background-color:#000;
            transform:rotate(60deg);
            transform-origin:right center;
            border-radius:.15em;
        }
        .true_one:after {
            content:"";
            position:absolute;
            top:.1em;
            left:-.85em;
            width:2em;
            height:.3em;
            background-color:#000;
            transform:rotate(60deg);
            transform-origin:right center;
            border-radius:.15em;
        }
        .false {
            position:relative;
            width:2em;
            height:.3em;
            background-color:#000;
            transform:rotate(45deg);
            border-radius:.15em;
        }
        .false:after {
            content:"";
            position:absolute;
            width:2em;
            height:.3em;
            background-color:#000;
            transform:rotate(90deg);
            border-radius:.15em;
        }
        .menu {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            background-color:#000;
            border-radius:.3em;
        }
        .menu:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:1.2em;
            height:.15em;
            background-color:#fff;
        }
        .menu:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:1.2em;
            height:.9em;
            border-width:.15em;
            border-style:solid none;
            border-color:#fff;
        }
        .menu2 {
            box-sizing:border-box;
            position:relative;
            width:.5em;
            height:.5em;
            background-color:#000;
            border-radius:50%;
            cursor:pointer;
        }
        .menu2:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            left:-.75em;
            width:.5em;
            height:.5em;
            background-color:#000;
            border-radius:50%;
        }
        .menu2:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            left:.75em;
            width:.5em;
            height:.5em;
            background-color:#000;
            border-radius:50%;
        }
        .download {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:.8em;
            border-width:.3em;
            border-style:none solid solid;
            border-color:#000;
        }
        .download:before {
            content:"";
            position:absolute;
            right:0;
            bottom:.7em;
            left:0;
            margin:auto;
            width:.3em;
            height:1em;
            background-color:#000;
        }
        .download:after {
            content:"";
            position:absolute;
            right:0;
            bottom:.2em;
            left:0;
            margin:auto;
            width:0;
            height:0;
            border-right:.6em solid transparent;
            border-top:.6em solid #000;
            border-left:.6em solid transparent;
        }
        .upload {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:.8em;
            border-width:.3em;
            border-style:none solid solid;
            border-color:#000;
        }
        .upload:before {
            content:"";
            position:absolute;
            right:0;
            bottom:.2em;
            left:0;
            margin:auto;
            width:.3em;
            height:1em;
            background-color:#000;
        }
        .upload:after {
            content:"";
            position:absolute;
            right:0;
            bottom:1.1em;
            left:0;
            margin:auto;
            width:0;
            height:0;
            border-right:.6em solid transparent;
            border-bottom:.6em solid #000;
            border-left:.6em solid transparent;
        }
        .video {
            box-sizing:border-box;
            position:relative;
            width:1.5em;
            height:1.2em;
            background-color:#000;
            border-radius:.3em;
        }
        .video:after {
            content:"";
            position:absolute;
            top:50%;
            left:1.4em;
            margin-top:-.7em;
            width:0;
            height:0;
            border-top:.7em solid transparent;
            border-right:.6em solid #000;
            border-bottom:.7em solid transparent;
        }
        .voice {
            box-sizing:border-box;
            position:relative;
            width:1.4em;
            height:1em;
            border-width:.2em;
            border-style:none none solid;
            border-color:#000;
            border-radius:50%;
        }
        .voice:before {
            content:"";
            position:absolute;
            right:0;
            left:0;
            bottom:.05em;
            margin:auto;
            width:.8em;
            height:1.3em;
            background-color:#000;
            border-radius:.4em;
        }
        .voice:after {
            content:"";
            position:absolute;
            right:0;
            bottom:-.6em;
            left:0;
            margin:auto;
            width:0;
            height:0;
            border-right:.6em solid transparent;
            border-bottom:.4em solid #000;
            border-left:.6em solid transparent;
        }
        .play {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .play:after {
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.3em;
            /*没有让其左右居中，因为看起来右边更空一些*/
            width:0;
            height:0;
            border-top:.6em solid transparent;
            border-bottom:.6em solid transparent;
            border-left:.9em solid #000;
        }
        .pause {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .pause:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.35em;
            width:.2em;
            height:.9em;
            background-color:#000;
        }
        .pause:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:.15em;
            width:.2em;
            height:.9em;
            background-color:#000;
        }
        .previous {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .previous:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.65em;
            width:0;
            height:0;
            border-top:.45em solid transparent;
            border-bottom:.45em solid transparent;
            border-right:.6em solid #000;
        }
        .previous:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.2em;
            width:0;
            height:0;
            border-top:.45em solid transparent;
            border-bottom:.45em solid transparent;
            border-right:.6em solid #000;
        }
        .next {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .next:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.4em;
            width:0;
            height:0;
            border-top:.45em solid transparent;
            border-bottom:.45em solid transparent;
            border-left:.6em solid #000;
        }
        .next:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:.05em;
            width:0;
            height:0;
            border-top:.45em solid transparent;
            border-bottom:.45em solid transparent;
            border-left:.6em solid #000;
        }
        .stop {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .stop:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:.9em;
            height:.9em;
            background-color:#000;
        }
        .position {
            position:relative;
            width:.6em;
            height:.6em;
            border:.4em solid #000;
            border-radius:50%;
        }
        .position:after {
            content:"";
            position:absolute;
            top:.55em;
            left:-.4em;
            width:0;
            height:0;
            border-top:1em solid #000;
            border-right:.7em solid transparent;
            border-left:.7em solid transparent;
            border-top-left-radius:50%;
            border-top-right-radius:50%;
        }
        .pc {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:1.4em;
            border-width:.2em .2em .3em;
            border-style:solid;
            border-color:#000;
            border-radius:.2em;
            background-color:#efefef;
        }
        .pc:before {
            content:"";
            position:absolute;
            top:1.2em;
            right:0;
            left:0;
            margin:auto;
            width:.6em;
            height:.4em;
            background-color:#000;
        }
        .pc:after {
            content:"";
            position:absolute;
            top:1.6em;
            right:0;
            left:0;
            margin:auto;
            width:1.6em;
            height:.2em;
            background-color:#000;
        }
        .phone {
            box-sizing:border-box;
            position:relative;
            width:1.4em;
            height:2em;
            background-color:#efefef;
            border-width:.3em .2em .5em;
            border-style:solid;
            border-color:#000;
            border-radius:.15em;
        }
        .phone:after {
            content:"";
            position:absolute;
            right:0;
            bottom:-.4em;
            left:0;
            margin:auto;
            width:.5em;
            height:.3em;
            background-color:#fff;
            border-radius:.3em;
        }
        .search {
            box-sizing:border-box;
            position:relative;
            width:1em;
            height:.3em;
            background-color:#000;
            border-top-right-radius:.15em;
            border-bottom-right-radius:.15em;
            transform:rotate(40deg);
            transform-origin:right center;
        }
        .search:before {
            content:"";
            position:absolute;
            left:-1.3em;
            bottom:-.6em;
            width:1em;
            height:1em;
            border:.3em solid #000;
            border-radius:50%;
        }
        .star {
            box-sizing:border-box;
            position:relative;
            width:0;
            height:0;
            border-top:.7em solid #000;
            border-right:1em solid transparent;
            border-left:1em solid transparent;
        }
        .star:before {
            content:"";
            position:absolute;
            top:-.7em;
            left:-1em;
            width:0;
            height:0;
            border-top:.7em solid #000;
            border-right:1em solid transparent;
            border-left:1em solid transparent;
            transform:rotate(72deg);
        }
        .star:after {
            content:"";
            position:absolute;
            top:-.7em;
            left:-1em;
            width:0;
            height:0;
            border-top:.7em solid #000;
            border-right:1em solid transparent;
            border-left:1em solid transparent;
            transform:rotate(-72deg);
        }
        .email {
            box-sizing:border-box;
            position:relative;
            width:0;
            height:0;
            border-width:.7em 1em;
            border-style:solid;
            border-color:transparent transparent #000 #000;
        }
        .email:before {
            content:"";
            position:absolute;
            top:-.7em;
            left:1em;
            transform:rotateY(180deg);
            transform-origin:left center;
            width:0;
            height:0;
            border-width:.7em 1em;
            border-style:solid;
            border-color:transparent transparent #000 #000;
        }
        .email:after {
            content:"";
            position:absolute;
            top:-.7em;
            left:50%;
            margin-left:-.9em;
            width:0;
            height:0;
            border-top:.6em solid #000;
            border-right:.9em solid transparent;
            border-left:.9em solid transparent;
        }
        .eye {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:1.2em;
            background-color:#000;
            border-radius:50%;
        }
        .eye:before {
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:.8em;
            height:.8em;
            background-color:#fff;
            border-radius:50%;
        }
        .eye:after {
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:.4em;
            height:.4em;
            background-color:#000;
            border-radius:50%;
        }
        .unlock {
            box-sizing:border-box;
            position:relative;
            width:1.6em;
            height:1.4em;
            background-color:#000;
            border-radius:.2em;
        }
        .unlock:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:-.4em;
            right:-.4em;
            width:1em;
            height:.6em;
            border-width:.2em;
            border-style:solid solid none;
            border-color:#000;
            border-radius:.5em;
        }
        .unlock:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            bottom:.2em;
            left:50%;
            margin-left:-.15em;
            width:.3em;
            height:.5em;
            border-top-left-radius:.25em;
            border-top-right-radius:.25em;
            background-color:#fff;
        }
        .cup {
            box-sizing:border-box;
            position:relative;
            width:1.3em;
            height:2em;
            border-width:.2em .2em 1.2em;
            border-style:solid;
            border-color:#000;
            background-color:#efefef;
            border-bottom-left-radius:.3em;
            border-bottom-right-radius:.3em;
        }
        .cup:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:.1em;
            left:-.7em;
            width:.7em;
            height:1.4em;
            border-width:.2em;
            border-style:solid;
            border-color:#000;
            border-top-left-radius:.3em;
            border-bottom-left-radius:.3em;
        }
        .heart {
            position:relative;
            width:1.4em;
            height:2em;
            background-color:#000;
            border-top-left-radius:1em;
            border-top-right-radius:1em;
            transform:rotate(-45deg);
            transform-origin:center bottom;
        }
        .heart:after {
            content:"";
            position:absolute;
            top:-.7em;
            left:-.7em;
            width:1.4em;
            height:2em;
            background-color:#000;
            border-top-left-radius:1em;
            border-top-right-radius:1em;
            transform:rotate(90deg);
            transform-origin:center bottom;
        }
        .home {
            box-sizing:border-box;
            position:relative;
            width:1.4em;
            height:1em;
            background-color:#000;
        }
        .home:before {
            content:"";
            position:absolute;
            top:-.7em;
            left:50%;
            margin-left:-1em;
            border-left:1em solid transparent;
            border-right:1em solid transparent;
            border-bottom:.8em solid #000;
        }
        .home:after {
            z-index:2;
            content:"";
            position:absolute;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:.3em;
            height:.5em;
            background-color:#fff;
        }
        .password {
            box-sizing:border-box;
            position:relative;
            width:1.8em;
            height:1.4em;
            background-color:#000;
            border-radius:.2em;
        }
        .password:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:-.6em;
            left:50%;
            margin-left:-.5em;
            width:1em;
            height:1em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .password:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            bottom:.2em;
            left:50%;
            margin-left:-.15em;
            width:.3em;
            height:.5em;
            border-top-left-radius:.25em;
            border-top-right-radius:.25em;
            background-color:#fff;
        }
        .user {
            box-sizing:border-box;
            position:relative;
            width:.9em;
            height:.9em;
            background-color:#000;
            border-radius:50%;
        }
        .user:after {
            content:"";
            position:absolute;
            top:1em;
            left:50%;
            margin-left:-.9em;
            width:1.8em;
            height:1em;
            background-color:#000;
            border-top-left-radius:.9em;
            border-top-right-radius:.9em;
        }

    </style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottomLeft"></div>
<div class="bottomLeftRotate"></div>
<div class="up"></div>
<div class="up_bottom"></div>
<div class="up_right"></div>
<div class="up_left"></div>
<div class="true"></div>
<div class="true_one"></div>
<div class="false"></div>
<div class="menu"></div>
<div class="menu2"></div>
<div class="download"></div>
<div class="upload"></div>
<div class="video"></div>
<div class="voice"></div>
<div class="play"></div>
<div class="pause"></div>
<div class="previous"></div>
<div class="next"></div>
<div class="stop"></div>
<div class="position"></div>
<div class="pc"></div>
<div class="phone"></div>
<div class="search"></div>
<div class="star"></div>
<div class="email"></div>
<div class="eye"></div>
<div class="unlock"></div>
<div class="cup"></div>
<div class="heart"></div>
<div class="home"></div>
<div class="password"></div>
<div class="user"></div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script></script>
</html>
使用CSS设置图标
CodeNexus的博客
09-23 740
本文将介绍几种常见的CSS技术，用于设置图标，并提供相应的源代码示例。您可以根据自己的需求选择其中一种或多种方法，并根据需要调整样式属性，以实现所需的效果。CSS伪元素是一种特殊的CSS选择器，允许您在元素的内容前面或后面插入额外的内容。您可以使用伪元素来设置图标，而无需在HTML中添加额外的标记。另一种常见的设置图标的方法是使用CSS的背景图像属性。接下来，您可以在页面中的任何元素上使用相应的CSS类来显示图标。属性指定了要插入的内容，可以使用Unicode字符编码或特定的字体图标类。
css3动画图标效果
10-31
在本主题“CSS3动画图标效果”中，我们将深入探讨如何利用CSS3来创建富有动态感的图标效果。 一、CSS3关键帧动画 CSS3的关键帧动画（@keyframes）是实现动态图标的基石。通过定义动画从开始到结束的不同状态，我们...
【CSS】用CSS绘制图标（图标大全）
热门推荐
码婆Doph
11-25 2万+
转载请务必注明出处，也不枉我这么辛苦打上来。谢谢啦！ 技艺不精，若有纰漏，还请不吝指出。 暂停按钮 <style> .box{ width: 50px; height: 50px; background-color: white; border: 1px solid blac
CSS 图标
最新发布
monian187的博客
04-28 728
css 图标
css图标
weixin_33735077的博客
01-19 189
一、介绍 采用这种字体，我们可以避免网站制作中采用好多图片，一方面解决了浏览器的兼容性问题。另一方面，这些字体都是矢量字体，我们只要在调整这些图标时，将他们的字体大小以及颜色，我们就可以解决很多不是图片的图标了。 二、使用原因 今天在用到jquery.mmenu.js过程中（手机上的单个按钮菜单，具体将在下一节讲到），也是从网上找到的一个简单的demo，很简单的，如下图...
css画出小图标
datangu3093的博客
06-10 244
根据设计稿，很多小图标可以使用css画出来。下面我来举几个项目中常见的例子！ 这部分的图标样式一共就分为2中，一种是三角形，一种是特殊形状！ 使用边框画三角形 从一个完整的矩形开始 border-width: 10px; border-color: #333 ; border-style: solid; ...
css绘制图标
weixin_30412013的博客
02-01 104
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht...
纯CSS3 Loading动画图标.rar_css loading 动画_nounva4_纯CSS3 Loading动画图标_蓝
09-15
总结来说，"纯CSS3 Loading动画图标"是一个方便开发者快速获取和使用的资源，可以帮助提升网站或应用的用户体验，同时展示了CSS3的强大功能。通过深入理解并灵活运用这些动画，你可以创建出更多富有创意和个性化的...
CSS3火警提示图标动画特效
07-24
对于火警图标，设计师可能使用了SVG矢量图形，因为SVG可以在任何分辨率下保持清晰，且支持CSS样式。通过transform属性，可以实现旋转、缩放、位移等效果，使图标在视觉上更加生动。 “火警图标”本身可能包含火焰、...
css-animation:加载器和动画图标的 CSS 动画
06-12
用 css 编写的动态图标和动画加载器。 演示 为什么它需要存在 我们不希望有 javascript 动画，因为 javascript 是单线程的，这会减慢一切。 如何使用它 将 css 文件复制到您的项目中，链接它并使用类添加特定的 ...
精致可爱的CSS动画图标效果代码案例：卡通鲸鱼喷水，让你的网页更有趣.rar
04-26
内容概要：本资源是一款基于CSS实现的动画图标效果代码案例，展示了一个可爱卡通鲸鱼的动画效果，包括鲸鱼的游动和喷水动画。该资源提供了完整的CSS代码和HTML代码，方便读者学习和使用。 适用人群：本资源适用于...
纯css3绘制各种图形图标样式代码
11-24
纯css3绘制各种图形图标样式代码
CSS 样式图标
06-05
多种CSS制作的图标，按钮，圆角的表现样式
整理css（三）css画小图标
farmerXU的博客
05-29 609
第一种： header.header3 .dropdown-menu:before{ content: ""; width: 0; height: 0; border-bottom: 10px solid #999; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; right: 10px; left: auto; top: -7px; }
CSS制作简单图标
weixin_30469895的博客
04-28 206
CSS制作图标包括知识点如border-width、border-style、border-color、border-radius、对元素的定位拼接、旋转等结合起来。 图标效果如下（拖动滑块可缩放图标）： 缩放字体比例后如图： test-css图标.css 文件对颜色做了处理（由于伪类:before/:after没办法设置其边框颜色.....）： .icon-ok-green...
有趣的css 画图标
blithe影子
02-23 487
今天看到分享的视频，css画图标，很有意思，分享一下。 首先我们要实现如图的一个三角形，怎么实现呢，怎么用css来实现： 思路就是：首先设置四个边框，元素宽度为零，截图如下： 然后把边框设置三遍设置成透明色，改变边框的宽度：代买如下 <!DOCTYPE html> <html> <head> <meta charset="ut...
聊聊纯 CSS 图标
LuckyWinty的博客
11-09 625
感谢印记中文的 QC-L[1] 对本文进行翻译，英文原文: English Version[2]。在 重新构想原子化 CSS中，我提到了 UnoCSS[4] 的一个预设，它提供了在纯 C...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值