galaxy/Cards/vladaxinte_black-mouse-53.html

130 lines
No EOL
2.4 KiB
HTML

<div class="container">
<div class="twitter">
<div class="wing-bottom"></div>
<div class="wing-top"></div>
<div class="wing-middle"></div>
<div class="beak beak-bottom"></div>
<div class="beak beak-top"></div>
<div class="torso"></div>
<div class="tummy"></div>
<div class="tail"></div>
<div class="head"></div>
</div>
</div>
<style>
/* From Uiverse.io by vladaxinte - Tags: twitter, gradient, social media, logo, bird, css art */
.container {
width: 300px;
height: 340px;
}
.twitter {
transform: translate(-15%, 20%);
}
.wing-bottom {
background: radial-gradient(circle at -100% 90%, transparent 75%, #fff 10%);
width: 120px;
height: 120px;
position: absolute;
border-radius: 100%;
left: 92px;
top: 94px;
transform: rotate(86deg);
z-index: 90;
}
.wing-top {
background: radial-gradient(circle at -100% 90%, transparent 70%, #fff 10%);
width: 125px;
height: 160px;
position: absolute;
z-index: 20;
border-radius: 100%;
left: 88px;
top: 8px;
transform: rotate(132deg);
}
.wing-middle {
background: radial-gradient(circle at 50% -80%, transparent 80%, #fff 10%);
width: 130px;
height: 130px;
position: absolute;
z-index: 20;
border-radius: 100%;
left: 73px;
top: 44px;
transform: rotate(7deg);
}
.beak {
background: radial-gradient(circle at 10% -30%, transparent 76%, #fff 30%);
width: 112px;
height: 112px;
position: absolute;
z-index: 20;
border-radius: 100%;
}
.beak-bottom {
left: 240px;
top: -36px;
width: 112px;
height: 140px;
transform: rotate(20deg);
}
.beak-top {
left: 225px;
top: -33px;
transform: rotate(15deg);
}
.tummy {
background: radial-gradient(circle at 0% -38%, transparent 80%, #fff 30%);
width: 320px;
height: 320px;
position: absolute;
z-index: 20;
border-radius: 100%;
left: -3px;
top: -55px;
z-index: -1;
}
.torso {
width: 200px;
height: 200px;
border-radius: 100%;
position: absolute;
left: 117px;
top: 8px;
transform: rotate(10deg);
background: radial-gradient(circle at 0% -40%, transparent 60%, #fff 30%);
}
.tail {
width: 228px;
height: 150px;
border-radius: 100%;
position: absolute;
left: 28px;
top: 116px;
background: radial-gradient(circle at 10% -42%, transparent 66%, #fff 30%);
transform: rotate(5deg);
}
.head {
background: #fff;
width: 116px;
height: 116px;
border-radius: 100%;
position: absolute;
left: 200px;
top: 34px;
}
</style>