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

　

放大镜图标

用 CSS3 画心形

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

1. <p class="heart"></p> 

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

1. .heart { 
2.     position: relative; 
3.     width: 300px; 
4.     height: 300px; 
5.     transform: rotate(45deg); 
6.     -ms-transform: rotate(45deg); 
7.     -moz-transform: rotate(45deg); 
8.     -webkit-transform: rotate(45deg); 
9.     -o-transform: rotate(45deg); 
10.     background: red; 
11. } 

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

1. .heart:before, .heart:after { 
2.     position: absolute; 
3.     display: block; 
4.     content: ''; 
5.     width: 300px; 
6.     height: 300px; 
7.     border-radius: 100%; 
8.     background: red; 
9. } 

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

1. .heart:before { 
2.     left: -50%; 
3.     top: 0; 
4. } 
5. .heart:after { 
6.     right: 0; 
7.     top: -50%; 
8. } 

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

CSS3 画搜索的放大镜图标  前端开发

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

1. <span class="ex-search"></span> 

1. .ex-search { 
2.     position: relative; 
3. } 

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

1. .ex-search:before { 
2.     content: ' '; 
3.     position: absolute; 
4.     width: 30px; 
5.     height: 30px; 
6.     border: 1px solid #666; 
7.     border-radius: 30px; 
8.     box-shadow: inset 1px 1px 10px rgba(0,0,0,.3); 
9. } 

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

1. .ex-search::after { 
2.     content: ' '; 
3.     position: absolute; 
4.     width: 18px; 
5.     height: 5px; 
6.     background: #666; 
7.     border-radius: 5px 0 0 5px; 
8.     -webkit-transform: rotate(225deg); 
9.     -moz-transform: rotate(225deg); 
10.     -ms-transform: rotate(225deg); 
11.     -o-transform: rotate(225deg); 
12.     transform: rotate(225deg); 
13. } 

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

1. .ex-search:before { 
2.     top: 0; 
3.     left: 0; 
4. } 
5. .ex-search:after { 
6.     right: -42px; 
7.     bottom: -36px; 
8. } 

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

原文地址：http://www.aseoe.com/show-11-871-1.html

文章最后发布于: 2016-08-31 18:42:27

相关阅读

怎样去掉桌面图标的小箭头 快速去掉桌面图标的小箭头

去掉桌面图标的小箭头的步骤：一、下载魔方大师，然后解压，打开魔方大师。二、在魔方大师下面，有个美化大师，点击进入美化大师。三、在美

书签制作css

1、使用渐变，效果如图 <p class="bg"><span>我是标签</span></p> <style> .bg{ width: 115px; line-height: 5

怎么在桌面上创建IE图标?

从win7,WIN8,WIN10系统后桌面默认就是没有IE图标，这对我们这些习惯在桌面找IE的图标童鞋们是很别扭的，是很习惯的，其实系统是装有IE

CSS中background-color属性（一）

  background-color背景颜色属性。css2.1中，颜色的表示方法有哪些？一共有三种：单词、rgb表示法、十六进制表示法1. 用英语单词来表

几个免费的图标网站

http://www.iconfinder.com/  http://www.iconpng.com/ http://www.iconlet.com/ http://findicons.com/ http://www.iconseeker