前言&＃xff1a;这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方&＃xff0c;请大家指正&＃xff0c;我会持续更新&＃xff01;
iconfont字体图标
我们的需求中&＃xff0c;很多时候会看到一些小的图形&＃xff0c;或者叫图标&＃xff0c;比如天猫网站中&＃xff1a;
这些小图形我们可以用图片代替&＃xff0c;通常我们是把这些图形切图之后做成精灵图&＃xff08;又叫雪碧图&＃xff09;&＃xff1b;
精灵图的原理&＃xff1a;把很多小图片集合成一张大图片&＃xff0c;然后用设置背景图的位置来显示图片&＃xff1b;
精灵图的优点&＃xff1a;减少服务器的请求次数&＃xff0c;降低服务器压力&＃xff1b;
sprites是一款很好的精灵图制作工具&＃xff1b;
当然还有其他的方法可以制作这些小的图形&＃xff0c;比如上图中&＃xff0c;天猫使用的字体图标iconfont&＃xff1b;
字体图标&＃xff0c;顾名思义&＃xff0c;就是一种字体&＃xff0c;和字体一样&＃xff0c;是矢量的&＃xff0c;我们也叫矢量图标&＃xff0c;任意放大缩小&＃xff0c;都不会失真&＃xff1b;
网络中有很多字体图标库&＃xff0c;这里我介绍一下iconfont的使用&＃xff1a;
官网&＃xff1a;http://www.iconfont.cn/
我就不说怎么制作了&＃xff0c;我们直接使用吧&＃xff08;呵呵&＃xff0c;其实我画的图太丑&＃xff09;&＃xff1b;
原本准备写一下使用方法的&＃xff0c;但是iconfont好像又升级了&＃xff0c;加入了symbol写法&＃xff0c;支持多色图标了&＃xff08;这涉及到SVG的知识&＃xff09;&＃xff0c;官网的帮助文档的GIF图也很好的解释了怎么应用&＃xff0c;我就写一下我第一次用的时候遇到过的坑吧&＃xff1a;
- "下载代码"按钮&＃xff0c;希望你能直接找到。嗯&＃xff0c;我找了好一会&＃xff0c;默认让我去设置颜色和大小去了&＃xff0c;这个是去弄素材的&＃xff0c;前端只要代码就可以了,点击撤销&＃xff0c;然后...&＃xff1b;
不知道是我电脑问题&＃xff08;1366*768&＃xff09;还是怎么回事&＃xff1f;这个"下载代码"按钮被我的windows底部工具栏挡住了一半&＃xff0c;嗯&＃xff0c;这个...
- 当我们把字体图标下载下来之后&＃xff0c;它就是一个文件了&＃xff0c;我们是在css里定义字体类型的时候&＃xff0c;别忘了把路径设置正确&＃xff1b;
- 如果我们使用的是iconfont的在线项目&＃xff08;没有下载文件&＃xff09;&＃xff0c;当项目成员更新了图标&＃xff0c;如果我们也想用新的图标&＃xff0c;就也得更新"在线链接"&＃xff1b;
- 字体不支持多色&＃xff0c;如果我们使用下载文件的方式&＃xff0c;那就只能用字体颜色设置单色了。想使用多色图标&＃xff0c;就得用symbol引用在线链接的方式&＃xff1b;symbol引用的是js文件&＃xff0c;font-class引用的css文件&＃xff0c;两种方式的写法也是不一样的&＃xff1b;
CSS小图标
大师们用css制作出了各种纯css图形&＃xff0c;我这里就只列举几种我用的比较多的&＃xff1b;
三角形
请看这篇&＃xff0c; border三角形阴影和多重边框的整理转述 &＃xff1b;
菜单&＃xff08;三道杠&＃xff09;
用border上边框双线和下边框实线&＃xff0c;也可以反着来&＃xff1a;
代码如下&＃xff1a;
DOCTYPE html>
<html><head><meta charset&＃61;"UTF-8"><title>title><style type&＃61;"text/css">*{padding: 0;margin: 0;}.menu{margin: 100px;width: 55px;height: 10px;border-top: 30px double #f00;border-bottom: 10px solid #f00;/*用border上边框双线和下边框实线&＃xff0c;也可以反着来*/}style>head><body><div class&＃61;"menu">div>body>
html>
内凹角
大师的方法&＃xff0c;点击这里&＃xff0c;用css3属性径向渐变radial-gradient做:
背景图径向渐变可以设置&＃xff1a;圆心位置&＃xff0c;渐变的大小&＃xff0c;渐变的形状&＃xff0c;圆心处的颜色 宽度&＃xff0c; ... &＃xff0c;结尾处的颜色宽度;
代码如下&＃xff1a;
DOCTYPE html>
<html><head><meta charset&＃61;"UTF-8"><title>title><style type&＃61;"text/css">*{padding: 0;margin: 0;}a{text-decoration: none;cursor: pointer;}li{list-style: none;}/*清除浮动*/.clearfix:before, /*:before处理margin上下重叠*/.clearfix:after {content: ""; display: table;}.clearfix:after {clear: both;}.clearfix {zoom: 1;}.test{margin: 100px 0 0 100px ;}.list{margin-left: -20px;}.content{width: 320px;background: #7fd6f1;min-height: 200px;}.item .active{background: #7fd6f1;color: #333;}.item{float: left;margin-left: 30px;}.item a{display: block;background: #ce4be2;width: 80px;height: 35px;text-align: center;line-height: 35px;color: #fff;border-radius: 10px 10px 0 0;position: relative;}.item a:after{content: "";display: block;position: absolute;right: -9px;/*不知大家是否发现&＃xff0c;在边缘处其实是有1px的变化的&＃xff0c;弧度到最后不是很自然&＃xff0c;这里我们其实可以把位置往里1px*/bottom: 0;width: 10px;height: 10px;background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);/*背景图径向渐变可以设置&＃xff1a;圆心位置&＃xff0c;渐变的大小&＃xff0c;渐变的形状&＃xff0c;圆心处的颜色 宽度&＃xff0c; ... &＃xff0c;结尾处的颜色宽度*//*圆心位置默认为center&＃xff0c;我们这里设置圆心为元素左顶点和右顶点*//*渐变的大小默认为farthest-corder ,我们这里设置的farthest-side*//*渐变的形状默认为ellipse&＃xff08;椭圆&＃xff09;&＃xff0c;我们这里得设置成circle&＃xff08;圆形&＃xff09;&＃xff0c;但是宽高一样的椭圆不就是圆形么&＃xff0c;so...*//*颜色和宽度的设置&＃xff0c;我们在离元素宽度还有1px的时候变化&＃xff0c;所以这里是10-1&＃61;9px&＃xff1b;*/}.item a:before{content: "";display: block;position: absolute;left: -9px;bottom: 0;width: 10px;height: 10px;background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);}.item .active:after{background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);}.item .active:before{background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);}style>head><body><div class&＃61;"test"><ul class&＃61;"list clearfix"><li class&＃61;"item"><a href&＃61;"Javascript:;" >新闻a>li><li class&＃61;"item"><a href&＃61;"Javascript:;" class&＃61;"active">娱乐a>li><li class&＃61;"item"><a href&＃61;"Javascript:;">体育a>li>ul><div class&＃61;"content">div>div>body>
html>
桃心
代码如下&＃xff1a;
DOCTYPE html>
<html><head><meta charset&＃61;"UTF-8"><title>title><style type&＃61;"text/css">/**{padding: 0;margin: 0;}*/.wrapper{margin: 100px;width: 300px;height: 300px;border: 1px solid #0ff;}.test{display:inline-block;margin:50px;height: 100px;width: 100px;background-color: red;transform: rotate(-45deg);}.test::before , .test::after{display:block;content:"";width: 100px;height: 100px;background-color: red;border-radius: 50%;margin-top:-50%;}.test:after{margin-left:50%;}style>head><body><div class&＃61;"wrapper"><div class&＃61;"test">div>div>body>
html>
回到顶部
<style>*{padding: 0;margin: 0;}.goTop{position:fixed;right:10px;bottom: 10px;height:50px;width: 50px; text-align:center;background-color: lightblue;border-radius: 20%;overflow: hidden;}.goTop:hover:before{top:50%;}.goTop:hover .directTop{visibility: hidden;}.goTop:before{position: absolute;top: -50%;left: 50%;transform: translate(-50%,-50%);content:&＃39;回到顶部&＃39;;width: 40px;color:peru;font-weight:bold;} .directTop{visibility: visible;display:inline-block;margin-top: 20px;height:20px;width: 20px;border: 3px solid;border-color: white transparent transparent white;transform:rotate(45deg);}style><body style&＃61;"height:2000px;"><div class&＃61;"goTop"><div class&＃61;"directTop">div>div> body>
还有很多css制作的经典图形&＃xff0c;以后再整理吧&＃xff1b;
其实&＃xff0c;css制作的图标和图片代替的图片都很棒&＃xff0c;根据需求吧。我更喜欢字体图标和图片的方式&＃xff0c;效率更高&＃xff0c;简单。
京公网安备 11010802041100号