正文
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>
