网页制作（图片放大镜效果）
发布网友
发布时间：2022-04-20 17:31
共1个回答
热心网友
时间：2023-12-26 20:10
制作思路：
1.放大图标 = 1小圆 + 小圆个含有一个'+'号 + 一条斜杠 + ；
2.缩小图标 = 1小圆 + 小圆个含有一个'-'号 + 一条斜杠；
打开html软件开发工具，新建一个html代码页面，然后在这个html代码页面中创建一个div标签设置一个class类为 ：magnifier，然后在这个div标签中创建一个 i 标签。如图： 创建代码：div class="magnifier"i/i/div
设置一个小圆,使用css样式对magnifier类设置一个小圆的样式。在title标签下面创建一个style标签用于创建一个小圆，设置宽、高、边框以及圆属性。如图： 代码： style .magnifier{ width: 20px;height: 20px; border-radius: 100%; border: 2px solid currentcolor; margin: 30px auto; position: relative; } /style
设置斜杠样式，使用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); }
保存html代码文件，使用浏览器打开看一下页面是否显示为一个搜索按钮的小图标。如图：
创建缩小图标，在搜索图标里面添加一条垂直居中的小直线。使用css样式对i标签设置样式属性，创建一条小直线。如图： css样式代码： .magnifier i{ width: 10px;height: 2px; background-color: currentcolor; display: inline-block; position: absolute; top: 47%; margin-left: 5px; }
重新保存html代码页面，使用浏览器打开即可看到缩小图标效果。如图：
设置放大小图标，放大小图标 = 缩小小图标上的小圆圈里面多加一个竖线。在这里还是使用到了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); }
保存html代码页面后使用浏览器打开即可看到放大小图标按钮。如图：
页面所有代码。可以直接复制所有代码到新建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 divi/i/div /body /html
