CSS 实现灯笼动画

--- theme: qklhk-chocolate --- ##### 开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，[点击查看活动详情](https://juejin.cn/post/7167294154827890702 "https://juejin.cn/post/7167294154827890702") ## 前言 👏**CSS 实现大红灯笼动画，祝大家元旦快乐，2023越来越棒！速速来Get吧~** 🥇**文末分享源代码。记得点赞+关注+收藏！** ## 1.实现效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/30c65e06d486456bb38e1d04d2dd66fc~tplv-k3u1fbpfcp-zoom-1.image) ## 2.实现步骤 - 定义一个灯笼的背景色bg，线条颜色lineColor ```csharp :root { --lineColor: #ecaa2f; --bg: #f00; } ``` - 父容器container宽高设置为200px/150px ```csharp .container { width: 200px; height: 150px; position: relative; } ``` - 在父容器内添加一个圆角矩形，宽高为父容器一致，设置一定的圆角与box-shadow阴影，背景色为 bg ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29e0f658652e43f5a0cf4c41568492b0~tplv-k3u1fbpfcp-zoom-1.image) ```csharp

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

``` ```csharp .center-line { width: 100%; height: 100%; } ``` - 在center-line的前伪元素上添加一个圆环，高度与父容器一致，宽度为150px；边框设置为2px，颜色为lineColor，距离顶部为0，水平居中 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1798386c3e064c1287a1eeeeccb0d44d~tplv-k3u1fbpfcp-zoom-1.image) ```csharp .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，水平居中 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c12e400091d4a2ca66261bc5bbb1ec4~tplv-k3u1fbpfcp-zoom-1.image) ```csharp .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 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89bb72a1d113468aaacb07e8227eb48f~tplv-k3u1fbpfcp-zoom-1.image) ```csharp

元旦快乐

``` ```csharp .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，居于最顶层 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b44cc37e98f948cf834eced6179c960e~tplv-k3u1fbpfcp-zoom-1.image) ```csharp .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，居于最顶层 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d7b5dd2887a478f9880f0889b2927ad~tplv-k3u1fbpfcp-zoom-1.image) ```csharp .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中添加一个标签，用来绘制灯笼最上面的线条 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9fb78863762541b59cc1bbcd0727b3f1~tplv-k3u1fbpfcp-zoom-1.image) ```csharp

``` ```csharp .head-line { position: absolute; left: calc(50% - 2px); top: -60px; width: 4px; height: 60px; background-color: var(--lineColor); } ``` - 在center中添加一个标签，用来绘制灯笼下面的线条 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8003e032bd634d9eabef6961e51b4253~tplv-k3u1fbpfcp-zoom-1.image) ```csharp

``` ```csharp .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设置背景色，这样一个灯笼就绘制完成了，接下来我们给灯笼添加上动画效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d02741b51574cd9936996f1f5b62594~tplv-k3u1fbpfcp-zoom-1.image) ```csharp .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 ```csharp @keyframes rotate { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } } ``` - 为灯笼底部的细须添加旋转动画 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/892e97ec35d549f39c8818871227e69b~tplv-k3u1fbpfcp-zoom-1.image) ```csharp .footer-line { + animation: rotate 3s infinite ease-in-out; } ``` + 为灯笼的中间区域center添加旋转动画 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f89ba7e49714425f8afb93f815290365~tplv-k3u1fbpfcp-zoom-1.image) ```csharp .center { + animation: rotate 3s infinite ease-in-out; } ``` + 可以看到，灯笼中间与上方线条之间摆动的幅度太大，为center设置transform-origin ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f1146ba8f034c2590b55b3a886827c2~tplv-k3u1fbpfcp-zoom-1.image) ```csharp .center { + transform-origin: top center; } ``` + 为最外层父容器添加旋转动画，就实现好了啦~ ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8033cfb0fd78424fb51d8debfdc07d44~tplv-k3u1fbpfcp-zoom-1.image) ```csharp .container { + animation: rotate 3s infinite ease-in-out; } ``` ## 3.实现代码 ```csharp CSS 实现灯笼动画

元旦快乐

``` ## 4.在线预览🍒 [jcode](https://code.juejin.cn/pen/7182940495054635063) ## 5.写在最后🍒 ##### 🍡提前祝大家元旦快乐，2023越来越棒！🍪 ##### 看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