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

先看一下效果

1.鼠标移入前的效果

 

2.鼠标移入的效果

3.制作步骤如下：

---

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

 1 <style>
 2 /*显示方式为 inline-block*/
 3 .displayInlineBlock{
 4   display: inline-block;
 5 }
 6 
 7 /*画出轮廓*/
 8 .circle{
 9   margin: 0px 10px 0px 10px;
10   width: 20px;
11   height: 20px;
12   border: 2px solid #87CEFF;
13   border-radius: 20px;
14   background: #BFEFFF;
15   cursor: pointer;
16 }
17 
18 /*鼠标移入时改变背景色*/
19 .circle:hover {
20   background: #87CEFF;
21 }
22 
23 </style>
24 
25 <div class="circle displayInlineBlock">
26 </div>

View Code

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

---

制作向左标记的上半部分

 1 <style>
 2 /*显示方式为 inline-block*/
 3 .displayInlineBlock{
 4   display: inline-block;
 5 }
 6 
 7 /*画出轮廓*/
 8 .circle{
 9   margin: 0px 10px 0px 10px;
10   width: 20px;
11   height: 20px;
12   border: 2px solid #87CEFF;
13   border-radius: 20px;
14   background: #BFEFFF;
15   cursor: pointer;
16 }
17 
18 /*鼠标移入时改变背景色*/
19 .circle:hover {
20   background: #87CEFF;
21 }
22 
23 /*
24 方向向左的标记
25 通过逆时针旋转45度，制作出/的效果
26 */
27 .leftArrow{
28   margin: 7px 0px 0px 6px;
29   width:7px;
30   height: 2px;
31   background: #fff;
32   -webkit-transform: rotate(-45deg);
33   transform: rotate(-45deg);
34 }
35 
36 </style>
37 
38 <div class="circle displayInlineBlock">
39   <div class="leftArrow"></div>
40 </div>

View Code

显示效果如下

---

制作向左标记的下半部分

 1 <style>
 2 /*显示方式为 inline-block*/
 3 .displayInlineBlock{
 4   display: inline-block;
 5 }
 6 
 7 /*画出轮廓*/
 8 .circle{
 9   margin: 0px 10px 0px 10px;
10   width: 20px;
11   height: 20px;
12   border: 2px solid #87CEFF;
13   border-radius: 20px;
14   background: #BFEFFF;
15   cursor: pointer;
16 }
17 
18 /*鼠标移入时改变背景色*/
19 .circle:hover {
20   background: #87CEFF;
21 }
22 
23 /*
24 方向向左的标记
25 通过逆时针旋转45度，制作出/的效果
26 */
27 .leftArrow{
28   margin: 7px 0px 0px 6px;
29   width:7px;
30   height: 2px;
31   background: #fff;
32   -webkit-transform: rotate(-45deg);
33   transform: rotate(-45deg);
34 }
35 
36 /*
37 方向向左的标记
38 通过顺时针旋转45度，制作出\的效果
39 */
40 .rightArrow{
41   margin: 2px 0px 0px 6px;
42   width: 7px;
43   height: 2px;
44   background: #fff;
45   -webkit-transform: rotate(45deg);
46   transform: rotate(45deg);
47 }
48 
49 </style>
50 
51 <div class="circle displayInlineBlock">
52   <div class="leftArrow"></div>
53   <div class="rightArrow"></div>
54 </div>

View Code

显示效果如下

