<div class="background">
<div class="camera">
<div class="botao"></div>
<div class="lente"></div>
<div class="coisinho">
<div class="detalhe"></div>
<div class="poraloid">
<div class="content"></div>
</div>
</div>
</div>
</div>
html {
height: 100%;
}
body {
font-family: open sans;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
background: #FEF2D8;
}
.background {
position: relative;
width: 500px;
height: 260px;
text-align: center;
padding: 30px;
border-radius: 10px;
}
.camera {
position: absolute;
top: 50px;
left: 160px;
width: 255px;
height: 140px;
background: #EFC371;
}
.botao {
position: absolute;
top: -20px;
width: 80px;
height: 20px;
background: #E1D386;
transition: background-color 1s;
cursor: pointer;
}
.botao:active {
position: absolute;
top: -20px;
width: 80px;
height: 20px;
background: #EFC371;
animation: click 1s ease-out;
}
.lente {
position: absolute;
top: 15px;
left: 80px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #EEE7CA;
}
.lente::before {
position: absolute;
top: 10px;
left: 10px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #2c2a2d;
content: "";
}
.lente::after {
position: absolute;
top: 10px;
left: 45px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
content:"";
}
.coisinho {
position: absolute;
top: 120px;
width: 255px;
height: 40px;
background: #EEE7CA;
}
.coisinho::after {
position: absolute;
left: 20px;
top: 10px;
width: 215px;
height: 10px;
background: #E1D386;
content:"";
}
.detalhe {
position: absolute;
left: 65px;
top: 20px;
width: 130px;
height: 15px;
background: #fff;
z-index: 1;
cursor: pointer;
}
.poraloid {
position: absolute;
left: 65px;
top: 20px;
width: 130px;
height: 20px;
background: #fff;
z-index: 1;
opacity: .1;
cursor: pointer;
}
.poraloid:active {
position: absolute;
left: 65px;
top: 10px;
width: 130px;
height: 130px;
background: #fff;
opacity: 1;
transition: opacity 1s;
}
.content{
position: absolute;
left: 10px;
top: 10px;
width: 110px;
height: 90px;
background: #EFC371;
opacity: 0;
}
.content:hover{
position: absolute;
left: 10px;
top: 10px;
width: 110px;
height: 90px;
background: #EFC371;
opacity: 1;
transition: opacity 1s;
}
@keyframes giraa {
0% {transform: translateY(0px)}
100% {transform: translateY(50px)}
}
@keyframes click {
0% {transform: translateY(0px)}
100% {transform: translateY(20px)}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.