分享一个纯css灯笼

分享一个纯css灯笼，各位大佬转载请注明出处!!!

 *{margin: 0;padding: 0;box-sizing: border-box;}body{background: #000;}.lantern-page{display: flex;justify-content: space-around;}.lantern-box{position: relative;width: 120px;height: 90px;background-color: #d8000f;margin: 50px;border-radius: 50%;box-shadow: -5px 5px 50px 4px #fa6c00;transform-origin: 60px -50px;animation: swing 3s infinite ease-in-out;}@keyframes swing {0%,100% {transform:rotate(-23deg)}50%{transform: rotate(10deg);}}.lantern-box::before{content: "";position: absolute;top: -7px;left: 50%;margin-left: -30px;width: 60px;height: 12px;z-index: 6;background: linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);border: 1px solid #dc8f03;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}.lantern-box::after{content: "";position: absolute;bottom: -8px;left: 50%;margin-left: -20px;width: 40px;height: 12px;background: linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);border: 1px solid #dc8f03;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}.lantern-top{width: 2px;height: 50px;background: #dc8f03;position: absolute;right: 60px;top: -50px;}.lantern-circle{width: 100px;height: 90px;border-radius: 50%;border: 2px solid #dc8f03;margin: 12px 8px 8px 10px;}.lantern-circle2{width: 45px;height: 90px;line-height: 90px;text-align: center;/* transform: rotate(180deg); */font-size: 30px;font-weight: 600;color: #dc8f03;border-radius: 50%;border: 2px solid #dc8f03;margin: -96px 8px 8px 35px;}.lantern-tassel{width: 1px;height: 20px;background-color: #dc8f03;margin: -10px 0 0 60px;position: relative;animation: swing 3s infinite ease-in-out;}.lantern-tassel-middle,.lantern-tassel-bottom{position: absolute;width: 8px;left: -3px;}.lantern-tassel-middle{height: 8px;border-radius: 50%;background-color: #dc8f03;top: 19px;}.lantern-tassel-bottom{top: 24px;}.line{display: block;width: 1px;height: 120px;background-color: #dc8f03;position: absolute;left: 0;transform-origin: top left;transform: scale(.2);}.line:nth-child(2){left: 2px;height: 115px;}.line:nth-child(3){left: 3px;height: 135px;}.line:nth-child(4){left: 4px;height: 145px;}.line:nth-child(5){left: 6px;height: 115px;}.line:nth-child(6){left: 2px;height: 115px;}

<div class="lantern-page"><div class="lantern-item"><div class="lantern-box"><div class="lantern-top"></div><div class="lantern-circle"></div><div class="lantern-circle2"><span>新</span></div><div class="lantern-tassel"><div class="lantern-tassel-middle"></div><div class="lantern-tassel-bottom"><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span></div></div></div></div><div class="lantern-item"><div class="lantern-box"><div class="lantern-top"></div><div class="lantern-circle"></div><div class="lantern-circle2"><span>年</span></div><div class="lantern-tassel"><div class="lantern-tassel-middle"></div><div class="lantern-tassel-bottom"><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span></div></div></div></div><div class="lantern-item"><div class="lantern-box"><div class="lantern-top"></div><div class="lantern-circle"></div><div class="lantern-circle2"><span>快</span></div><div class="lantern-tassel"><div class="lantern-tassel-middle"></div><div class="lantern-tassel-bottom"><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span></div></div></div></div><div class="lantern-item"><div class="lantern-box"><div class="lantern-top"></div><div class="lantern-circle"></div><div class="lantern-circle2"><span>乐</span></div><div class="lantern-tassel"><div class="lantern-tassel-middle"></div><div class="lantern-tassel-bottom"><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span><span class="line"></span></div></div></div></div></div>

分享一个纯css灯笼相关推荐

React封装一个纯CSS实现的水滴样式的盒子
背景刷B站刷到一个纯css实现的水滴效果的视频感觉真不错,决定封装一个具有水滴效果的盒子(DIV) 涉及知识点 CSS样式,核心是这个和box-shadow阴影,实现水滴boder和阴影效果. J ...
html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...
【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作～
今天小编为大家推荐一个神奇的酷站.ECharts,一个纯 Javascript 的图表库. 以下是各个几个不错的界面的介绍: 首页: http://echarts.baidu.com/ 在首页有完整的 ...
一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
css加号图标_手把手教你打造一个纯CSS图标库
来,干了这碗安利写这篇文章的目的其实就是为了安利一下我的图标库: 主题说完了,下面进入正题. 在web开发中,我们经常要用到一些小图标(加减勾叉等).通常做法就两种: 直接使用图片: 使用css/s ...
css加号图标_一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
【QML】分享一个纯QML实现的2048小游戏
随着QT6的问世,UI设计+Qt代码联动的设计方式在Qt Creator中已经变成了不可用状态(虽然可以手动打开),官方开始推广用QML来进行界面设计,当时蠢蠢欲动做了一个小游戏,忽然想起来分享一下, ...
分享一个查看css版本兼容性的网站: https://caniuse.com/
最近在处理浏览器对img标签的图片是否会根据exif信息自动旋转的问题, 发现了这个站点: https://caniuse.com/ 比如 image-orientation, https://can ...
分享一组纯css动态好看的天气图标
先看看效果都是带有css3动画的,下面直接上代码 HTML: <div class="iconBox"><span class="title" ...

分享一个纯css灯笼

分享一个纯css灯笼相关推荐

最新文章

热门文章