如何用纯 CSS 创作一个蝴蝶标本展示框
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/xzgZzQ
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cN7EncL
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器表示整只蝴蝶,因为蝴蝶是对称的,所以分为左右两边,每边有 3 个子元素:
<div class="butterfly">
<div class="left">
<span></span>
<span></span>
<span></span>
</div>
<div class="right">
<span></span>
<span></span>
<span></span>
</div>
</div>
居中显示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(gray, lightyellow, gray);
}
定义蝴蝶的尺寸:
.butterfly {
position: relative;
width: 10em;
height: 10em;
}
先画左半边:
.butterfly .left {
position: absolute;
width: inherit;
height: inherit;
}
用第 1 个子元素画出翅膀的上半部分:
.butterfly span {
position: absolute;
border-radius: 50%;
}
.butterfly span:nth-child(1) {
width: 5em;
height: 7em;
background-color: gold;
}
用第 2 个子元素画出翅膀的下半部分:
.butterfly span:nth-child(2) {
width: 5.5em;
height: 3.5em;
background-color: orangered;
top: 5em;
left: -2.5em;
filter: opacity(0.6);
}
用第 3 个子元素画出触角:
.butterfly span:nth-child(3) {
width: 6em;
height: 6em;
border-right: 0.3em solid orangered;
top: -0.5em;
}
把左半边复制一份到右半边:
.butterfly .right {
position: absolute;
width: inherit;
height: inherit;
}
.butterfly .right {
transform: rotateY(180deg) rotate(-90deg);
top: 0.4em;
left: 0.4em;
}
把标本装到展示框里:
.butterfly::before {
content: '';
position: absolute;
box-sizing: border-box;
top: -2.5em;
left: -8em;
width: 24em;
height: 18em;
background-color: black;
border: 0.2em inset silver;
}
.butterfly::after {
content: '';
position: absolute;
box-sizing: border-box;
width: 40em;
height: 30em;
background-color: lightyellow;
top: -9em;
left: -16em;
border: 2em solid burlywood;
border-radius: 3em;
box-shadow:
0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3),
inset 0.4em 0.4em 0.1em 0.5em rgba(0, 0, 0, .4);
z-index: -1;
}
最后,调整一下因图案倾斜引起的位移:
.butterfly {
transform: translateX(1em);
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015236585
如何用纯 CSS 创作一个蝴蝶标本展示框的更多相关文章
- 前端每日实战:47# 视频演示如何用纯 CSS 创作一个蝴蝶标本展示框
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xzgZzQ 可交互视频教程 此视频 ...
- 47.纯 CSS 创作一个蝴蝶标本展示框
html,body{ margin:; padding:; } body{ height: 100vh; display: flex; justify-content: center; align-i ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
- 如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个充电 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deNqdV 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 如何用纯 CSS 创作一个容器厚条纹边框特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视 ...
随机推荐
- ACM之路
从10月我刚接触到acm竞赛,到现在2017年2.20接近4个月的时间,我才刷到200道题.在刷题的过程中,我曾遇到困难,我也从一次性就a过,但是有时候会想到放弃.不过既然已经踏进来一只脚,还不如就好 ...
- C#静态类、静态构造函数,类与结构体的比较
一.静态类 静态类是不能实例化的,我们直接使用它的属性与方法,静态类最大的特点就是共享. 探究 public static class StaticTestClass{ public stati ...
- Codeforces 1131G(dp)
传送门 与Codeforces1107G一起食用 思路 想到要用dp--然后常规地设dp[i]为推倒前i个牌的最小花费 有两种情况:一是当前这个推,二是不推而被别人推.对于第一种,需要找到这个左推(因 ...
- C#的特性学习
转自:https://www.cnblogs.com/rohelm/archive/2012/04/19/2456088.html 特性提供功能强大的方法,用以将元数据或声明信息与代码(程序集.类 ...
- Git常用命令的使用方法
推荐一个比较好的GIT的教学地址,廖雪峰老师的git教程! 这里简述Git常用命令的使用方法: 一.初始化git 右键进入 Git Bash 1.建立身份信息 git config --global ...
- POJ 2104 K-th Number (区间第k大)
题意:给定一个序列A,接下来又m个询问,每个询问输出A[L,R]中的第K大.(保证第k大存在) 思路: 我想拿来练习“可持久化线段树”的,搜到这个比较巧的算法也可以解决这个问题,叫“归并树?.大概的思 ...
- @AutoWired注解使用时可能会发生的错误
@Autowired注解:用于对Bean的属性变量.属性的set方法及构造函数进行标注,配合对应的注解处理器完成Bean的自动配置工作.@Autowired注解默认按照Bean类型进行装配. 1.在 ...
- 如何在ABAP里用函数式编程思想打印出非波拉契Fibonacci(数列)
在JavaScript里可以用ES6提供的FunctionGenerator这种黑科技来打印非波拉契数列,具体细节参考我这篇文章. 在ABAP里也有很多种方式实现这个需求. 下面这个report分别用 ...
- LinuxShell(脚本如何编译问题)
想学shell的同学请记住: 如果你写好脚本后不给脚本执行权限那也是不行的: 添加执行权限: chmod +x 脚本名.sh 在Linux shell中有一个脚本编译命令: bash -v 脚本名.s ...
- 讲课笔记3——浮动、margin失效的问题、默认样式重置
EO:搜索引擎优化,一般在网页里面只写一个h1标签,搜索引擎可以通过该h1标签里面的内容搜索你所写的网页(a标签和img标签最好写上title属性)标准写法: .logo { text-decorat ...