Sudah tiba masanya untuk meraikan Tahun Baru, gunakan CSS untuk mencapai kesan animasi tanglung perayaan!

Sudah tiba masanya untuk meraikan Tahun Baru Artikel berikut akan menunjukkan kepada anda cara melukis tanglung dengan CSS dan menambah kesan animasi untuk mencapai kesan lentera berayun ke kiri dan kanan.

Ini Tahun Baharu~ Ini Tahun Baharu~ Ini Tahun Baru~

Ini Tahun Baru dan Tahun Baharu dengan tanglung dan hiasan~

Ayam jantan emas menari dan menghantar hadiah Berkat akan datang pada tahun baru~

Beberapa lirik pertama artikel itu tiba-tiba kelihatan meriah ini.

atribut animasi

Melukis tanglung Kita pasti tidak boleh melukis tanglung statik Mari kita semak atribut animation dalam CSS Atribut ringkas yang terdiri daripada atribut animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode dan animation-play-state. Kami tidak akan menerangkannya di sini Anda boleh mengetahui lebih lanjut mengenainya di MDN.

Mari kita lihat contoh berikut dahulu:

animation: swing 3s infinite ease-in-out;

Dalam contoh di atas, urutan animasi bernama swing digunakan Urutan animasi dibuat dan dilaksanakan oleh @keyframes Masa 3s, animasi dilaksanakan dalam gelung, dan ease-in-out terakhir menunjukkan rentak pelaksanaan animasi.

Idea Pelaksanaan

• Tambahkan border-radius pada segi empat tepat untuk membentuk bentuk tanglung.

• Tambah ::before dan ::after pada segi empat tepat untuk membentuk bahagian atas dan kepala tanglung

• Lukiskan garisan tanglung.

• Tambahkan dua segi empat tepat nipis di dalam segi empat tepat, dan bentuk garisan tanglung dengan menambah jejari sempadan.

• Tetapkan kesan animasi tanglung

• Tambah gaya pancang lampu

Seterusnya kita akan Dilaksanakan dalam langkah-langkah.

Lukis bentuk tanglung

Mula-mula kita tentukan struktur HTML, kodnya adalah seperti berikut:

<!-- 灯笼容器 -->
<div class="lantern-con">
  <!-- 提着灯笼的线 -->
  <div class="lantern-line"></div>
  <!-- 灯笼主要区域 -->
  <div class="lantern-light">
  </div>
</div>

Kemudian kita lukis elips, dan kemudian lukiskannya melalui ::before dan ::after CSS untuk penutup tanglung atas dan bawah adalah seperti berikut:

/* 灯笼容器 */
.lantern-con {
  position: fixed;
  left: 160px;
}

/* 灯笼中间红色区域 */
.lantern-light {
  position: relative;
  width: 120px;
  height: 90px;
  background-color: red;
  margin: 30px;
  border-radius: 50%;
  box-shadow: -5px 5px 50px 4px #fa6c00;
  /* 设置旋转点 */
  transform-origin: top center;
  animation: swing 3s infinite ease-in-out;
}

/* 灯笼顶部和底部的样式 */
.lantern-light::before,
.lantern-light::after {
  content: '';
  position: absolute;
  border: 1px solid #dc8f03;
  width: 60px;
  height: 12px;
  /* 背景渐变 */
  background: linear-gradient(
    to right,
    #dc8f03,
    #ffa500,
    #dc8f03,
    #ffa500,
    #dc8f03
  );
  left: 30px;
}

/* 顶部位置 */
.lantern-light::before {
  top: -7px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/* 底部位置 */
.lantern-light::after {
  bottom: -7px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* 提着灯笼的线的样式 */
.lantern-line {
  width: 2px;
  height: 50px;
  background-color: #dc8f03;
  position: absolute;
  left: 88px;
}
/* 灯笼的动画效果 */
@keyframes swing {
  0% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(-6deg);
  }
}

Kini bentuk tanglung yang agak asas telah direalisasikan, dengan kesan berikut:

garisan tanglung. CSS yang sepadan

adalah seperti berikut:

border-radius

Kesannya adalah seperti berikut:

<div class="lantern-light">
  <!-- 灯笼中间的线条 -->
  <div class="lantern-circle">
    <div class="lantern-rect">
      <!-- 灯笼中间的文字内容 -->
      <div class="lantern-text">灯笼</div>
    </div>
  </div>
</div>

/* 灯笼中间的线条 */
.lantern-circle,
.lantern-rect {
  height: 90px;
  border-radius: 50%;
  border: 2px solid #dc8f03;
  background-color: rgba(216, 0, 15, 0.1);
}

/* 外层 */
.lantern-circle {
  width: 100px;
  margin: 12px 8px 8px 10px;
}

/* 内层 */
.lantern-rect {
  margin: -2px 8px 8px 26px;
  width: 45px;
}

/* 文字样式 */
.lantern-text {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  color: #dc8f03;
  margin-top: 4px;
}

Lantern Spike

Sekarang Mari kita lukis pancang tanglung Perkara ini adalah agak mudah. :

Di sini kami Baru selesai mengecat tanglung ini.

<!-- 灯笼主要区域 -->
<div class="lantern-light">
  <!-- more code -->
  <!-- 灯笼穗 -->
  <div class="lantern-tassel-top">
    <div class="lantern-tassel-middle"></div>
    <div class="lantern-tassel-bottom"></div>
  </div>
</div>

(Mempelajari perkongsian video:

tutorial video css

/* 灯穗 */
.lantern-tassel-top {
  width: 5px;
  height: 20px;
  background-color: #ffa500;
  border-radius: 0 0 5px 5px;
  position: relative;
  margin: -5px 0 0 59px;
  /* 让灯穗也有一个动画效果 */
  animation: swing 3s infinite ease-in-out;
}

.lantern-tassel-middle,
.lantern-tassel-bottom {
  position: absolute;
  width: 10px;
  left: -2px;
}

.lantern-tassel-middle {
  border-radius: 50%;
  top: 14px;
  height: 10px;
  background-color: #dc8f03;
  z-index: 2;
}

.lantern-tassel-bottom {
  background-color: #ffa500;
  border-bottom-left-radius: 5px;
  height: 35px;
  top: 18px;
  z-index: 1;
}

)

Atas ialah kandungan terperinci Sudah tiba masanya untuk meraikan Tahun Baru, gunakan CSS untuk mencapai kesan animasi tanglung perayaan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!