47.纯 CSS 创作一个蝴蝶标本展示框
html,body{
margin:;
padding:;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(gray, lightyellow,gray);
}
.butterfly{
position: relative;
width: 10em;
height: 10em;
}
.butterfly::before,
.butterfly::after {
content: '';
position: absolute;
box-sizing: border-box;
}
.butterfly::before{
width: 24em;
height: 18em;
background-color: black;
top: -2.5em;
left: -8em;
/* inset: 插入 */
border: inset 0.2em silver;
}
.butterfly::after{
width: 40em;
height: 30em;
background-color: lightyellow;
top: -9em;
left: -16em;
z-index: -1;
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, 0.4);
}
.butterfly .left,
.butterfly .right{
position: absolute;
width: inherit;
height: inherit;
}
.butterfly .right{
transform: rotateY(180deg) rotate(-90deg);
top: 0.4em;
left: 0.4em;
}
.butterfly span{
position: absolute;
border-radius: 50%;
}
.butterfly span:nth-child(1){
width: 5em;
height: 7em;
background-color: gold;
}
.butterfly span:nth-child(2){
width: 5.5em;
height: 3.5em;
background-color: orangered;
filter: opacity(0.6);
top: 5em;
left: -2.5em;
}
.butterfly span:nth-child(3){
width: 6em;
height: 6em;
border-right: 0.3em solid orangered;
top: -0.5em; }
原文地址:https://segmentfault.com/a/1190000015236585
感想:遇到一个新东西-》/* inset: 插入 */ border: inset 0.2em silver;
HTML code:
<div class="butterfly">
<div class="left">
<span></span>
<span></span>
<span></span>
</div>
<div class="right">
<span></span>
<span></span>
<span></span>
</div>
</div>
CSS code:
47.纯 CSS 创作一个蝴蝶标本展示框的更多相关文章
- 前端每日实战:47# 视频演示如何用纯 CSS 创作一个蝴蝶标本展示框
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xzgZzQ 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作一个蝴蝶标本展示框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xzgZzQ 可交互视频教 ...
- 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& ...
- 69.纯 CSS 创作一个单元素抛盒子的 loader
原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loade ...
- 52.纯 CSS 创作一个小球绕着圆环盘旋的动画
原文地址:https://segmentfault.com/a/1190000015295466 感想:重点在小球绕环转动. HTML code: <div class="contai ...
- 23.1纯 CSS 创作一个菜单反色填充特效
交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...
- 23.纯 CSS 创作一个菜单反色填充特效
原文地址:https://segmentfault.com/a/1190000014876348 HTML代码: <nav> <ul> <li><span&g ...
随机推荐
- XBOX360
[汇总+分享]XBOX360多人游戏汇总贴https://tieba.baidu.com/p/3550398060?pn=13&red_tag=3423139816&traceid= ...
- 解除IE锁定主页批处理
解除IE锁定主页.bat rem 解除IE锁定主页@echo offecho HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main [ ...
- 无法清除cookie中的属性值之对解决问题的思考
关于如何快速解决一个自己知识以外的问题的思考 做好任何事情都是讲究方法的,这是我健身之后的一个领悟,用正确的方式做事,自己的付出才能有价值. 首先分析问题: 比如我想清除cookie里面的token, ...
- Visual Studio 2010 Shortcut
General Shortcut Description Ctrl-X or Shift-Delete Cuts the currently selected item to the clipboar ...
- python接口自动化20-requests获取响应时间(elapsed)与超时(timeout) ok试了 获取响应时间的
前言 requests发请求时,接口的响应时间,也是我们需要关注的一个点,如果响应时间太长,也是不合理的.如果服务端没及时响应,也不能一直等着,可以设置一个timeout超时的时间 关于request ...
- hasClass() removeClass() addClass()
//检查第元素是否包含 "intro" 类 $("button").click(function(){ alert($("p:first") ...
- 学习笔记之NumPy
NumPy — NumPy http://www.numpy.org/ NumPy is the fundamental package for scientific computing with P ...
- Centos7.2/7.3集群安装Kubernetes 1.8.4 + Dashboard(转)
原文https://www.cnblogs.com/burningTheStar/p/7865998.html 1.环境配置 结点数量:3 结点系统:CentOS 7.2 / 7.3 2.效果展示 3 ...
- Zabbix 卸载包 采用yum方式
- tensorFlow 三种启动图的用法
tf.Session(),tf.InteractivesSession(),tf.train.Supervisor().managed_session() 用法的区别: tf.Session() 构 ...