css制作放大缩小图标;css制作放大镜
1、打开html软件开发工具，新建一个html代码页面，然后在这个html代码页面中创建一个<div>标签设置一个class类为 ：magnifier，然后在这个<div>标签中创建一个 <i> 标签。如图：
创建代码：<div class="magnifier"><i></i></div>
2、设置一个小圆,使用css样式对magnifier类设置一个小圆的样式。在<title>标签下面创建一个<style>标签用于创建一个小圆，设置宽、高、边框以及圆属性。如图：
代码：
<style>
.magnifier{
width: 20px;height: 20px;
border-radius: 100%;
border: 2px solid currentcolor;
margin: 30px auto;
position: relative;
}
</style>
3、设置斜杠样式，使用css中的伪类after给magnifier类添加一个条斜线。如图：
css样式代码：
.magnifier::after{
content: "";
width: 13px;
height: 2px;
background-color: currentcolor;
position: absolute;
top: 80%;
left: 100%;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
4、保存html代码文件，使用浏览器打开看一下页面是否显示为一个搜索按钮的小图标。如图：
5、创建缩小图标，在搜索图标里面添加一条垂直居中的小直线。使用css样式对<i>标签设置样式属性，创建一条小直线。如图：
css样式代码：
.magnifier i{
width: 10px;height: 2px;
background-color: currentcolor;
display: inline-block;
position: absolute;
top: 47%;
margin-left: 5px;
}
6、重新保存html代码页面，使用浏览器打开即可看到缩小图标效果。如图：
7、设置放大小图标，放大小图标 = 缩小小图标上的小圆圈里面多加一个竖线。在这里还是使用到了css伪类after设置一条竖线。如图：
css样式代码：
.magnifier i::after{
content: "";
width: 10px;height: 2px;
display: inline-block;
background-color: currentcolor;
position: absolute;
top: 0px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
8、保存html代码页面后使用浏览器打开即可看到放大小图标按钮。如图：
9、页面所有代码。可以直接复制所有代码到新建html页面，粘贴后即可看到页面效果。
所以代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
.magnifier{
width: 20px;height: 20px;
border-radius: 100%;
border: 2px solid currentcolor;
margin: 30px auto;
position: relative;
}
.magnifier::after{
content: "";
width: 13px;
height: 2px;
background-color: currentcolor;
position: absolute;
top: 80%;
left: 100%;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.magnifier i{
width: 10px;height: 2px;
background-color: currentcolor;
display: inline-block;
position: absolute;
top: 47%;
margin-left: 5px;
}
.magnifier i::after{
content: "";
width: 10px;height: 2px;
display: inline-block;
background-color: currentcolor;
position: absolute;
top: 0px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
</head>
<body>
<div><i></i></div>
</body>
</html>