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

Posted 2021-04-09 UI设计自学平台

用 CSS3 画心形

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

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

2、讲上面的 div 整成红色的正方形，然后转 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、把上面的两个圆移到div适当的位置，心形就出来了

1. .heart:before { 

2.     left: -50%; 

3.     top: 0; 

4. } 

5. .heart:after { 

6.     right: 0; 

7.     top: -50%; 

8. } 

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

CSS3 画搜索的放大镜图标

1、新建个div，或者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伪元素画一个放大镜手柄状图，要是够无聊还可以  渐变一下，并旋转 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 什么的效果使用

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

觉得本文对你有帮助？请分享给更多人

关注「网页设计自学平台」快速提升技能

福利！免费领取腾讯高级讲师网页设计教程

来源：爱思资源网

每天学一点·小白快速进阶大神

设计｜DW教程｜AE教程｜前端资讯

微信ID：WEB_wysj

▲长按二维码关注

▼戳阅读原文入群免费领取全套视频