1 | .banner-anim {
|
2 | position: relative;
|
3 | overflow: hidden;
|
4 | min-height: 100px;
|
5 | }
|
6 | .banner-anim-elem {
|
7 | height: 100%;
|
8 | }
|
9 | .banner-anim-elem > * {
|
10 | position: relative;
|
11 | }
|
12 | .banner-anim-elem-mask {
|
13 | position: relative;
|
14 | overflow: hidden;
|
15 | width: 100%;
|
16 | }
|
17 | .banner-anim-arrow {
|
18 | cursor: pointer;
|
19 | position: absolute;
|
20 | z-index: 10;
|
21 | }
|
22 | .banner-anim-arrow-default {
|
23 | position: absolute;
|
24 | width: 20px;
|
25 | height: 60px;
|
26 | margin-top: -30px;
|
27 | top: 50%;
|
28 | background: rgba(0, 0, 0, 0.3);
|
29 | }
|
30 | .banner-anim-arrow-default.next {
|
31 | right: 0;
|
32 | }
|
33 | .banner-anim-arrow-default.next:before,
|
34 | .banner-anim-arrow-default.prev:before,
|
35 | .banner-anim-arrow-default.next:after,
|
36 | .banner-anim-arrow-default.prev:after {
|
37 | width: 2px;
|
38 | height: 15px;
|
39 | background: #fff;
|
40 | display: block;
|
41 | content: ' ';
|
42 | position: absolute;
|
43 | }
|
44 | .banner-anim-arrow-default.next:before {
|
45 | transform: rotate(-40deg);
|
46 | top: 18px;
|
47 | left: 10px;
|
48 | }
|
49 | .banner-anim-arrow-default.next:after {
|
50 | transform: rotate(40deg);
|
51 | bottom: 17px;
|
52 | left: 10px;
|
53 | }
|
54 | .banner-anim-arrow-default.prev:before {
|
55 | transform: rotate(40deg);
|
56 | top: 18px;
|
57 | left: 8px;
|
58 | }
|
59 | .banner-anim-arrow-default.prev:after {
|
60 | transform: rotate(-40deg);
|
61 | bottom: 17px;
|
62 | left: 8px;
|
63 | }
|
64 | .banner-anim-thumb {
|
65 | position: absolute;
|
66 | bottom: 0;
|
67 | margin: 0;
|
68 | padding: 0;
|
69 | width: 100%;
|
70 | text-align: center;
|
71 | pointer-events: none;
|
72 | z-index: 10;
|
73 | }
|
74 | .banner-anim-thumb > span {
|
75 | pointer-events: auto;
|
76 | cursor: pointer;
|
77 | display: inline-block;
|
78 | list-style: none;
|
79 | }
|
80 | .banner-anim-thumb-default {
|
81 | height: 40px;
|
82 | line-height: 40px;
|
83 | }
|
84 | .banner-anim-thumb-default span {
|
85 | width: 8px;
|
86 | height: 8px;
|
87 | border-radius: 8px;
|
88 | margin: 0 5px;
|
89 | background: rgba(102, 102, 102, 0.35);
|
90 | transition: background .3s;
|
91 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
|
92 | }
|
93 | .banner-anim-thumb-default span:active,
|
94 | .banner-anim-thumb-default span.active {
|
95 | background: #fff;
|
96 | }
|
97 |
|
98 |
|
\ | No newline at end of file |