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

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

用 CSS3 画心形和搜索放大镜图标相关推荐

小白学习adobe illustrator——掌握画心形的几种方法
学习过PS的按钮操作后,发现AI还是比较简单的,因为不会涉及到PS那么多的图层. 下面就通过画心形,来掌握一些菜单的使用,同时通过画心形,来学习画一个形状的思路,例如拆解.合并等. 这里一共用到了四种 ...
9款基于CSS3 Transitions实现的鼠标经过图标悬停特效
之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...
CSS画心形的三种方法，超级简单
CSS画心形的三种方法,超级简单一.一颗div一颗心用一个div画出一个心,核心的方法就是使用伪元素首先,我们在页面上先写出一个div 使用CSS,将这个div变为一个橘红色的正方形: 接着我们 ...
html5动态效果随鼠标动,html5+CSS3心形动画跟随鼠标光标运动特效
html5+CSS3心形动画跟随鼠标光标运动特效代码片段: this.update = function () { var lastPoint = { x: _this.x, y: _this.y ...
css画心形原理,CSS画心形的三种方法
下面,介绍三种CSS画心形的方法.实现过程都非常简单,保证你一看就会. 1.一颗div一颗心用一个div画出一个心,核心的方法就是使用伪元素. 首先,我们在页面上先写出一个div: 使用CSS,将这 ...
C# GDI+ 画心形跳动动画
先看看效果: 话不多说直接上代码 public Form1(){DoubleBuffered = true; //首先窗体记得设置双缓冲SetStyle(ControlStyles.ResizeRed ...
第四次画心形流水灯，并且选封装
第四次画心形流水灯,并且选封装一.再次检查自己画的PCB 致命问题 1.电源引入口和PCB的封装不对应 2. 原理图和封装不对应 3. 封装一定要标准命名!!!要不然怎么去根据封装选对应的元器件二 ...
C++ 实现命令行画心形代码，有多个爱心代码，简单可调数据和字符，可装X，也可用于浪漫的表白，可实现跳动、保存等功能
绘制一个简易爱心 #include <stdio.h> #include <Windows.h>int main() {for (float y = 1.5f; y > ...
python画心形代码大全_情人节锦囊：简单的python表白程序（动画效果）
今年这个特殊的情人节,如何优雅而又高大上地对自己的心爱女神表白? ? ? 猫老师给你送上锦囊,试试python表白的实现方式吧,是动画版的哦,保证可以如你所愿 ! ! ! 1.动态玫瑰花代码如下图: ...

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

用 CSS3 画心形

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

用 CSS3 画心形和搜索放大镜图标相关推荐

最新文章

热门文章

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

用 CSS3 画心形

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

用 CSS3 画心形和搜索放大镜图标相关推荐

最新文章

热门文章

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