mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
130 lines
No EOL
2.4 KiB
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>
|
|
|