48.纯 CSS 创作一盘传统蚊香
原文地址:https://segmentfault.com/a/1190000015246974
感想: 都是半圆边框合成的。
HTML code:
<div class="coil">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS code:
html, body {
margin:;
padding:;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, midnightblue, black);
}
.coil{
position: relative;
display: flex;
justify-content: center;
}
.coil::before,
.coil::after {
content: '';
position: absolute;
border-radius: 50%;
width: 1em;
height: 1em;
top: -0.5em;
} /* 蚊香中间部分 */
.coil::before{
left: -2em;
background: darkgreen;
}
/* 蚊香的燃点 */
.coil::after{
left: -10em;
background: darkred;
box-shadow: 0 0 1em white;
transform: scale(0.9);
box-shadow: 0 0 1em white;
animation: blink 1.5s ease-in-out infinite alternate;
z-index: -1;
}
@keyframes blink{
to{
box-shadow: 0 0 0 white;
}
}
.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(odd){
align-self: flex-end;
border-bottom: none;
border-radius: 50% 50% 0 0 / 100% 100% 0 0 ;
}
.coil span:nth-child(even){
border-top: none;
/* 对齐上下边框 */
transform: translateX(-1em);
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.coil span:nth-child(1){
--n:;
}
.coil span:nth-child(2) {
--n:;
}
.coil span:nth-child(3) {
--n:;
}
.coil span:nth-child(4) {
--n:;
}
.coil span:nth-child(5) {
--n:;
}
.coil span:nth-child(6) {
--n:;
}
.coil span:nth-child(7) {
--n:;
}
.coil span:nth-child(8) {
--n:;
}
48.纯 CSS 创作一盘传统蚊香的更多相关文章
- 前端每日实战:48# 视频演示如何用纯 CSS 创作一盘传统蚊香
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BVpvMz 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作一盘传统蚊香
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BVpvMz 可交互视频教 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 24.纯 CSS 创作出平滑的层叠海浪特效
原文地址:https://segmentfault.com/a/1190000014895634 感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到. HTML代码: <div class ...
- 75.纯 CSS 创作一支摇曳着烛光的蜡烛
原文地址:https://segmentfault.com/a/1190000015580809 学习后效果地址:https://scrimba.com/c/c8PQ3PTB 感想:CSS 真强大! ...
- 74.纯 CSS 创作一台 MacBook Pro
原文地址:https://segmentfault.com/a/1190000015568609 HTML code: <div class="macbook"> &l ...
- 73.纯 CSS 创作一只卡通狐狸
原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6EzdSd 感想:过渡效果,圆角,定位 ...
随机推荐
- Team Foundation Server 2010简体中文版
文件名称:Team Foundation Server 2010简体中文版 文件大小:1.8 GBhttp://www.google.com/profiles/dedecms.com 下载地址: th ...
- Weka训练模型的存取
因为WEKA中所有分类器都实现了Serializable,所以只需要用java的ObjectOutputStream就可以实现了. /** * 存储model * * @param model * 训 ...
- 使用Socket通信--测试叫号
服务端程序: using System; using System.Net; using System.Net.Sockets; using System.Speech.Synthesis; usin ...
- intellij idea 快捷输出 main方法的规律
今天偶然发现了IntelliJ中 创建main函数的快捷键,依次还有for循环,System.out.println(); 在编写代码的时候直接输入psv就会看到一个psvm的提示,此时点击tab键一 ...
- Ubuntu16.04 LTS软件中心闪退及修改阿里源
现象: 进入软件中心点击任意,直接退出 解决办法: 先更换软件源,我的为阿里云 1. 备份 源位置 :/etc/apt/sources.list 2. 更改 sudo vi /etc/apt/sour ...
- Android兼容包之MultiDex
一.MultiDex的产生背景 当Android系统安装一个应用的时候,有一步是对Dex进行优化,这个过程有一个专门的工具来处理,叫DexOpt.DexOpt的执行过程是在第一次加载Dex文件的时候执 ...
- 【Guava 】Collections – Join and Split
Convert Collections to String Using Joiner Convert List into String Using Joiner @Test public void w ...
- Git初级
一,安装git 一键安装 Mac 或 Windows. 二,下载一个工具书 Git 命令手册 free Git cheat sheet 三,安装完成之后需要先配置两个基本配置:用户名和邮箱 $ git ...
- WAP用户评论简单实现瀑布流加载
wap端经常会遇到产品或者评论的加载,但是分页的体验不是很好,所以选择通过js实现瀑布流加载方式. 第一步:需要动态加载的主要内容,这里需要动态加载的是li标签的内容 <ul class=&qu ...
- Python类方法、静态方法与实例方法 -----类里面不需要实例化参数 和没带self的函数 调用此函数的方法
来源: https://www.cnblogs.com/blackmatrix/p/5606364.html 静态方法是指类中无需实例参与即可调用的方法(不需要self参数),在调用过程中,无需将类实 ...