您的位置首页百科知识

css如何制作搜索图标

css如何制作搜索图标

的有关信息介绍如下:

css如何制作搜索图标

网页布局需要使用到css样式,让我们一起来看一下如何使用css进行搜索图标的制作吧。

思路:搜索小图标 = 一个小圆 + 一条斜杠 组成。

打开html开发软件,新建一个html页面。如图:

在新建的 html代码页面 创建一个

标签,然后给这个
标签添加一个class类,案例中class类为:icon-search。如图

代码:

设置class类样式。搜索小图标是由一个小圆+一条斜线组成,所有需要设置class类样式创建一个小圆圈。

创建小圆圈样式代码:

保存html代码页面后,使用浏览器打开,查看小圆圈是否创建成功。成功效果如图:

对class类添加斜杠。使用 css伪类:after为小圆圈添加一条斜杠。如图:

添加斜杠样式css代码:

.icon-search:after{

content: "";

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

transform: rotate(45deg);

width:8px;

height: 2px;

position: absolute;

top:13px;

left:11px;

background-color: currentcolor;

}

保存html代码页面后,使用浏览器打开,即可看到搜索小图标。如图:

页面所有代码。可以直接复制所有代码到新建html页面,粘贴保存后使用浏览器打开即可看到页面效果。

所有代码:

css搜索图标