利用纯粹的CSS3替代小图标---向右箭头

1、向右的箭头> .

　看到很多网站里面向右的箭头都是图片代替的，但是为了网站的性能，我们一般的原则是能够避免使用图片的尽量不用图片

　　比如看下携程个人中心首页面，向右的箭头

　　其实现思路是这样的：定义一个正方形盒子，盒子边框定义1px的上边框和右边框，然后对盒子旋转45度即可。

代码如下：

<i class="arrow"></i>

.arrow{display: inline-block;width: 7px;height: 7px;border: solid #999;border-width: 1px 1px 0 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);
}

嘘...

我们能不能直接使用符号“ > “这个呢。

来来来，看淘宝网

审查元素之后发现它是这样实现的。

<i class="tb-icon service-arrow">➤</i>

.tb-icon{font-family: iconfont!important;font-size: 14px;font-style: normal;display: inline-block;text-decoration: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

看到没，淘宝都这样做，我们何不借鉴下呢。

不过它在添加字符的时候额外修饰了一番。使用字体抗锯齿属性:-webkit-font-smoothing

对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。

font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。

但是，我们可以用以下两种定义进行抗锯齿渲染

-webkit-font-smoothing: antialiased; /*chrome、safari*/-moz-osx-font-smoothing: grayscale;/*firefox*/

（1）Webkit在自己的引擎中支持了这一效果。

　　-webkit-font-smoothing

　　它有三个属性值：

　　　　none ------ 对低像素的文本比较好

　　　　subpixel-antialiased------默认值

　　　　antialiased ------抗锯齿很好

　　　　例子：

body{-webkit-font-smoothing: antialiased;
}

　　　　这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰。加上之后就顿时感觉页面小清晰了。

（2）Gecko也推出了自己的抗锯齿效果的非标定义。

　　　　-moz-osx-font-smoothing: inherit | grayscale;

　　　　这个属性也是更清晰的作用。

　　　　例子：

.icon {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

（3）Ionic框架在样式中多加了一条font-smoothing: antialiased;

　　　　这是坐等font-smoothing标准化，有备无患么。

当然了还有一种方法了，使用Art-Reactor | 字体图标集这里面有很多很多图标方便我们使用，使用方法也比较简单，详细看看这个就知道了

http://chinakids.github.io/Art-Reactor/ 当然这个教程也不错 http://www.zcool.com.cn/article/ZMTc3NDg4.html

小应用：回到网站头部小图标

<div class="arr"><i class="arrow"></i>
</div>

.arr{width:70px;height:70px;line-height:100px;background:rgba(153,153,153,0.8);border-radius:50%;text-align:center;
}
.arr .arrow{display: inline-block;width:26px;height:26px;border: solid #fff;border-width: 4px 4px 0 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);
}

效果图为

转载于:https://www.cnblogs.com/zuobaiquan01/p/5647324.html

利用纯粹的CSS3替代小图标---向右箭头相关推荐

css3实现小图标向下引导小箭头动态效果
css3实现小图标向下引导小箭头动态效果网上转的 ,记录下来,方便下次用到 <!DOCTYPE html> <html><head><meta charse ...
html表单内加入小图标,精美的HTML5/CSS3表单带小图标
今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...
使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
基于CSS3飘带状3D菜单菜单带小图标
这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状 ...
CSS3实现三角小图标
CSS3的transform可以实现页面元素的扭转.变形等功能. 实现如下图所示的三角形小图标只需要transform定义的一行代码即可,无需再使用图片. 代码如下: <!DOCTYPE htm ...
Webdings字体、Wingdings字体对照表、用CSS3绘制的各种小图标
一.Webdings是一个TrueType的dingbat字体,于1997年发表,搭载在其后的Microsoft Windows视窗系统内,大多的字形都没有Unicode的相对字. 使用很简单 1.网 ...
css3 小图标提示特效
最近的计划,就是每天来几个特效,当然这里有限制,在什么候选区只能放一个,还每天有限制发布的,哎, 啊终于写完了,看到一个挺好玩的东西,想到能不能用网页的特效做出来,试试呗!不过,一想肯东有很多的相 ...
css3 向上淡入小图标翻转 360度旋转
代码 <!DOCTYPE HTML> <html> <style type="text/css">div {border: 1px solid ...
CSS-0816盒模型标准盒模型怪异盒模型及其应用背景属性补充小图标使用图标网站可变化单位meta元信息浏览器内核(渲染机制)响应式页面媒体类型媒体特性opacity和背景色设置透明的区别
title: "CSS 0816" date: 2022-08-16T11:18:25+08:00 文章目录 title: "CSS 0816" date: 2 ...
在网页中画Icon小图标
在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧, ...

利用纯粹的CSS3替代小图标---向右箭头

利用纯粹的CSS3替代小图标---向右箭头相关推荐

最新文章

热门文章