【前端动手玩创意】google五星评分的星星(2)

目录

【前端动手玩创意】等待的转圈圈效果 (1)

【前端动手玩创意】google五星评分的星星(2)

【前端动手玩创意】CSS-3D卡片翻转效果(3) (今天难度颇高，想挑战再进来！)

【前端动手玩创意】一句CSS做出好看的hero section！(4)

【前端动手玩创意】创造一个Skill bar(5)

【前端动手玩创意】遮蔽广告(D卡未登入)脚本、自定义新增名单(6)

【前端动手玩创意】前端canvas截图的招式！竟然有三招，可存成SVG或PNG (7)

【前端动手玩创意】让你的PDF档案更难被抓取(8)

【前端动手玩创意】哇操！你敢信？花式写todo-list，body里面一行都没有也能搞？(9)

【前端动手玩创意】卡片製作，才不是！是卡片製作器！(10)

五星评分的星星效果

笔记观念

製作这个星星其实可以使用icon，也就是现有的图示。

两个icon网站介绍给你

font-awesome & ion-icon

常常看到网站上很多可爱的小图示，该怎么弄出来呢？
font-awesome跟ion-icon 就是提供你超多图式的网站

font-awesome

ion-icon

是不是超多超好看的icon呢！！⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

ionicons在这边
fontawesome在这边

该怎么使用呢-CDN引入

直接点选複製 并加入到我们html档案 位置可以放在</head>上面

複製这两个外部srcipt 放到</body>底下

半颗星星写法-配合这两个icon网站！

        <div class="rating">          <span class="fa fa-star checked"></span>          <span class="fa fa-star checked"></span>          <span class="fa fa-star checked"></span>          <span class="fa fa-star checked"></span>          <ion-icon name="star-half-outline"></ion-icon>        </div>

ion-icon真的很好用，
我空的星星也用它 (例如四颗星的第五颗空掉的星星)。
根本救星！

CSS样式设定

因为使用两个网页的icon，它的大小以及对齐并不会那么完美，这时候使用CSS来修改！

<style>ion-icon{position:absolute;font-size:19px;margin-top:-1.5px;margin-left:3px;font-weight:bolder;}html{color:orange;}</style>

这样子就完成啦！

赠送一些后记

实际上这种五星好评的星星超级常用，写法也非常多种，甚至可以直接使用现有的符号：

现有符号

特殊符号网

半颗星星的话白烂一点也可以:
先输入一个★，然后截想要的一半，用的时候插入图片，虽然比较机掰但也没有不行。

png方法

甚至教你更北烂一点你直接google看星星，找到你要的整个截图下来：

这里面发现有一个星等是有半颗星的，我想直接拿来用，就截图。

一张图片就完成了，不需要写什么div跟CSS属性(笑死

CSS伪元素去填星

也可以纯CSS去搞：

线上预览:http://jsfiddle.net/7kj8dtL2/1/

或者是研究用border的方法去弄:

  #star-five {      margin: 50px 0;      position: relative;      display: block;      color: red;      width: 0px;      height: 0px;      border-right: 100px solid transparent;      border-bottom: 70px solid red;      border-left: 100px solid transparent;      transform: rotate(35deg);    }    #star-five:before {      border-bottom: 80px solid red;      border-left: 30px solid transparent;      border-right: 30px solid transparent;      position: absolute;      height: 0;      width: 0;      top: -45px;      left: -65px;      display: block;      content: '';      transform: rotate(-35deg);    }    #star-five:after {      position: absolute;      display: block;      color: red;      top: 3px;      left: -105px;      width: 0px;      height: 0px;      border-right: 100px solid transparent;      border-bottom: 70px solid red;      border-left: 100px solid transparent;      transform: rotate(-70deg);      content: '';    }

可以参考人家写的方法，各种形状都写得出来：
CSS-shape写法大全

clip-path: polygon 用製作器去画多边形

或者是找CSS-shape-maker

自己用一个橘色或黄色背景就可以了。

心得

其实这篇文章最精华的地方在后记XD 完美示範了什么叫做工程师精神:

「什么是好答案？能够解决问题，就是好答案」

如果还想要看到更多这种解决问题的过程，觉得上了瘾，那完蛋了，你已经走上工程师之路。
请继续关注，
跟着我们这个系列继续动手玩创意！！未来还有更多更新鲜的花招呢(｡◕∀◕｡)