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 创作一个蝴蝶标本展示框的更多相关文章

  1. 前端每日实战:47# 视频演示如何用纯 CSS 创作一个蝴蝶标本展示框

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xzgZzQ 可交互视频教程 此视频 ...

  2. 如何用纯 CSS 创作一个蝴蝶标本展示框

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xzgZzQ 可交互视频教 ...

  3. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  4. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  5. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  6. 69.纯 CSS 创作一个单元素抛盒子的 loader

    原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loade ...

  7. 52.纯 CSS 创作一个小球绕着圆环盘旋的动画

    原文地址:https://segmentfault.com/a/1190000015295466 感想:重点在小球绕环转动. HTML code: <div class="contai ...

  8. 23.1纯 CSS 创作一个菜单反色填充特效

    交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...

  9. 23.纯 CSS 创作一个菜单反色填充特效

    原文地址:https://segmentfault.com/a/1190000014876348 HTML代码: <nav> <ul> <li><span&g ...

随机推荐

  1. Delphi XE5开发Android程序使用自定义字体文件.

    万事大吉,只欠根据字体文件(.ttf文件)切换阅读字体,通常Android系统只带三种以下字体.一般用Java/Eclipse开发的话比较简单,typeface的createFromAsset,cre ...

  2. 移动互联网终端的touch事件判断方向

    var pressX = 0, pressY = 0; document.body.addEventListener('touchmove', function(event) { // 如果这个元素的 ...

  3. 关于java中Static关键字的加强理解

    static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键字的用法和平常容易误解的地方,最后列 ...

  4. jquery tr:even,tr:eq(),tr:nth-child()区别

    jquery里面是不是搞不清楚,tr的选择器? $("tr:even"),$("tr:eq(2)"),$("tr:eq(3)"),$(&qu ...

  5. HTML代码优化中SEO要注意哪些细节

    本文来源于学业无忧网,转载请保留:http://www.ixywy.com/ 这段时间,我们翻阅了一些同行撰写的书.其中,几乎每本书都存在问题.这个肯定在所难免,但是作为一名职业的SEO更应该注意一些 ...

  6. go语言学习--map类型的切片

    今天在项目中遇到了一个切片的map,记录下map切片的使用 package main import "fmt" func main() { // Version A: items ...

  7. Mybatis 系列6-结合源码解析节点配置:objectFactory、databaseIdProvider、plugins、mappers

    [Mybatis 系列10-结合源码解析mybatis 执行流程] [Mybatis 系列9-强大的动态sql 语句] [Mybatis 系列8-结合源码解析select.resultMap的用法] ...

  8. Mybatis 系列3-结合源码解析properties节点和environments节点

    [Mybatis 系列10-结合源码解析mybatis 执行流程] [Mybatis 系列9-强大的动态sql 语句] [Mybatis 系列8-结合源码解析select.resultMap的用法] ...

  9. CRM 2016 一个IFrame页面,执行另一IFrame页面的函数

    如果IFrame_A  想执行 IFrame_B 中 RefreshSelf() 函数,可以按以下方法写: 此js代码写在 IFrame_A 中 parent.Xrm.Page.getControl( ...

  10. 在VMware安装Centos7

    1.新建虚拟机==>典型==>稍后安装操作系统==>选择linux==>centos 64位 2.填写虚拟机名字以及安装位置. 3.磁盘容量采用默认即可. 4. 自定义硬件: ...