Maison > interface Web > tutoriel CSS > Effet d'onglet CSS3 pur simple et élégant

Effet d'onglet CSS3 pur simple et élégant

黄舟
Libérer: 2017-03-24 13:43:15
original
2230 Les gens l'ont consulté

Bref tutoriel

Il s'agit d'un effet d'onglet Onglets réalisé en CSS3 pur. L'onglet Onglets est simple et élégant, et l'animation soulignée suivante est utilisée lors du basculement entre les onglets. L'effet global est très bon.

Structure HTML

La structure HTML de l'ensemble de l'onglet Onglets est divisée en plusieurs parties : utilisez les éléments

1

2

3

4

5

6

7

8

9

10

<input type="radio" id="tab1" name="tab-control" checked>

<input type="radio" id="tab2" name="tab-control">

<input type="radio" id="tab3" name="tab-control"

<input type="radio" id="tab4" name="tab-control">

<ul>

  <li title="tab 1"><label for="tab1" role="button"><span>Tab 1</span></label></li>

  <li title="tab 2"><label for="tab2" role="button"><span>Tab 2</span></label></li>

  <li title="tab 3"><label for="tab3" role="button"><span>Tab 3</span></label></li>

  <li title="tab 4"><label for="tab4" role="button"><span>Tab 4</span></label></li>

</ul>

Copier après la connexion

Le contenu de chaque onglet est contenu dans un élément

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<p class="content">

  <section>

    <h2>Tab 1 content</h2>

  </section>

  <section>

    <h2>Tab 2 content</h2>

  </section>

  <section>

    <h2>Tab 3 content</h2>

  </section>

  <section>

    <h2>Tab 4 content</h2>

  </section>

</p>

Copier après la connexion

La ligne utilisée pour animer le soulignement est créée à l'aide d'un élément

1

<p class="slider"><p class="indicator"></p></p>

Copier après la connexion

Style CSS

Les principaux styles CSS de l'onglet Onglets sont les suivants :

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

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

.tabs {

  left: 50%;

  -webkit-transform: translateX(-50%);

  transform: translateX(-50%);

  position: relative;

  background: white;

  padding: 50px;

  padding-bottom: 80px;

  width: 70%;

  height: 250px;

  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

  border-radius: 5px;

  min-width: 240px;

}

  

.tabs input[name="tab-control"] { display: none; }

  

.tabs .content section h2, .tabs ul li label {

  font-weight: bold;

  font-size: 18px;

  color: #428BFF;

}

  

.tabs ul {

  list-style-type: none;

  padding-left: 0;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -webkit-flex-direction: row;

  -ms-flex-direction: row;

  flex-direction: row;

  margin-bottom: 10px;

  -webkit-box-pack: justify;

  -webkit-justify-content: space-between;

  -ms-flex-pack: justify;

  justify-content: space-between;

  -webkit-box-align: end;

  -webkit-align-items: flex-end;

  -ms-flex-align: end;

  align-items: flex-end;

  -webkit-flex-wrap: wrap;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}

  

.tabs ul li {

  box-sizing: border-box;

  -webkit-box-flex: 1;

  -webkit-flex: 1;

  -ms-flex: 1;

  flex: 1;

  width: 25%;

  padding: 0 10px;

  text-align: center;

}

  

.tabs ul li label {

  -webkit-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  color: #929daf;

  padding: 5px auto;

  overflow: hidden;

  text-overflow: ellipsis;

  display: block;

  cursor: pointer;

  -webkit-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

  white-space: nowrap;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

  

.tabs ul li label br { display: none; }

  

.tabs ul li label svg {

  fill: #929daf;

  height: 1.2em;

  vertical-align: bottom;

  margin-right: 0.2em;

  -webkit-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

}

  

.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {

  outline: 0;

  color: #bec5cf;

}

  

.tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg { fill: #bec5cf; }

  

.tabs .slider {

  position: relative;

  width: 25%;

  -webkit-transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);

  transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);

}

  

.tabs .slider .indicator {

  position: relative;

  width: 50px;

  max-width: 100%;

  margin: 0 auto;

  height: 4px;

  background: #428BFF;

  border-radius: 1px;

}

  

.tabs .content { margin-top: 30px; }

  

.tabs .content section {

  display: none;

  -webkit-animation-name: content;

  animation-name: content;

  -webkit-animation-direction: normal;

  animation-direction: normal;

  -webkit-animation-duration: 0.3s;

  animation-duration: 0.3s;

  -webkit-animation-timing-function: ease-in-out;

  animation-timing-function: ease-in-out;

  -webkit-animation-iteration-count: 1;

  animation-iteration-count: 1;

  line-height: 1.4;

}

  

.tabs .content section h2 {

  color: #428BFF;

  display: none;

}

  

.tabs .content section h2::after {

  content: "";

  position: relative;

  display: block;

  width: 30px;

  height: 3px;

  background: #428BFF;

  margin-top: 5px;

  left: 1px;

}

  

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {

  cursor: default;

  color: #428BFF;

}

  

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg { fill: #428BFF; }

@media (max-width: 600px) {

  

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label { background: rgba(0, 0, 0, 0.08); }

}

  

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {

  -webkit-transform: translateX(0%);

  transform: translateX(0%);

}

  

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) { display: block; }

  

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {

  cursor: default;

  color: #428BFF;

}

  

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg { fill: #428BFF; }

@media (max-width: 600px) {

  

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label { background: rgba(0, 0, 0, 0.08); }

}

  

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {

  -webkit-transform: translateX(100%);

  transform: translateX(100%);

}

  

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) { display: block; }

  

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {

  cursor: default;

  color: #428BFF;

}

  

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg { fill: #428BFF; }

@media (max-width: 600px) {

  

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label { background: rgba(0, 0, 0, 0.08); }

}

  

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {

  -webkit-transform: translateX(200%);

  transform: translateX(200%);

}

  

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) { display: block; }

  

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {

  cursor: default;

  color: #428BFF;

}

  

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg { fill: #428BFF; }

@media (max-width: 600px) {

  

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label { background: rgba(0, 0, 0, 0.08); }

}

  

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {

  -webkit-transform: translateX(300%);

  transform: translateX(300%);

}

  

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) { display: block; }

@-webkit-keyframes

content {  from {

 opacity: 0;

 -webkit-transform: translateY(5%);

 transform: translateY(5%);

}

  

to {

  opacity: 1;

  -webkit-transform: translateY(0%);

  transform: translateY(0%);

}

}

@keyframes

content {  from {

 opacity: 0;

 -webkit-transform: translateY(5%);

 transform: translateY(5%);

}

  

to {

  opacity: 1;

  -webkit-transform: translateY(0%);

  transform: translateY(0%);

}

}

@media (max-width: 1000px) {

  

.tabs ul li label { white-space: initial; }

  

.tabs ul li label br { display: initial; }

  

.tabs ul li label svg { height: 1.5em; }

}

@media (max-width: 600px) {

  

.tabs ul li label {

  padding: 5px;

  border-radius: 5px;

}

  

.tabs ul li label span { display: none; }

  

.tabs .slider { display: none; }

  

.tabs .content { margin-top: 20px; }

  

.tabs .content section h2 { display: block; }

Copier après la connexion

Ce qui précède est le contenu du CSS3 pur simple et élégant Effet d'onglet Onglets, Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Articles connexes :

Programme WeChat Mini : Exemple de mise en œuvre de l'effet d'onglets

Implémentation de l'effet d'onglets dans le programme WeChat Mini

javascript implémente l'effet de changement d'onglet

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal