前端每日实战:47# 视频演示如何用纯 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);
}
大功告成!
前端每日实战:47# 视频演示如何用纯 CSS 创作一个蝴蝶标本展示框相关推荐
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- html鼠标拖尾效果,前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, s ...
- 前端每日实战:102# 视频演示如何用纯 CSS 创作一个小和尚
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMmYXp 可交互视频 此视频是可 ...
- 前端每日实战:125# 视频演示如何用纯 CSS 创作一个失落的人独自行走的动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqpOdR/ 可交互视频 此视频是 ...
- 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可 ...
- 前端每日实战:119# 视频演示如何用纯 CSS 创作一个接扎啤的动画(内含2个视频)...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rZeOQp 可交互视频 此视频是可 ...
- 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...
- python绘制图形沙漏_前端每日实战:118# 视频演示如何用纯 CSS 创作一个沙漏 loader...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, saf ...
- 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...
- 前端每日实战:93# 视频演示如何用纯 CSS 创作一根闪电连接线
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可 ...
最新文章
- Web服务器指纹识别工具httprint
- linux去掉java路径_Java显示目录文件列表和删除目录
- python如何修改excel数据库_python修改excel数据库
- spring boot + vue + element-ui全栈开发入门——项目部署
- 【selenium】 selenium web测试工具介绍(一)
- 关于T4,正在发生的...
- centos 去除屏幕保护
- Eclipse 离线安装ADT
- Windows核心编程_异型窗口
- java实体类生成mysql表_自己简单写的JDBCUtils,可以根据当前数据库下面的表生成java实体类。...
- python屏幕录像专家_可以推荐一款电脑录屏软件吗?
- 三维GIS引擎平台设计
- python(2): If/for/函数/try异常/调试/格式输出%
- 浅析计算机用户身份识别技术,(浅析身份认证技术.doc
- 如何创建一个javaWeb项目
- 二进制安全学习笔记(2)
- SQL Server 扩展秘钥管理(EKM)
- CD19药物|适应症|市场销售-上市药品前景分析
- 不同的 docker-compose 间怎么实现网络互通
- bucket java_桶排序(BucketSort)(java)
热门文章
- spark、hive、impala、hbase、gbase在结构化数据方面查询原理对比(含parquet/orc)
- 解读前端开发工程师必备技能
- day05_日常SQL练习(一)
- 试用cmd markdown
- iOS----创建静态库
- http学习笔记(四)——HTTP报文
- Quartz.NET WinFrom 关闭程序后无法结束进程
- 推荐的C++书籍以及阅读顺序
- 日更第4期-2015-1-19-openFrameworks系列第三讲-面向对象的小球们
- 【送书活动】一本超牛作者,超牛口碑,超牛销量的R数据科学重磅图书免费送啦!...