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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
| <!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3 Image Slider - Free Download the Animation CSS3 Image Slider</title>
<meta name="keywords" content="css3 image slider, free css3 image slider, css3 image slider free download">
<meta name="description" content="This is a CSS3 image slider created by SliceMaker staff. You can free download the CSS3 image slider and then edit it for your own use.">
<script type="text/javascript" src="http://www.w3cplus.com/demo/css3/prefixfree.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" />
<style>
body {
background-color: #f6f6f6;
}
.demo {
width: 940px;
margin: 40px auto 0;
}
.main_promo {
border: 5px solid #3d3d3d;
border-radius: 7px;
box-shadow: 0 8px 16px rgba(0,0,0,.2);
background-color: #1c1c1c;
}
.main_promo li {
position: relative;
float: left;
padding: 5px 0 5px 6px;
overflow: hidden;
}
.main_promo div {
float: left;
}
.slide a {
position: relative;
z-index: 1;
display: block;
outline:none;
width: 50px;
height: 300px;
border-radius: 5px;
background-color: #303030;
transition: all 0.3s ease-in;
}
.slide p {
position: absolute;
top: 30px;
left: -25px;
color: #ddd;
height:20px;
width: 100px;
font-size: 14px;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0,0,0,.8);
word-break:break-all;
transform: rotate(-90deg);
}
.slide strong {
font-size: 30px;
color: #191919;
text-shadow: 0 1px 0 #454545;
position: absolute;
bottom: 15px;
left: 15px;
}
.slide_img {
overflow: hidden;
width: 0;
height: 0;
transition: width 0.5s ease-in-out;
}
.slide_img img {
width: 692px;
height: 300px;
}
input[type="radio"] {
position: absolute;
left: 5px;
z-index: 99;
width: 50px;
height: 300px;
opacity: 0;
cursor: pointer;
}
input:checked ~ .slide a {
text-decoration: none;
background:radial-gradient(circle,#434343,#303030);
}
input:checked ~ .slide_img {
overflow: visible;
width:692px;
height:300px;
margin-left: 8px;
}
</style>
</head>
<body>
</nav>
</div>
<div class="page">
<header id="header">
</header>
<section class="demo">
<ul class="main_promo clearfix" id="main_promo">
<li>
<input type="radio" name="radio-set" checked="checked"/>
<div class="slide">
<a href="#"><p>Slide One</p><strong>1</strong></a>
</div>
<div class="slide_img">
<img src="img/img_01.jpg" alt="" />
</div>
</li>
<li>
<input type="radio" name="radio-set" />
<div class="slide">
<a href="#slide_two"><p>Slide Two</p><strong>2</strong></a>
</div>
<div class="slide_img">
<img src="img/img_02.jpg" alt="" />
</div>
</li>
<li>
<input type="radio" name="radio-set" />
<div class="slide">
<a href="#slide_three"><p>Slide Three</p><strong>3</strong></a>
</div>
<div class="slide_img">
<img src="img/img_03.jpg" alt="" />
</div>
</li>
<li>
<input type="radio" name="radio-set" />
<div class="slide">
<a href="#slide_four"><p>Slide Four</p><strong>4</strong></a>
</div>
<div class="slide_img">
<img src="img/img_04.jpg" alt="" />
</div>
</li>
</ul><!-- / main_promo-->
</section>
</div>
</body>
</html> |
Ajouter du texte sur un slider
Répondre avec citation
Partager