介绍 & lt; div类=癰utterfly"比;
& lt; div类=發eft"祝辞
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt;/div>
& lt; div类=皉ight"祝辞
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt;/div>
& lt;/div> 身体{
保证金:0;
身高:100 vh;
显示:flex;
对齐项目:中心;
justify-content:中心;
背景:线性渐变(灰色,浅黄色、灰色);
} 。蝴蝶{
位置:相对;
宽度:10 em;
高度:10 em;
} 。蝴蝶.left {
位置:绝对的;
宽度:继承;
高度:继承;
} 。蝴蝶跨度{
位置:绝对的;
这个特性:50%;
}
.butterfly跨度:nth-child (1) {
宽度:5 em;
高度:7他们;
background - color:黄金;
} 。蝴蝶跨度:nth-child (2) {
宽度:5.5 em;
高度:3.5 em;
背景颜色:橘红色;
上图:5 em;
左:-2.5 em;
过滤器:透明度(0.6);
} 。蝴蝶跨度:nth-child (3) {
宽度:6 em;
身高:6 em;
边境:0.3 em固体橙红色;
上图:-0.5 em;
} 。蝴蝶铃声{
位置:绝对的;
宽度:继承;
高度:继承;
}
.butterfly铃声{
变换:rotateY(180度)旋转(-90度);
上图:0.4 em;
左:0.4 em;
} 。蝴蝶::{之前
内容:& # 39;& # 39;;
位置:绝对的;
box-sizing: border-box;
上图:-2.5 em;
左:8 em;
宽度:24 em;
高度:18 em;
背景颜色:黑色;
边界:0.2 em插图银;
}
{后.butterfly::
内容:& # 39;& # 39;;
位置:绝对的;
box-sizing: border-box;
宽度:40 em;
高度:30 em;
背景颜色:浅黄色;
上图:9 em;
左:-16 em;
边界:2 em固体原木色;
border - radius: 3他们;
不必:
0 0.4 0.3 em 2 em em rgba (0, 0, 0, 0.3),
插图0.4 em 0.4 em 0.1 em 0.5 em rgba (0, 0, 0。4);
z - index: 1;
} 。蝴蝶{
变换:translateX (1 em);
}
使用纯CSS实现蝴蝶标本展示框效果?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
效果预览
源代码下载
每日前端实战系列的全部源代码请从github下载:https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom,容器表示整只蝴蝶,因为蝴蝶是对称的,所以分为左右两边,每边有三个子元素:
居中显示:
定义蝴蝶的尺寸:
先画左半边:
用第1个子元素画出翅膀的上半部分:
用第2个子元素画出翅膀的下半部分:
用第三个子元素画出触角:
把左半边复制一份到右半边:
把标本装到展示框里:
最后,调整一下因图案倾斜引起的位移:
感谢各位的阅读!看完上述内容,你们对使用纯CSS实现蝴蝶标本展示框效果大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
