css图标制作教程制作云图标

下面我会详细讲解如何制作云图标的完整攻略，包含以下几个步骤：

1. 准备工作

在制作过程中，我们需要准备两个东西，一是云的SVG图标文件，二是实现动画效果的CSS代码：

（1）SVG图标文件：

首先需要使用Adobe Illustrator或其他矢量图形编辑软件，设计并导出一个云的SVG图标文件，示例如下：

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M15,14.9900492 C14.9959154,14.9900492 14.9918375,14.9900492 14.9877337,14.9900492 C14.8508654,14.9727408 14.711076,14.9727408 14.5742076,14.9900492 C13.7982665,15.0867027 13.2488195,15.8012732 13.345473,16.5772143 C13.369827,16.7807263 13.4246644,16.9777135 13.5101712,17.1583104 C13.6105757,17.3827277 13.7072292,17.6166243 13.800132,17.8588192 C14.144312,18.7127203 14.8426386,19.3875829 15.7048203,19.7314096 C15.8980246,19.8066854 16.0950117,19.8615228 16.2985237,19.8858769 C17.0794902,19.9825305 17.7832957,19.511502 17.980002,18.7305354 C18.1767083,17.9495688 17.7056798,17.2457633 16.9247132,17.049057 C16.7606382,17.0139373 16.5941366,16.9966614 16.4271183,16.997229 C15.6461518,16.9967854 15,16.3502339 15,15.5559107 C15,15.3134247 15.0391278,15.0732705 15.115787,14.8401015 C15.2283897,14.4424205 15.7869004,14.2387361 16.1845814,14.3513388 C16.3478621,14.3988793 16.5026072,14.4760784 16.6412664,14.5797397 C17.3900687,15.1045473 18.3319787,15.1170588 19.0788798,14.6102903 C19.8260424,14.103467 20.1550371,13.2401499 19.9181806,12.4912873 C19.681324,11.7424247 18.9270558,11.209033 18.0783793,11.209033 C17.767595,11.209033 17.4557956,11.2546369 17.1494458,11.3313409 C16.3520559,11.4915097 15.7907448,12.1539535 15.9549086,12.9460325 C15.9916789,13.1027969 16.063211,13.2477633 16.162459,13.3742585 C16.7199356,14.2161092 17.6589818,14.707178 18.5383853,14.6071922 C19.4177616,14.507178 20.1139456,13.8175428 20.2157219,12.9371665 C20.3174982,12.0567903 19.7268929,11.2773753 18.8464894,11.175599 C18.5074878,11.1442398 18.1695404,11.2096796 17.8686211,11.3679113 C16.8340731,11.936804 16.1539004,12.9992076 16.058569,14.0671406 C16.0302969,14.4275865 15.7928521,14.7195737 15.4486721,14.8423827 C15.3472426,14.8737045 15.2458132,14.8949851 15.1444315,14.9062064 C15.094764,14.9113171 15.0449428,14.9109022 15,14.9900492 Z M20,8 C18.3431458,8 17,6.65685425 17,5 C17,3.34314575 18.3431458,2 20,2 C21.6568542,2 23,3.34314575 23,5 C23,6.65685425 21.6568542,8 20,8 Z M9,8 C7.34314575,8 6,6.65685425 6,5 C6,3.34314575 7.34314575,2 9,2 C10.6568542,2 12,3.34314575 12,5 C12,6.65685425 10.6568542,8 9,8 Z M5,17 L5,21 C5,22.6568542 6.34314575,24 8,24 L16,24 C17.6568542,24 19,22.6568542 19,21 L19,17 L5,17 Z" id="云"></path>
</svg>

（2）CSS代码

CSS中，我们使用@keyframes和animation属性实现云的浮动效果，代码示例如下：

.cloud {
    position: relative;
    -webkit-animation: moveclouds 15s linear infinite;
    -moz-animation: moveclouds 15s linear infinite;
    -o-animation: moveclouds 15s linear infinite;
}
@keyframes moveclouds {
    0% {
        margin-left: 100%;
    }
    100% {
        margin-left: -100%;
    }
}
@-moz-keyframes moveclouds {
    0% {
        margin-left: 100%;
    }
    100% {
        margin-left: -100%;
    }
}
@-webkit-keyframes moveclouds {
    0% {
        margin-left: 100%;
    }
    100% {
        margin-left: -100%;
    }
}

2. 加载SVG图标

了解完准备工作，我们进入下一步，首先需要在HTML代码中加载SVG图标文件，示例代码如下：

<div class="cloud">
    <svg width="24" height="24" viewBox="0 0 24 24">
         <use xlink:href="#cloud"></use>
    </svg>
</div>

其中包含了一个带有图标的div元素和一个svg元素，svg元素负责渲染图标。其中<use xlink:href=”#cloud”>语句指定了要使用id="云"的字符串图标来渲染SVG图标。

