纯css实现的搜索图标(1)

简介: 纯css实现的搜索图标(1)

html:

<div class="search icon"></div>
css:
.search.icon {
  color: #000;
  position: absolute;
  margin-top: 2px;
  margin-left: 3px;
  width: 12px;
  height: 12px;
  border: solid 1px #999;
  border-radius: 100%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.search.icon:before {
  content: '';
  position: absolute;
  top: 12px;
  left: 5px;
  height: 6px;
  width: 1px;
  background-color: #999;
}

目录
相关文章
|
前端开发
如何用css显示一个图片中多个小图标
如何用css显示一个图片中多个小图标
104 0
|
1天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
14 2
|
22天前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
23 5
|
2月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
51 0
|
4月前
|
前端开发 JavaScript
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
本文分享了如何使用Vue和CSS实现一个汉堡图标在点击时过渡为叉号图标的动画效果,并提供了详细的实现代码和效果演示。
77 0
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
|
5月前
|
前端开发
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
155 5
|
5月前
|
前端开发
你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
79 2
|
5月前
|
前端开发
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
120 2
|
5月前
|
前端开发
css图标合并——ClipPath Sprites技术
css图标合并——ClipPath Sprites技术
48 1
|
5月前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
2346 1