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

导语 用 CSS3 画心形1、先来个class="heart"的div<divclass="heart">< div>2、讲上面的div整成红色的正方形,然后转 45 度变成个菱形样 heart{position:relative;width:300px;height:300px;transform:rotate(45de

用 CSS3 画心形

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


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

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


  1. .heart { 
  2.     positionrelative
  3.     width300px
  4.     height300px
  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.     backgroundred

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


  1. .heart:before, .heart:after { 
  2.     positionabsolute
  3.     displayblock
  4.     content''
  5.     width300px
  6.     height300px
  7.     border-radius: 100%
  8.     backgroundred

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


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

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

css画圆心

CSS3 画搜索的放大镜图标

1、新建个div,或者span什么的


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


  1. .ex-search { 
  2.     positionrelative

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


  1. .ex-search:before { 
  2.     content' '
  3.     positionabsolute
  4.     width30px
  5.     height30px
  6.     border1px solid #666
  7.     border-radius: 30px
  8.     box-shadow: inset 1px 1px 10px rgba(0,0,0,.3); 

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


  1. .ex-search::after { 
  2.     content' '
  3.     positionabsolute
  4.     width18px
  5.     height5px
  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); 

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


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

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

css搜索

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

http://www.aseoe.com/ true 用 CSS3 画心形和搜索放大镜图标 http://www.aseoe.com/show-11-871-1.html report 5241 用 CSS3 画心形1、先来个class="heart"的div<divclass="heart">< div>2、讲上面的div整成红色的正方形,然后转 45 度变成个菱形样 heart{position:relative;width:300px;height:300px;transform:rotate(45de
TAG:css3 心形 放大镜
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-11-871-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)