circlepop.css
2.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
nav a {
position: absolute;
top: 215px;
display: block;
outline: none;
text-align: left;
z-index: 1000;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
nav a.prev {
left: 0;
}
nav a.next {
right: 0;
}
nav a svg {
display: block;
margin: 0 auto;
padding: 0;
}
/* Individual styles */
/*--------------------*/
/* Circle pop */
/*--------------------*/
.color-3 { background: transparent; }
.nav-circlepop a {
margin: 0 15px;
width: 50px;
height: 50px;
}
.nav-circlepop a::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
content: '';
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.nav-circlepop .icon-wrap {
position: relative;
display: block;
margin: 10% 0 0 10%;
width: 80%;
height: 80%;
}
.nav-circlepop a.next .icon-wrap {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.nav-circlepop .icon-wrap::before,
.nav-circlepop .icon-wrap::after {
position: absolute;
left: 25%;
width: 3px;
height: 50%;
background: #ccc;
content: '';
-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
transition: transform 0.3s, background-color 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.nav-circlepop .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(30deg);
transform: translateX(-50%) rotate(30deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.nav-circlepop .icon-wrap::after {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-30deg);
transform: translateX(-50%) rotate(-30deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.nav-circlepop a:hover::before {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-circlepop a:hover .icon-wrap::before,
.nav-circlepop a:hover .icon-wrap::after {
background: #999;
}
.nav-circlepop a:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
}
.nav-circlepop a:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg);
}