---

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

 1 <style>
 2 /*显示方式为 inline-block*/
 3 .displayInlineBlock{
 4   display: inline-block;
 5 }
 6 
 7 /*画出轮廓*/
 8 .circle{
 9   margin: 0px 10px 0px 10px;
10   width: 20px;
11   height: 20px;
12   border: 2px solid #87CEFF;
13   border-radius: 20px;
14   background: #BFEFFF;
15   cursor: pointer;
16 }
17 
18 /*鼠标移入时改变背景色*/
19 .circle:hover {
20   background: #87CEFF;
21 }
22 
23 /*
24 方向向左的标记
25 通过逆时针旋转45度，制作出/的效果
26 */
27 .leftArrow{
28   margin: 7px 0px 0px 6px;
29   width:7px;
30   height: 2px;
31   background: #fff;
32   -webkit-transform: rotate(-45deg);
33   transform: rotate(-45deg);
34 }
35 
36 /*
37 方向向左的标记
38 通过顺时针旋转45度，制作出\的效果
39 */
40 .rightArrow{
41   margin: 2px 0px 0px 6px;
42   width: 7px;
43   height: 2px;
44   background: #fff;
45   -webkit-transform: rotate(45deg);
46   transform: rotate(45deg);
47 }
48 
49 .rotate180{
50   -webkit-transform: rotate(180deg);
51   transform: rotate(180deg);
52 }
53 
54 </style>
55 
56 <div class="circle displayInlineBlock">
57   <div class="leftArrow"></div>
58   <div class="rightArrow"></div>
59 </div>
60 
61 <!-- 方向向左的标记旋转180度后，就是方向向右的标记 -->
62 <div class="circle rotate180 displayInlineBlock">
63   <div class="leftArrow"></div>
64   <div class="rightArrow"></div>
65 </div>

View Code

显示效果如下

---

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

 

完整代码如下

 1 <style>
 2 
 3 /*显示方式为 inline-block*/
 4 .displayInlineBlock{
 5   display: inline-block;
 6 }
 7 
 8 /*画出轮廓*/
 9 .circle{
10   margin: 0px 10px 0px 10px;
11   width: 20px;
12   height: 20px;
13   border: 2px solid #87CEFF;
14   border-radius: 20px;
15   background: #BFEFFF;
16   cursor: pointer;
17 }
18 
19 /*鼠标移入时改变背景色*/
20 .circle:hover {
21   background: #87CEFF;
22 }
23 
24 /*
25 方向向左的标记
26 通过逆时针旋转45度，制作出/的效果
27 */
28 .leftArrow{
29   margin: 7px 0px 0px 6px;
30   width:7px;
31   height: 2px;
32   background: #fff;
33   -webkit-transform: rotate(-45deg);
34   transform: rotate(-45deg);
35 }
36 
37 /*
38 方向向左的标记
39 通过顺时针旋转45度，制作出\的效果
40 */
41 .rightArrow{
42   margin: 2px 0px 0px 6px;
43   width: 7px;
44   height: 2px;
45   background: #fff;
46   -webkit-transform: rotate(45deg);
47   transform: rotate(45deg);
48 }
49 
50 /*
51 关闭的标记/
52 */
53 .closeLeft{
54   margin: 9px 0px 0px 2px;
55   width: 16px;
56   height: 2px;
57   background: #fff;
58   -webkit-transform: rotate(-45deg);
59   transform: rotate(-45deg);
60 }
61 
62 /*
63 关闭的标记\
64 */
65 .closeRight{
66   margin: -2px 0px 0px 2px;
67   width: 16px;
68   height: 2px;
69   background: #fff;
70   -webkit-transform: rotate(45deg);
71   transform: rotate(45deg);
72 }
73 
74 .rotate180{
75   -webkit-transform: rotate(180deg);
76   transform: rotate(180deg);
77 }
78 
79 
80 </style>
81 
82 <!-- 方向向左的标记 -->
83 <div class="circle displayInlineBlock">
84   <div class="leftArrow"></div>
85   <div class="rightArrow"></div>
86 </div>
87 
88 <!-- 方向向左的标记旋转180度后，就是方向向右的标记 -->
89 <div class="circle rotate180 displayInlineBlock">
90   <div class="leftArrow"></div>
91   <div class="rightArrow"></div>
92 </div>
93 
94 <!-- 关闭的标记 -->
95 <div class="circle displayInlineBlock">
96   <div class="closeLeft"></div>
97   <div class="closeRight"></div>
98 </div>

View Code

 

 

 

转载于:https://www.cnblogs.com/z-gia/p/3519451.html