java实现展示框,如何使用纯CSS实现蝴蝶标本的展示框效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现蝴蝶标本的展示框效果 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
效果预览
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器表示整只蝴蝶,因为蝴蝶是对称的,所以分为左右两边,每边有 3 个子元素:
居中显示: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);
}
大功告成!
相关推荐:如何使用纯CSS实现单元素麦当劳的Logo(附源码)
java实现展示框,如何使用纯CSS实现蝴蝶标本的展示框效果相关推荐
- 用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法 发布时间:2020-10-26 09:30:20 来源:亿速云 阅读:104 作者:小新 小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
- css三实现ui,纯CSS实现常见的UI效果
原标题:纯CSS实现常见的UI效果 转自:掘金 - alphardex 前言 切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...
- 【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
- css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
- html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
- 纯CSS实现3D正方体动画效果
目录 前言 正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化 总结 前言 纯CSS实现3D正方体动画效果,此方法是通过transf ...
- html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...
- html如何实现立体效果,纯css实现立体摆放图片效果的实例代码
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
最新文章
- Go 知识点(18)— 条件编译(编译标签、文件后缀)
- Web架构师必备能力
- 基于Live555的多路视频流的流媒体服务器框架
- ubuntu linux的特点,16个新特性,让你爱上Ubuntu 20.04,
- NABC框架的创意之校园导航。
- js加版本号 webpack_webpack脚手架增加版本号
- 蓝桥杯历届试题----分糖果(模拟)
- 配置tomcat用户
- sequelize 外键关联_用Sequelize计算关联条目
- 一个LinkedList的简单体现(用户缓存手机通话记录)
- celery配合rabbitmq任务队列实现任务的异步调度执行[celery redis]
- java文件写入blob_java程序向IQ写入blob(image)类型数据问题的解决
- python word库_Python|利用第三方库编辑word的基本操作
- HBuilderX日常踩坑之隐私合规检测
- TPS的几种计算方式
- 宝塔linux面板命令大全
- web前端开发之vue基础
- Exchange 2010无法创建DAG第二个成员
- 学习总结之ETH OAM:Y.1731与CFM
- 豆豆趣事[2016年10月]
热门文章
- c语言求满足不等式的最小值,高手请进,请教一道简单的c语言题!
- MVVM下拉框绑定触发事件
- python 哈希表_数据结构-7 哈希表
- 站群服务器和虚拟主机的区别,WordPress虚拟主机与站群服务器之间有什么关系 - WordPress 多站点站群...
- python程序弹出输入框_尝试使Kivy按钮弹出一个文本框
- mysql结果行数_取得数据库结果集中的行数
- php判断是不是iphone访问,php基于http协议访问,判断访问来源iphone,android,微信浏览器,pc电脑...
- html清除视频缓存,html清除页面缓存
- lcl手术和飞秒区别_想知道自己适合哪种近视手术?Mark!
- 1小时搞懂设计模式之原型模式