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

Post Time:2016-08-09 09:58:50 Views:4.23 K

之前学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 什么的效果使用

在字体图标面前,这些都是浮云,就是无聊玩玩。摘自:不亦乐乎

Comments: 13
Time: 2016-08-09 23:37:23
话说,写css是不是要需要什么工具辅助呢?
Time: 2016-08-09 23:57:07
@尹先生 右键浏览器审核元素。
Time: 2016-08-16 15:32:55
@nob太雄 审查元素、、、嘿嘿
Time: 2016-08-10 10:23:39
我就说这文章怎么那么熟悉。。。原来是转的
Time: 2016-08-10 15:05:58
放大镜的把儿好像跑偏了~哈哈
Time: 2016-08-11 18:51:01
有何用处?
Time: 2016-08-11 18:59:13
@以歌。先生 css3练练手罢了。
Time: 2016-08-15 00:15:33
是不是看到我很惊讶。
Time: 2016-08-15 10:55:55
@小俊 不惊讶啊,我当你挂了~
Time: 2016-08-16 15:33:18
这些代码都挺值得收藏啊、、、
Time: 2016-08-20 23:11:00
弱弱问一下是两个半圆加一个三角型吗
Time: 2016-08-20 23:45:38
@不点儿 没有半圆,只有圆,两个圆加一个三角形。
Time: 2016-08-24 20:00:09
这个红色号亮眼~

「人生在世,留句话给我吧」

撰写评论