پیش‌نمایش زنده
کد 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>
کد CSS
.container {
  width: 300px;
  height: 320px;
}

.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;
}
نوع: card
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06