3. 添加CSS动画

在HTML中加载了SVG图标以后，再使用CSS为图标添加动效。如上文中的cloud类所示，我们为其添加了waterfall样式，这使得云朵浮动起来，示例代码如下：

.waterfall{
  animation:move 15s linear infinite;
  -moz-animation:move 15s linear infinite;
  -webkit-animation:move 15s linear infinite;
  opacity:1;
  filter:alpha(opacity=100);
}
@-moz-keyframes move {
  from {margin-left:100%;}
  to {margin-left:-100%;}
}
@-webkit-keyframes move {
  from {margin-left:100%;}
  to {margin-left:-100%;}
}
@keyframes move {
  from {margin-left:100%;}
  to {margin-left:-100%;}
}

这样，云图标就成功地制作出来了。

可以参考下面这个示例代码：

<html>
  <head>
    <title>make css icon</title>
    <style>
        .cloud {
            position: relative;
            -webkit-animation: moveclouds 15s linear infinite;
            -moz-animation: moveclouds 15s linear infinite;
            -o-animation: moveclouds 15s linear infinite;
        }
        @keyframes moveclouds {
            0% {
                margin-left: 100%;
            }
            100% {
                margin-left: -100%;
            }
        }
        @-moz-keyframes moveclouds {
            0% {
                margin-left: 100%;
            }
            100% {
                margin-left: -100%;
            }
        }
        @-webkit-keyframes moveclouds {
            0% {
                margin-left: 100%;
            }
            100% {
                margin-left: -100%;
            }
        }
    </style>
  </head>
  <body>
    <div class="cloud">
      <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="M15,14.9900492 C14.9959154,14.9900492 14.9918375,14.9900492 14.9877337,14.9900492 C14.8508654,14.9727408 14.711076,14.9727408 14.5742076,14.9900492 C13.7982665,15.0867027 13.2488195,15.8012732 13.345473,16.5772143 C13.369827,16.7807263 13.4246644,16.9777135 13.5101712,17.1583104 C13.6105757,17.3827277 13.7072292,17.6166243 13.800132,17.8588192 C14.144312,18.7127203 14.8426386,19.3875829 15.7048203,19.7314096 C15.8980246,19.8066854 16.0950117,19.8615228 16.2985237,19.8858769 C17.0794902,19.9825305 17.7832957,19.511502 17.980002,18.7305354 C18.1767083,17.9495688 17.7056798,17.2457633 16.9247132,17.049057 C16.7606382,17.0139373 16.5941366,16.9966614 16.4271183,16.997229 C15.6461518,16.9967854 15,16.3502339 15,15.5559107 C15,15.3134247 15.0391278,15.0732705 15.115787,14.8401015 C15.2283897,14.4424205 15.7869004,14.2387361 16.1845814,14.3513388 C16.3478621,14.3988793 16.5026072,14.4760784 16.6412664,14.5797397 C17.3900687,15.1045473 18.3319787,15.1170588 19.0788798,14.6102903 C19.8260424,14.103467 20.1550371,13.2401499 19.9181806,12.4912873 C19.681324,11.7424247 18.9270558,11.209033 18.0783793,11.209033 C17.767595,11.209033 17.4557956,11.2546369 17.1494458,11.3313409 C16.3520559,11.4915097 15.7907448,12.1539535 15.9549086,12.9460325 C15.9916789,13.1027969 16.063211,13.2477633 16.162459,13.3742585 C16.7199356,14.2161092 17.6589818,14.707178 18.5383853,14.6071922 C19.4177616,14.507178 20.1139456,13.8175428 20.2157219,12.9371665 C20.3174982,12.0567903 19.7268929,11.2773753 18.8464894,11.175599 C18.5074878,11.1442398 18.1695404,11.2096796 17.8686211,11.3679113 C16.8340731,11.936804 16.1539004,12.9992076 16.058569,14.0671406 C16.0302969,14.4275865 15.7928521,14.7195737 15.4486721,14.8423827 C15.3472426,14.8737045 15.2458132,14.8949851 15.1444315,14.9062064 C15.094764,14.9113171 15.0449428,14.9109022 15,14.9900492 Z M20,8 C18.3431458,8 17,6.65685425 17,5 C17,3.34314575 18.3431458,2 20,2 C21.6568542,2 23,3.34314575 23,5 C23,6.65685425 21.6568542,8 20,8 Z M9,8 C7.34314575,8 6,6.65685425 6,5 C6,3.34314575 7.34314575,2 9,2 C10.6568542,2 12,3.34314575 12,5 C12,6.65685425 10.6568542,8 9,8 Z M5,17 L5,21 C5,22.6568542 6.34314575,24 8,24 L16,24 C17.6568542,24 19,22.6568542 19,21 L19,17 L5,17 Z" id="云"></path>
      </svg>
    </div>
  </body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css图标制作教程制作云图标 - Python技术站