CSS 实现灯笼动画，祝大家元旦快乐

最新推荐文章于 2024-05-14 07:21:04 发布
最新推荐文章于 2024-05-14 07:21:04 发布
阅读量5.2k 收藏 26
点赞数 8
分类专栏： 神奇的css css 文章标签： CSS动画 灯笼 元旦 伪元素 动画效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48085286/article/details/128500040
版权

前言

👏CSS 实现大红灯笼动画，祝大家元旦快乐，2023越来越棒！速速来Get吧~

🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

在这里插入图片描述

2.实现步骤

  • 定义一个灯笼的背景色bg，线条颜色lineColor
:root {
  --lineColor: #ecaa2f;
  --bg: #f00;
}
  • 父容器container宽高设置为200px/150px
.container {
  width: 200px;
  height: 150px;
  position: relative;
}
  • 在父容器内添加一个圆角矩形，宽高为父容器一致，设置一定的圆角与box-shadow阴影，背景色为 bg

在这里插入图片描述

<div class="container">
 <div class="center"></div>
</div>

.center {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: 120px;
  box-shadow: 0 0 80px -10px var(--bg);
}
  • 在center中添加一个标签，宽高与父容器一致，在其前后伪元素上绘制灯笼上的线条
<div class="center">
  <div class="center-line"></div>
 </div>

.center-line {
   width: 100%;
   height: 100%;
 }
  • 在center-line的前伪元素上添加一个圆环，高度与父容器一致，宽度为150px；边框设置为2px，颜色为lineColor，距离顶部为0，水平居中

在这里插入图片描述

.center-line::before {
 content: "";
 position: absolute;
 top: 0;
 left: calc(50% - 75px);
 width: 150px;
 height: 150px;
 border: 2px solid var(--lineColor);
 border-radius: 50%;
}
  • 在center-line的后伪元素上添加一个圆环，高度与父容器一致，宽度为70px；边框设置为2px，颜色为lineColor，距离顶部为0，水平居中

在这里插入图片描述

.center-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 35px);
  width: 70px;
  height: 150px;
  border: 2px solid var(--lineColor);
  border-radius: 50%;
}
  • 在center-line中添加span标签，内容为"元旦快乐"，设置宽度与字体的font-size相同，水平垂直居中，字体颜色为lineColor

在这里插入图片描述

<div class="center">
  <div class="center-line"><span>元旦快乐</span></div>
</div>

.center-line span {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 18px;
 font-size: 18px;
 color: var(--lineColor);
 font-weight: bold;
}
  • 为center容器添加前伪元素，宽高为80px/10px,背景色为lineColor,设置左上右上的一定的圆角弧度，水平居中，top设置为-8px，层级设置为2，居于最顶层

在这里插入图片描述

 .center::before {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(50% - 40px);
  width: 80px;
  height: 10px;
  background: var(--lineColor);
  border-radius: 5px 5px 0 0;
  z-index: 2;
}
  • 为center容器添加后伪元素，宽高为80px/10px,背景色为lineColor,设置左下右下的一定的圆角弧度，水平居中，bottom设置为-8px，层级设置为2，居于最顶层

在这里插入图片描述

.center::after {
 content: "";
 width: 80px;
 height: 10px;
 background: var(--lineColor);
 border-radius: 0 0 5px 5px;
 position: absolute;
 bottom: -8px;
 left: calc(50% - 40px);
 z-index: 2;
}
  • 在最外层的父容器container中添加一个标签，用来绘制灯笼最上面的线条

在这里插入图片描述

<div class="container">
 + <span class="head-line"></span>
</div>

.head-line {
 position: absolute;
 left: calc(50% - 2px);
 top: -60px;
 width: 4px;
 height: 60px;
 background-color: var(--lineColor);
}
  • 在center中添加一个标签，用来绘制灯笼下面的线条

在这里插入图片描述

 <div class="center">
   + <span class="footer-line"></span>
 </div>

.footer-line {
 position: absolute;
 left: calc(50% - 2px);
 bottom: -50px;
 width: 4px;
 height: 50px;
 background-color: var(--lineColor);
 z-index: -1;
}
  • 为footer-line添加一个伪元素，用来绘制灯笼最下面的细须，用linear-gradient设置背景色，这样一个灯笼就绘制完成了，接下来我们给灯笼添加上动画效果

在这里插入图片描述

.footer-line::after {
 content: "";
 position: absolute;
 bottom: -75px;
 left: calc(50% - 8px);
 width: 16px;
 height: 80px;
 background: linear-gradient(
   #f00,
   #e36d00 3px,
   #fbd342 5px,
   #e36d00 8px,
   #e36d00 12px,
   #f00 16px,
   rgba(255, 0, 0, 0.8) 26px,
   rgba(255, 0, 0, 0.6)
 );
 border-radius: 5px 5px 0 0;
}
  • 添加rotate动画，动画的0%和100%旋转-10deg，50%的时候旋转10deg
