Dia 17/2019 - Acordeão animado

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 17, mostrando o uso da pseudo-classe de negação :not.

Pré-visualização

Código

Começamos com a estrutura do HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Day 17</title>
<style>
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
* { margin: 0; padding: 0; list-style: none; }
body { background: #eee; font-family: Arial, Helvetica, sans-serif; }
</style>
<link rel="stylesheet" type="text/css" href="./day-17.css">
</head>
<body>
<!-- accordion -->
</body>
</html>
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
<div class='accordion'>
<input class="input" id='tab-1' name='tab' type='radio' checked>
<label class="tab" for='tab-1'>
<div class='content'>
<h2 class="title">Item 1</h2>
<div class='content-1'>
<div class='icon'></div>
</div>
<div class='content-2'>
<p class="text">Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica</p>
</div>
</div>
</label>
<input class="input" id='tab-2' name='tab' type='radio'>
<label class="tab" for='tab-2'>
<div class='content'>
<h2 class="title">Item 2</h2>
<div class='content-1'>
<div class='icon'></div>
</div>
<div class='content-2'>
<p class="text">Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica</p>
</div>
</div>
</label>
<input class="input" id='tab-3' name='tab' type='radio'>
<label class="tab" for='tab-3'>
<div class='content'>
<h2 class="title">Item 3</h2>
<div class='content-1'>
<div class='icon'></div>
</div>
<div class='content-2'>
<p class="text">Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica</p>
</div>
</div>
</label>
</div>
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
.accordion {
width: 600px;
margin: 0 auto;
height: 300px;
overflow: hidden;
}

.input { display: none; }
.input:checked + .tab .content { height: 175px; }
.input:checked + .tab .content .content-2 { top: 0; transition: all 0.3s 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.input:not(checked) + .tab .content { height: 60px; }
.input:not(checked) + .tab .content .content-2 { top: 200px; transition: all 0.3s 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.input:checked + .tab .content .content-1 .icon {
animation: _moveIn 0.55s 0.05s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
transition: all 0.3s 0.36s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.input:not(checked) + .tab .content .content-1 .icon {
animation: _moveOut 0.75s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
transition: all 0.3s 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.tab { display: block; width: 100%; }

.tab:nth-of-type(1) .content { background: #714cc5; height: 200px; }
.tab:nth-of-type(1) .content:hover { background: #835fd4; transition: all 0.2s; }
.tab:nth-of-type(1) .content .icon { background: #188188; }
.tab:nth-of-type(2) .content { background: #a62eb3; }
.tab:nth-of-type(2) .content:hover { background: #bf47cc; transition: all 0.2s; }
.tab:nth-of-type(2) .content .icon { background: #714cc5; }
.tab:nth-of-type(3) .content { background: #188188; }
.tab:nth-of-type(3) .content:hover { background: #3f9096; transition: all 0.2s; }
.tab:nth-of-type(3) .content .icon { background: #a62eb3; }

.content {
cursor: pointer;
display: flex;
flex-direction: row;
flex-flow: row wrap;
height: 60px;
justify-content: space-between;
overflow: hidden;
position: relative;
transition: all 0.65s cubic-bezier(1, 0, 0.41, 1.01);
width: 100%;
}

.title { color: #fff; font-size: 17px; padding: 20px; text-align: right; width: 100%; }
.text { color: #f9f79f; font-size: 14px; }

.content-1 { position: relative; width: 30%; }
.content-2 { padding: 20px; position: relative; top: 200px; text-align: right; width: 60%; }

.icon {
align-items: center;
display: flex;
border-radius: 50%;
background: #fff;
justify-content: center;
height: 60px;
margin-left: -30px;
margin-top: -30px;
position: relative;
left: 50%;
top: 50%;
text-align: center;
width: 60px;
}

.icon:before { color: #fff; content: "★"; display: block; }

@keyframes _moveIn {
0% { top: -200px; }
100% { top: 47px; }
}

@keyframes _moveOut {
0% { top: 47px; }
100% { top: 200px; }
}

Conclusão

A postagem original pode ser vista no meu Instagram e o código está acessível no meu Github.

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.