이제 새해를 축하할 시간입니다. CSS를 사용하여 축제용 랜턴 애니메이션 효과를 얻으세요!

새해를 축하할 시간입니다. CSS로 랜턴을 그리는 방법과 애니메이션 효과를 추가하여 랜턴이 좌우로 흔들리는 효과를 얻는 방법을 알려드리겠습니다. 도움이 되길 바랍니다.

새해~새해~새해~

옛사람과 작별하고 신년을 맞이하는 설날이다~

금닭이 춤추며 복을 보낸다 새것 올해가 오고 있어요~

기사의 처음 몇 가사가 딱 느껴지네요. 축제 분위기가 나지 않나요? 우리 등불은 이렇게 생겼어요.

랜턴 그리기 우리는 확실히 정적 랜턴을 그릴 수 없습니다. 먼저 CSS의 animation 속성을 ​​살펴보겠습니다. animation으로 표시되는 속성입니다. -이름, 애니메이션 지속 시간, 애니메이션 타이밍 기능, 애니메이션 지연, 애니메이션 반복 횟수 , animation-direction, animation-fill-mode 및 animation-play-state 속성. 여기서는 이에 대해 설명하지 않겠습니다. MDN에서 더 자세히 알아볼 수 있습니다.

먼저 다음 예시를 살펴보겠습니다. 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来形成灯笼的顶部和头部

• 画一个灯笼线。

• 在 矩形内部添加两个比较细的矩形，通过添加 border-radius 来形成灯笼的线条。

• 设置灯笼的动画效果

• 添加灯穗的样式

接下来我们就分步骤实现。

绘制灯笼外形

首先我们定义HTML结构，代码如下：

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

然后我们画一个椭圆，然后通过::before和::after，绘制上下的两个灯笼盖，CSS如下：

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

现在就实现了一个比较基础灯笼外形，效果如下：

灯笼内部线条

灯笼的内部线条是通过两个矩形实现了，通过border-radius

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

위 예시에서는 swing이라는 애니메이션 시퀀스가 ​​사용되었습니다. 애니메이션 시퀀스는 @keyframes를 통해 생성됩니다. 실행 시간은 3s이고 애니메이션은 루프로 실행되며 마지막 ease-in-out은 애니메이션 실행의 리듬을 나타냅니다.

구현 아이디어

• 직사각형에 border-radius를 추가하여 랜턴 모양을 만듭니다.

• 랜턴의 상단과 머리를 형성하기 위해 직사각형에 ::before 및 ::after를 추가하세요

• 랜턴 선을 그립니다.

직사각형 안에 얇은 직사각형 두 개를 추가하고 테두리 반경을 추가하여 랜턴의 선을 형성합니다.

랜턴의 애니메이션 효과 설정

램프 스파이크 스타일 추가

다음으로 단계별로 구현하겠습니다. .

랜턴 모양 그리기먼저 HTML 구조를 정의하고 코드는 다음과 같습니다.

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

그런 다음 타원을 그린 다음 ::before를 전달합니다. 및 ::after 상단 및 하단 랜턴 덮개를 그리면 CSS는 다음과 같습니다.

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

이제 비교적 기본적인 랜턴 모양이 구현되었으며 효과는 다음과 같습니다. 🎜 🎜🎜

랜턴 내부 선 🎜🎜랜턴 내부 선은 두 개의 직사각형을 통해 구현됩니다. border-radius 속성을 ​​통해 타원으로 설정한 후 측면을 그립니다. 랜턴 라인을 제시합니다. 🎜

/* 灯穗 */
.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;
}

🎜에 해당하는 CSS는 다음과 같습니다. 🎜rrreee🎜효과는 다음과 같습니다. 🎜🎜🎜🎜🎜Lantern Spike🎜🎜 이제 랜턴 스파이크를 그려보겠습니다. 가장 중요한 것은 비교적 간단합니다. 애니메이션 효과의 HTML 구조는 다음과 같습니다. 🎜rrreee🎜 CSS는 다음과 같습니다. 🎜rrreee🎜 이제 이 랜턴 그리기가 완료되었습니다. 🎜🎜🎜🎜🎜(동영상 공유 학습: 🎜css 동영상 튜토리얼🎜)🎜

위 내용은 이제 새해를 축하할 시간입니다. CSS를 사용하여 축제용 랜턴 애니메이션 효과를 얻으세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!