html在搜索按钮中加放大镜,用 CSS3 画心形和搜索放大镜图标

这纯粹是个无聊的更新，即使你画了也多大的卵用，但我还是画了，实在是无聊。

用 CSS3 画心形

1、先来个class="heart"的div

2、讲上面的 div 整成红色的正方形，然后转 45 度变成个菱形样

.heart {

position: relative;

width: 300px;

height: 300px;

transform: rotate(45deg);

-ms-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform: rotate(45deg);

background: red;

}

3、通过:after和:before伪元素，画两个一样大小的圆

.heart:before, .heart:after {

position: absolute;

display: block;

content: '';

width: 300px;

height: 300px;

border-radius: 100%;

background: red;

}

4、把上面的两个圆移到div适当的位置，心形就出来了

.heart:before {

left: -50%;

top: 0;

}

.heart:after {

right: 0;

top: -50%;

}

5、最后效果，可以给它加个 css3 动画效果，实现心脏跳动的动画(缩小一倍后居中显示)：

CSS3 画搜索的放大镜图标

1、新建个div，或者span什么的

.ex-search {

position: relative;

}

2、用:before伪元素画一个圆并给一些内阴影，内阴影根据需要调整

.ex-search:before {

content: ' ';

position: absolute;

width: 30px;

height: 30px;

border: 1px solid #666;

border-radius: 30px;

box-shadow: inset 1px 1px 10px rgba(0,0,0,.3);

}

3、用:after伪元素画一个放大镜手柄状图，要是够无聊还可以 css3 渐变一下，并旋转 45 度，旋转度数可以按自己需要设定

.ex-search::after {

content: ' ';

position: absolute;

width: 18px;

height: 5px;

background: #666;

border-radius: 5px 0 0 5px;

-webkit-transform: rotate(225deg);

-moz-transform: rotate(225deg);

-ms-transform: rotate(225deg);

-o-transform: rotate(225deg);

transform: rotate(225deg);

}

4、把上面两部画的图形移动到一起组合成一个放大镜的图标，实际位置根据实际情况调整

.ex-search:before {

top: 0;

left: 0;

}

.ex-search:after {

right: -42px;

bottom: -36px;

}

5、最后效果，可以结合其他 hover 什么的效果使用

在字体图标面前，这些都是浮云，就是无聊玩玩。

作者： LMS

天行贱，君子自强自息。查看LMS的所有文章

html在搜索按钮中加放大镜,用 CSS3 画心形和搜索放大镜图标相关推荐

用 CSS3 画心形和搜索放大镜图标
用 CSS3 画心形 1.先来个class="heart"的div <div class="heart"></div> 2.讲上面的 d ...
计算机搜索文件时找不到搜索按钮,电脑搜不到文件怎么办？文件搜索软件用起来！...
有些时候电脑文件保存了,但是忘记保存路径,怎么也找不到怎么办?电脑搜不到文件怎么解决,电脑文件搜索功能不能用,怎么找到文件?Everyting文件搜索工具这个时候就可以起到帮助了. 例如下图,这样的问 ...
html怎么在字体中加波浪线,CSS3实现文字波浪线效果
前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了linear-gradient属性,合角度.颜色.位置于一体,配合background-size,backgr ...
html搜索框如何加下拉框,js实现带搜索功能的下拉框
本文实例为大家分享了js实现带搜索功能的下拉框,供大家参考,具体内容如下 1.介绍在实现下拉框的时候,如果用select+option可以在满足pc端的需求,但如果需应用到手机端,由于select的 ...
html网页中加五角星,使用css3在网页中实现五角星样式（原理解析）
本篇文章给大家带来的内容是关于使用css3在网页中实现五角星样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 我们平时在web网页中看到的各种图形包括正方形,长方形,三角形,圆形等 ...
地图搜索 | EXCEL中搜索地址、提取坐标至表格
前言地图软件已成为我们生活中必不可少的工具软件,无论是日常出行,还是公务办公,都会经常使用地图软件. 传统的地图软件是独立的软件或网站,借助软件我们可以进行地址查询,然而想要获取搜索结果的地址或坐标 ...
JS实现搜索按钮的点击事件
JS实现搜索按钮的点击事件开发工具与关键技术:DW JS 作者:易金亮撰写时间:2019.02.02 在各个网页或者软件中,往往离不开搜索框以及搜索按钮,下面我们来用JS实现简单的搜索按钮点击事件 ...
table中加表单元素怎么验证_045、DOM编程实例和表单
1.DOM编程实例1 JavaScript this 关键词指的是它所属的对象. 它拥有不同的值,具体取决于它的使用位置: 在方法中,this 指的是所有者对象. 单独的情况下,this 指的是全局对 ...
在搜索引擎的搜索结果中屏蔽CSDN
在搜索引擎的搜索结果中屏蔽CSDN 如何屏蔽每次用百度搜索问题时,总会给你一个匹配度很高的网站,但是点进去和你搜索的内容毫不相关,网站链接一般是https://www.csdn.net/gather ...
dwcs6怎么添加搜索框_一文教会你微信小程序搜索怎么用、怎么优化
生活中我们常常会用到微信小程序,但很多人不知道该如何搜索.找到小程序:而有些已经做了自己的小程序的商家,也不懂怎么提升自己的微信小程序搜索效果.所以下面就跟大家科普下这两个问题. 1.怎么搜索微信小程 ...

html在搜索按钮中加放大镜,用 CSS3 画心形和搜索放大镜图标

html在搜索按钮中加放大镜,用 CSS3 画心形和搜索放大镜图标相关推荐

最新文章

热门文章