@keyframes rotate {
  0%,
  100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
  • 为灯笼底部的细须添加旋转动画

在这里插入图片描述

.footer-line {
 + animation: rotate 3s infinite ease-in-out;
}
  • 为灯笼的中间区域center添加旋转动画

在这里插入图片描述

.center {
 + animation: rotate 3s infinite ease-in-out;
}
  • 可以看到，灯笼中间与上方线条之间摆动的幅度太大，为center设置transform-origin

在这里插入图片描述

.center {
 + transform-origin: top center;
}
  • 为最外层父容器添加旋转动画，就实现好了啦~

在这里插入图片描述

.container {
  +  animation: rotate 3s infinite ease-in-out;
}

3.实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 实现灯笼动画</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    :root {
      --lineColor: #ecaa2f;
      --bg: #f00;
    }
    .container {
      width: 200px;
      height: 150px;
      position: relative;
      animation: rotate 3s infinite ease-in-out;
    }
    .center {
      position: relative;
      width: 100%;
      height: 100%;
      background: var(--bg);
      border-radius: 120px;
      box-shadow: 0 0 80px -10px var(--bg);
      animation: rotate 3s infinite ease-in-out;
      transform-origin: top center;
    }
    .center::before {
      content: "";
      position: absolute;
      top: -8px;
      left: calc(50% - 40px);
      width: 80px;
      height: 10px;
      background: var(--lineColor);
      border-radius: 5px 5px 0 0;
      z-index: 2;
    }
    .center::after {
      content: "";
      width: 80px;
      height: 10px;
      background: var(--lineColor);
      border-radius: 0 0 5px 5px;
      position: absolute;
      bottom: -8px;
      left: calc(50% - 40px);
      z-index: 2;
    }
    .center-line {
      width: 100%;
      height: 100%;
    }
    .center-line span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 18px;
      font-size: 18px;
      color: var(--lineColor);
      font-weight: bold;
    }
    .center-line::before {
      content: "";
      position: absolute;
      top: 0;
      left: calc(50% - 75px);
      width: 150px;
      height: 150px;
      border: 2px solid var(--lineColor);
      border-radius: 50%;
    }
    .center-line::after {
      content: "";
      position: absolute;
      top: 0;
      left: calc(50% - 35px);
      width: 70px;
      height: 150px;
      border: 2px solid var(--lineColor);
      border-radius: 50%;
    }
    .head-line {
      position: absolute;
      left: calc(50% - 2px);
      top: -60px;
      width: 4px;
      height: 60px;
      background-color: var(--lineColor);
    }
    .footer-line {
      position: absolute;
      left: calc(50% - 2px);
      bottom: -50px;
      width: 4px;
      height: 50px;
      background-color: var(--lineColor);
      animation: rotate 3s infinite ease-in-out;
    }
    .footer-line::after {
      content: "";
      position: absolute;
      bottom: -75px;
      left: calc(50% - 8px);
      width: 16px;
      height: 80px;
      background: linear-gradient(
        #f00,
        #e36d00 3px,
        #fbd342 5px,
        #e36d00 8px,
        #e36d00 12px,
        #f00 16px,
        rgba(255, 0, 0, 0.8) 26px,
        rgba(255, 0, 0, 0.6)
      );
      border-radius: 5px 5px 0 0;
    }
    @keyframes rotate {
      0%,
      100% {
        transform: rotate(-10deg);
      }
      50% {
        transform: rotate(10deg);
      }
    }
  </style>
  <body>
    <div class="container">
      <span class="head-line"></span>
      <div class="center">
        <div class="center-line">
          <span>元旦快乐</span>
        </div>
        <span class="footer-line"></span>
      </div>
    </div>
  </body>
</html>

4.写在最后🍒

