用 CSS3 画心形和搜索放大镜图标

来源 : 作者 : admin时间 : 2016-08-31 12:52:23 人气指数 :

导语用 CSS3 画心形1、先来个class="heart"的div<divclass="heart">< div>2、讲上面的div整成红色的正方形，然后转 45 度变成个菱形样 heart{position:relative;width:300px;height:300px;transform:rotate(45de

用 CSS3 画心形

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

<div 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 动画效果，实现心脏跳动的动画(缩小一倍后居中显示)：

css画圆心

CSS3 画搜索的放大镜图标

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

<span class="ex-search"></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);

}