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

这纯粹是个无聊的更新,即使你画了也多大的卵用,但我还是画了,实在是无聊。

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

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);
}

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

.ex-search:before {
    top: 0;
    left: 0;
}
.ex-search:after {
    right: -42px;
    bottom: -36px;
}

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

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

相关阅读
评论 (已有11条)
  1. 2016年08月7日 20:09

    CSS好强大的感觉

    1. 2016年08月8日 08:23

      @秦大叔 css只是藤,没有大树依附啥都不是。

  2. 2016年08月8日 00:03

    看见CSS代码就懵逼,不如PHP和HTML好懂。

    1. 2016年08月8日 08:23

      @博比 为啥我觉得php,js什么的都比css难呢。。。

  3. 2016年08月8日 11:59

    CSS3大法好强大,还不会用这种。你的“发射”按钮,敢给加个样式吗?感觉有点丑

    1. 2016年08月8日 15:16

      @灰狼 你用的啥浏览器,在chrome下原生态的按钮挺有质感的。

      1. 2016年08月8日 15:17

        @LMS 数字家的极速,看到的就是你所说的有质感。原谅我不懂欣赏。
        话说左边栏的二维码下方三个按钮,你敢弄点文字上去吗?难受死

        1. 2016年08月8日 15:29

          @灰狼 哈哈哈,
          除了这种这种原生质感,目前能想到的就是一块黑色背景红色字的按钮了,似乎也是一坨,所以没付诸实践。
          左边那个我试着变一下看看。

  4. 用 CSS3 画心形和搜索放大镜图标 – nob太雄
  5. 2016年08月9日 10:06

    马克走~哈哈

    1. 2016年08月9日 11:16

      @大雄 喜欢就好!

发表评论

电子邮件地址不会被公开。 必填项已用*标注