Китайский Новый год~ Я использовал CSS, чтобы нарисовать фонарь, он выглядит так празднично

внешний интерфейс Технологии Nuggets призывают к публикации CSS
Китайский Новый год~ Я использовал CSS, чтобы нарисовать фонарь, он выглядит так празднично

PK Creative празднует Китайский Новый год. Я участвую в "Творческом конкурсе Весеннего фестиваля". Подробности см.:Творческий конкурс "Праздник весны"

Привет всем, яодна чаша в неделю, передняя часть, которая не хочет быть пьяной (завернутой). Если написанной статье посчастливилось получить вашу благосклонность, мне очень повезло~

написать впереди

Новый год~ Новый год~ Новый год~

Попрощайтесь со старым и поприветствуйте Новый год, это Праздник Весны с фонарями и цветами~

Золотой петух танцует, чтобы послать благословение, приближается новый год~

Первые несколько слов статьи вдруг выглядят празднично, вот так выглядит наш фонарь.

灯笼.gif

свойство анимации

Чтобы нарисовать фонарь, мы определенно не можем нарисовать статичный фонарь.Давайте сначала рассмотрим CSS.animationсвойство, которое является сокращенным свойством, определяемымanimation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode а также animation-play-stateатрибутивная композиция. Мы не будем объяснять это здесь, и вы можете перейти к обучению MDN для получения подробной информации.

Давайте посмотрим на следующий пример:

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

В приведенном выше примере файл с именемswingПоследовательность анимации , последовательность анимации проходит через@keyframesсоздание, время выполнения3s, циклы анимации и, наконец,ease-in-outУказывает ритм выполнения анимации.

Реализовать идеи

  • добавить в прямоугольникborder-radiusСделайте его похожим на фонарь.

  • добавить в прямоугольник::beforeа также::afterдля формирования верха и головы фонаря

  • Нарисуйте линию фонаря.

  • Добавьте два более тонких прямоугольника внутри прямоугольника, чтобы сформировать линии фонаря, добавив радиус границы.

  • Анимируйте фонарь

  • Добавьте стиль шипа лампы

Далее мы реализуем его шаг за шагом.

Рисуем форму фонаря.

Сначала мы определяем структуру HTML, код выглядит следующим образом:

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

Затем рисуем эллипс и переходим::beforeа также::after, нарисуйте верхнюю и нижнюю две крышки фонаря, ССЦ выглядит следующим образом:

/* 灯笼容器 */
.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);
  }
}

Теперь реализована относительно простая форма фонаря, и эффект выглядит следующим образом:

image.png

Внутри фонаря

Внутренние линии фонаря реализованы через два прямоугольника, черезborder-radiusproperties установите его в эллипс, затем нарисуйте стороны, визуализируя линии фонаря.

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

Соответствующий CSS выглядит следующим образом:

/* 灯笼中间的线条 */
.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;
}

Фонарь Спайк

Теперь давайте нарисуем колос фонаря.Это вещь относительно простая.Самое главное добавить анимационный эффект.Его HTML-структура выглядит следующим образом:

<!-- 灯笼主要区域 -->
<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>

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;
}

На этом мы закончили рисовать фонарь.

напиши в конце

Эта статья здесь.После прочтения поставьте лайк и поддержите ее.Спасибо~

Категории