css3 烟 蚊香_如何使用纯CSS实现蚊香燃烧的效果(附源码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现传统蚊香燃烧的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
效果预览
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 8 个子元素:
居中显示:body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, midnightblue, black);
}
画出纹香盘要用的框线:.coil {
position: relative;
display: flex;
justify-content: center;
}
.coil span {
position: absolute;
width: calc((var(--n) * 2 - 1) * 1em);
height: calc((var(--n) - 0.5) * 1em);
border: 1em solid darkgreen;
}
.coil span:nth-child(1) {
--n: 1;
}
.coil span:nth-child(2) {
--n: 2;
}
.coil span:nth-child(3) {
--n: 3;
}
.coil span:nth-child(4) {
--n: 4;
}
.coil span:nth-child(5) {
--n: 5;
}
.coil span:nth-child(6) {
--n: 6;
}
.coil span:nth-child(7) {
--n: 7;
}
.coil span:nth-child(8) {
--n: 8;
}
把一半框线放置到上方:.coil span:nth-child(odd) {
align-self: flex-end;
}
删除掉上方框线的下边框,和下方框线的上边框:.coil span:nth-child(odd) {
border-bottom: none;
}
.coil span:nth-child(even) {
border-top: none;
}
对齐上下边框:.coil span:nth-child(even) {
transform: translateX(-1em);
}
把边框改为曲线:.coil span:nth-child(odd) {
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.coil span:nth-child(even) {
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
用伪元素画出蚊香最中间的部分:.coil::before {
content: '';
position: absolute;
width: 1em;
height: 1em;
background-color: darkgreen;
border-radius: 50%;
left: -1.5em;
top: -0.5em;
}
用伪元素画出蚊香的燃点:.coil::after {
content: '';
position: absolute;
width: 1em;
height: 1em;
border-radius: 50%;
top: -0.5em;
background-color: darkred;
left: -9.5em;
z-index: -1;
transform: scale(0.9);
box-shadow: 0 0 1em white;
}
最后,为燃点增加闪动的效果:.coil::after {
animation: blink 1s linear infinite alternate;
}
@keyframes blink {
to {
box-shadow: 0 0 0 white;
}
}
大功告成!
css3 烟 蚊香_如何使用纯CSS实现蚊香燃烧的效果(附源码)相关推荐
- 【CSS特效扫盲】精选40种纯CSS特效应用实例,肝了10个晚上整理纯CSS特效(上)(附源码下载)
[写在前面]其实有时候经常会在某一天用到某种特效,然后就去网上找demo,千篇一律的CSS特效代码不说,更多的是滥竽充数,而且还没有特效预览图,因此针对我之前整理的CSS特效在这里做一个总结,希望给你 ...
- 「兔了个兔」玉兔踏青,纯CSS实现瑞兔日历(附源码)
- html 去除li标签样式,CSS如何更改li标签样式?附源码!
标签在 web 开发中经常被用到,常用于新闻列表或文章列表的开发.默认的 li 标签是一个实心圆,那么如果我们想更改其样式该怎么做呢?那么这篇文章 w3cschool 小编教你 CSS ...
- html5 相册系统php源码,HTML5 CSS3打造相册效果附源码下载
今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是很不错的,最主要的是没有使用一行j ...
- 12个花里胡哨的CSS炫酷案例!(附源码)
前言 又到了金三银四面试季,这里我整理了... 欸!?不好意思,跑题了... 感觉近来掘金首页全是面试相关的内容,我是打开掘金也不知道该看啥,实在无奈. 上个礼拜看了许多关于平面构成的资料,我就边用 ...
- html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
- css3 烟 蚊香_如何用纯 CSS 创作一盘传统蚊香
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, s ...
- css3边框交替动画_用css3实现惊艳面试官的背景即背景动画(高级附源码)
我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易.这篇 ...
- python bokeh教程_手把手教你用Bokeh进行可视化数据分析(附源码)
Bokeh与Python可视化领域中的流行库Matplotlib和Seaborn不同,它使用HTML和JavaScript渲染其图形,这使得它在构建基于Web的应用中成为一个非常理想的候选者.它对于探 ...
最新文章
- java显示链表在jtable上输出_jtable的使用精华
- 实验室中的机械臂-资料汇总
- eclipse外观设置
- 2020-11-25(多级页表的补充)
- 定义EJB 3.1视图(本地,远程,无接口)
- 关于win7系统无线及本地连接图标异常的处理(可以连接无线)
- STM32线缆综合测试系统
- JavaScript事件触发列表与解说
- TensorFlow基础篇(七)——tf.nn.conv2d()
- 深入学习Java中的字符串,代码点和代码单元
- java注册表添加键值_Java通过CMD方式读取注册表任意键值对
- 京东和天猫的运营模式的区别
- P1125 [NOIP2008 提高组] 笨小猴 java
- linux下桌面快捷方式无法打开,亲测可用:Linux下桌面快捷方式创建实例
- AutoGluon处理多模态数据方法及案例——Multimodal Data Tables: Tabular, Text, and Image
- unigui点线动画连线
- Android wifi开发介绍
- Lumaqq移植到Android 之进阶篇
- linux系统中对日志的管理
- 名企笔试真题精选 (四)
热门文章
- 微生物 Alpha多样性 作图 16S 菌群 R语言
- echarts柱状图顶部数据显示气泡
- java 奥运五环_[求助]求奥运五环 java代码
- com.jcraft.jsch.JSchException: Auth fail
- NC 完工报检单 推单 产成品入库单 批次问题
- 任天堂switch修改服务器,任天堂switch将退在线服务器 玩家似乎并不买账
- GPS警用车辆3G视频监控系统方案
- 李建忠讲23种设计模式笔记-上
- iOS 11封杀32位应用,不少开发者宁愿放弃
- QT自制秒表计时器、可获取电脑时间