🍡提前祝大家元旦快乐，2023越来越棒！🍪
看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕
更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~
苏苏哇哈哈
关注
  • 8
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
html+css设计两个摆动的大灯笼
静Yu的博客
12-31 1万+
新年马上就要到了，教大家用html+css设计两个大灯笼，喜气洋洋。
html5 svg绘制2020新年快乐主题动画特效
06-11
在本项目中，开发者可能使用了`<rect>`, `<circle>`, `<path>`等SVG元素构建出新年相关的图案，如气球、烟花、灯笼等，并通过修改这些元素的属性实现动画效果。 CSS（Cascading Style Sheets）在这里扮演了样式设计...
CSS3夜晚空中孔明灯特效
04-25
CSS3夜晚空中孔明灯特效是一款夜晚孔明灯飞向天空动画特效。
html屏幕飘灯笼,HTML5+CSS3实现摇晃的蓝色斋月灯笼动画效果
weixin_39875842的博客
07-08 597
HTML5 CSS3 蓝色斋月灯笼动画* {padding: 0;margin: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}body {background: #1f1542;}#work {width: 300px;margin: 0 aut...
2024年最全学习CSS3，使用双旋转实现福到了的迎春喜庆特效_css 福，2024年最新大牛手把手带你
最新发布
2401_84185441的博客
05-14 716
但实现过程中，因为红色背景已经做过旋转，如果福字还在里面做为内部元素来布局，福字肯定会跟着旋转，那么就不好控制；所以我决定将红色纸背景和大福字拆分元素布局，单独对福字进行样式处理，旋转，再进行渲染；所以我后来想到，将内部的福字布局和外部的红色纸张布局进行拆分，也就是使用2个div元素进行布局。而内部福字布局也可以根据自己的原点进行旋转布局，这样就有规律的多，进行了180度旋转。这段代码虽然也将福字调整到了居中的位置，但top值，left值，和旋转后的rotate值都不如之前预想的那么有规律性。
纯css文字渐变动画效果
MISS_CJL的博客
09-08 1074
<div class="music-title"> 时间都去哪儿了 </div> <style scoped> .music-title{ font-size: 40px; color: #de6f64; background-image: -webkit-linear-gradient(left, #ffdcb4, #b96972 25%, #e88a57.
学习CSS3，使用双旋转实现福到了的迎春喜庆特效
xingyu_qie的专栏
01-13 2684
我利用css3的旋转做了一个福到了的特效，而且是双旋转哦！预祝大家在新的一年里，玉兔吉祥，步步高升。
2022年新的一年flash动画
07-28
3. **2022年与元旦快乐**：新年动画通常包含节日元素，如2022年的数字、烟花、贺卡等，以及庆祝新年的象征，比如“元旦快乐”的文字。这些元素通过Flash动画可以动态展示，增加节日氛围。 4. **卡通灯笼**：在标签...
2011元旦快乐模板下载
12-14
HTML（超文本标记语言）负责构建网页的结构，CSS（层叠样式表）则用来控制网页的布局和外观，而JavaScript用于实现交互效果，如动画、下拉菜单、轮播图等。在2011年的设计中，可能还包含了对IE6/7的兼容性处理，因为...
新年元旦快乐模板下载
12-02
在"新年元旦快乐模板下载"中，我们可以预见到这个模版会包含与新年或元旦相关的视觉元素，如节日装饰、灯笼、烟花、新年倒计时、贺卡图案等，以营造出浓厚的节日氛围。模版设计可能还会考虑到互动性，比如动态效果、...
2010元旦快乐模板下载
12-04
总之，网页模板是一种高效的设计解决方案，它允许设计者和开发者快速实现创意，而2010年元旦快乐模板则是这种解决方案的一个实例，通过精心设计的元素和布局，为用户带来愉悦的浏览体验。在实际应用中，用户可以根据...
纯CSS3发光油灯笼动画特效.zip
07-03
纯CSS3发光油灯笼动画特效是一款css3基于animation属性绘制卡通复古的油灯笼，点亮发光动画特效。
中国节日灯笼CSS3特效
04-06
中国节日灯笼CSS3特效是一款基于css3 keyframes属性绘制中国古典风格的节日灯笼悬挂摇晃动画特效。
不用图片作背景CSS做的小灯笼效果_练习用
10-30
纯CSS做的小灯笼，这东西就是用来熟悉CSS用的，实际中相当不赞成这样用！ 实际中谁这样用，一定是闲的！
分享一个纯css灯笼
u011053926的博客
01-04 178
分享一个纯css动画灯笼
过年了~我用CSS画了个灯笼，看着真喜庆，2024大厂前端面试集合
m0_60452134的博客
03-31 811
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
春节灯笼飘飘CSS效果实现，免费领取运行！
xunmaw001的博客
05-15 167
大家好，我是小寻，欢迎关注公众号：工具优选，免费领取优质项目源码和常用工具，还可以加入我的交流群！今天给大家分享一个春节，灯笼飘飘的JS代码实现效果！
过年了~我用CSS画了个灯笼，看着真喜庆
一碗周
01-10 308
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 写在前面 过年了~ 过年了~ 过年了~ 辞旧迎新过年啦 张灯结彩春节啦~ 金鸡起舞送福啦 新的一年福来啦~ 文章开头几句歌词，顿时显得喜庆了不，我们的灯笼是下面这个样子的。 animation属性 画灯笼我们肯定不能画一个静态的灯笼，我们先来复习一下CSS中的animation属性，该是是一个简写属性，由animation-name，animation-duration, animation-timing-f.
CSS一个摇摆的大红灯笼
小易不止于搬砖的博客
02-17 496
一个摇摆的灯笼 知识点总结： box-shadow: 是给元素块添加周边阴影效果 @keyframes 自定义动画 通过这个例子，让灯笼上部的线，下边的三部分组成的穗 待在一个合理的位置是一个挑战，通过改变bottom属性来完成。 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl
用css3写个元旦快乐动画
02-14
好的，这是一个使用 CSS3 写的元旦快乐动画的示例代码： ```css @keyframes happyNewYear { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .newYearText { animation: ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值