纯css实现的放大图标(2)

简介: 纯css实现的放大图标(2)

html

76f497dc98c9784017e16f3f94418bed_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

css

.magnify.icon {
  color: #000;
  position: absolute;
  margin-top: 2px;
  margin-left: 3px;
  width: 12px;
  height: 12px;
  border: solid 1px currentColor;
  border-radius: 100%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.magnify.icon:before {
  content: '';
  position: absolute;
  top: 12px;
  left: 5px;
  height: 6px;
  width: 1px;
  background-color: currentColor;
}
.magnify.icon i {
  position: absolute;
  left: 4px;
  top: 4px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.magnify.icon i:before {
  content: '';
  position: absolute;
  width: 6px;
  height: 1px;
  background-color: currentColor;
}
.magnify.icon i:after {
  content: '';
  position: absolute;
  width: 6px;
  height: 1px;
  background-color: currentColor;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

目录
相关文章
|
前端开发
css鼠标放上图片变大
css鼠标放上图片变大
css鼠标放上图片变大
|
3月前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
121 0
|
7月前
|
自然语言处理 前端开发 API
解析CSS文件
【5月更文挑战第23天】解析CSS文件。在Python中,可以使用一些第三方库来帮助解析CSS文件,例如`cssutils`。
77 2
|
4月前
|
前端开发
css书写位置
css书写位置
35 2
|
6月前
|
前端开发 JavaScript 开发者
CSS进阶-CSS变量
【6月更文挑战第13天】本文介绍了CSS变量(Custom Properties)的基本概念、应用场景和常见问题。通过声明与使用示例,展示了如何定义和引用变量。文章讨论了兼容性、作用域、错误引用及JavaScript交互等易错点,并提供了相应的解决方案。此外,还分享了实践技巧,如模块化色彩系统、响应式设计和动画制作。通过学习,开发者能更好地利用CSS变量提高样式灵活性和维护性。
81 3
|
6月前
|
前端开发 JavaScript
js遍历添加栏目类添加css,再点击其它删除css
该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。
35 0
|
前端开发 JavaScript 容器
css如何讲多出文字变成.....?
css如何讲多出文字变成.....?
|
前端开发
CSS文件是什么
css文件简单来说就是一种后缀名为".css"的文本文件,它的作用简单来说就是把css代码和html代码分离开,同时一个css文件可以把很多修饰作用包装在一起,方便很多html文件使用,减少代码的重复量
CSS文件是什么
|
XML 前端开发 数据格式
CSS入门基础(样式,css文件,选择器)
CSS入门基础(样式,css文件,选择器)
CSS入门基础(样式,css文件,选择器)
下一篇
DataWorks