CSS3 制作向左、向右及关闭图标的效果

先看一下效果

1.鼠标移入前的效果

2.鼠标移入的效果

3.制作步骤如下：

---

轮廓的CSS，就是利用圆角和宽度高度，制作出一个圆；

 <style>
 /*显示方式为 inline-block*/
 .displayInlineBlock{
   display: inline-block;
 }

 /*画出轮廓*/
 .circle{
   margin: 0px 10px 0px 10px;
   width: 20px;
   height: 20px;
   border: 2px solid #87CEFF;
   border-radius: 20px;
   background: #BFEFFF;
   cursor: pointer;
 }

 /*鼠标移入时改变背景色*/
 .circle:hover {
   background: #87CEFF;
 }

 </style>

 <div class="circle displayInlineBlock">
 </div>

显示效果如下，同时定义里鼠标移入时的效果。

---

制作向左标记的上半部分

 <style>
 /*显示方式为 inline-block*/
 .displayInlineBlock{
   display: inline-block;
 }

 /*画出轮廓*/
 .circle{
   margin: 0px 10px 0px 10px;
   width: 20px;
   height: 20px;
   border: 2px solid #87CEFF;
   border-radius: 20px;
   background: #BFEFFF;
   cursor: pointer;
 }

 /*鼠标移入时改变背景色*/
 .circle:hover {
   background: #87CEFF;
 }

 /*
 方向向左的标记
 通过逆时针旋转45度，制作出/的效果
 */
 .leftArrow{
   margin: 7px 0px 0px 6px;
   width:7px;
   height: 2px;
   background: #fff;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }

 </style>

 <div class="circle displayInlineBlock">
   <div class="leftArrow"></div>
 </div>

显示效果如下

---

制作向左标记的下半部分

 <style>
 /*显示方式为 inline-block*/
 .displayInlineBlock{
   display: inline-block;
 }

 /*画出轮廓*/
 .circle{
   margin: 0px 10px 0px 10px;
   width: 20px;
   height: 20px;
   border: 2px solid #87CEFF;
   border-radius: 20px;
   background: #BFEFFF;
   cursor: pointer;
 }

 /*鼠标移入时改变背景色*/
 .circle:hover {
   background: #87CEFF;
 }

 /*
 方向向左的标记
 通过逆时针旋转45度，制作出/的效果
 */
 .leftArrow{
   margin: 7px 0px 0px 6px;
   width:7px;
   height: 2px;
   background: #fff;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }

 /*
 方向向左的标记
 通过顺时针旋转45度，制作出\的效果
 */
 .rightArrow{
   margin: 2px 0px 0px 6px;
   width: 7px;
   height: 2px;
   background: #fff;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }

 </style>

 <div class="circle displayInlineBlock">
   <div class="leftArrow"></div>
   <div class="rightArrow"></div>
 </div>

显示效果如下

---

制作向右的标记，其实就是把向左的标记旋转了180度

 <style>
 /*显示方式为 inline-block*/
 .displayInlineBlock{
   display: inline-block;
 }

 /*画出轮廓*/
 .circle{
   margin: 0px 10px 0px 10px;
   width: 20px;
   height: 20px;
   border: 2px solid #87CEFF;
   border-radius: 20px;
   background: #BFEFFF;
   cursor: pointer;
 }

 /*鼠标移入时改变背景色*/
 .circle:hover {
   background: #87CEFF;
 }

 /*
 方向向左的标记
 通过逆时针旋转45度，制作出/的效果
 */
 .leftArrow{
   margin: 7px 0px 0px 6px;
   width:7px;
   height: 2px;
   background: #fff;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }

 /*
 方向向左的标记
 通过顺时针旋转45度，制作出\的效果
 */
 .rightArrow{
   margin: 2px 0px 0px 6px;
   width: 7px;
   height: 2px;
   background: #fff;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }

 .rotate180{
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }

 </style>

 <div class="circle displayInlineBlock">
   <div class="leftArrow"></div>
   <div class="rightArrow"></div>
 </div>

 <!-- 方向向左的标记旋转180度后，就是方向向右的标记 -->
 <div class="circle rotate180 displayInlineBlock">
   <div class="leftArrow"></div>
   <div class="rightArrow"></div>
 </div>

显示效果如下

---

用类似的方法做出关闭的标记就大功告成。

完整代码如下

 <style>

 /*显示方式为 inline-block*/
 .displayInlineBlock{
   display: inline-block;
 }

 /*画出轮廓*/
 .circle{
   margin: 0px 10px 0px 10px;
   width: 20px;
   height: 20px;
   border: 2px solid #87CEFF;
   border-radius: 20px;
   background: #BFEFFF;
   cursor: pointer;
 }

 /*鼠标移入时改变背景色*/
 .circle:hover {
   background: #87CEFF;
 }

 /*
 方向向左的标记
 通过逆时针旋转45度，制作出/的效果
 */
 .leftArrow{
   margin: 7px 0px 0px 6px;
   width:7px;
   height: 2px;
   background: #fff;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }

 /*
 方向向左的标记
 通过顺时针旋转45度，制作出\的效果
 */
 .rightArrow{
   margin: 2px 0px 0px 6px;
   width: 7px;
   height: 2px;
   background: #fff;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }

 /*
 关闭的标记/
 */
 .closeLeft{
   margin: 9px 0px 0px 2px;
   width: 16px;
   height: 2px;
   background: #fff;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }

 /*
 关闭的标记\
 */
 .closeRight{
   margin: -2px 0px 0px 2px;
   width: 16px;
   height: 2px;
   background: #fff;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }

 .rotate180{
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }

 </style>

 <!-- 方向向左的标记 -->
 <div class="circle displayInlineBlock">
   <div class="leftArrow"></div>
   <div class="rightArrow"></div>
 </div>

 <!-- 方向向左的标记旋转180度后，就是方向向右的标记 -->
 <div class="circle rotate180 displayInlineBlock">
   <div class="leftArrow"></div>
   <div class="rightArrow"></div>
 </div>

 <!-- 关闭的标记 -->
 <div class="circle displayInlineBlock">
   <div class="closeLeft"></div>
   <div class="closeRight"></div>
 </div>