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 {