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 ...
随机推荐
- vue cli 配置信息说明
摘自csdn http://blog.csdn.net/hongchh/article/details/55113751
- github简单命令
1.安装yum install -y git 2.配置帐户(github.com注册)git config --global user.name goozgkgit config --global u ...
- SpringBoot使用redis缓存List
一.概述 最近在做性能优化,之前有一个业务是这样实现的: 1.温度报警后第三方通讯管理机直接把报警信息保存到数据库: 2.我们在数据库中添加触发器,(BEFORE INSERT)根据这条报警信息处理业 ...
- code block自动生成makefile
安装插件 http://developer.berlios.de/projects/cbmakegen/ 然后会在project菜单下面有一个Generate Makefile的选项 点击就行了 如 ...
- 阿里云服务器 ECS Linux操作系统加固
1. 账号和口令 1.1 禁用或删除无用账号 减少系统无用账号,降低安全风险. 操作步骤 使用命令 userdel <用户名> 删除不必要的账号. 使用命令 passwd -l <用 ...
- 关于requests的session方法保持不了cookie的问题。(seesion的意思是保持一个会话,比如 登陆后继续操作(记录身份信息) 而requests是单次请求的请求,身份信息不会被记录)
最近在做爬虫的时候遇到了一个问题,在用requests的session方法保持cookie的时候发现requests不能保持手动构建的cookie.起初以为requests只能自动保持由服务器返回的s ...
- Scrapy实战篇(八)之Scrapy对接selenium爬取京东商城商品数据
本篇目标:我们以爬取京东商城商品数据为例,展示Scrapy框架对接selenium爬取京东商城商品数据. 背景: 京东商城页面为js动态加载页面,直接使用request请求,无法得到我们想要的商品数据 ...
- 给VMware下的Linux扩容磁盘空间到根分区(以centos7.0为例)
一.扩展VMWare硬盘空间 关闭Vmware 的 Linux系统,这样,才能在VMWare菜单中设置: VM -> Settings... -> Hardware -> Hard ...
- kickstart
关闭防火墙.关闭selinux 1.配置DHCP服务 # yum install dhcp -y dhcp配置文件如下 # vi /etc/dhcp/dhcpd.conf 查看路径 # rpm -ql ...
- servlet简单的小例子
去我云盘下载: https://pan.baidu.com/s/1E2yoZ2Nmk2FE2XjuPOCvjA 访问方式:http://localhost:8080/testServlet/index ...