CSS写一个圣诞树Chrome浏览器小插件
一时兴起，突然想写一个Chrome浏览器插件，不知道写啥，就写了一个圣诞树小插件。项目源码>>
Chrome浏览器插件
Chrome浏览器插件最主要的是：index.html、manifest.json两个文件。
下面是manifest.json的简单配置：
{
"manifest_version": 2,
//名称
"name": "圣诞树",
//版本
"version": "1.0.0",
//描述
"description": "圣诞树插件",
"browser_action": {
"default_popup": "index.html"
},
//展示图标
"icons": {
"16": "img/24.png"
}}复制代码圣诞树写法
圣诞树主要分为3大结构：
五角星、树冠和树根
五角星写法
五角星我想到的最好的方法是由3个三角形组合成
开始的时候可以使用不同颜色 用于区分，后期统一颜色就好
.fivePointedStar {
width: 50px;
height: 50px;
display: flex;
padding: 50px;
position: relative;
z-index: 200;
}
.fivePointedStar div:nth-child(1) {
border: 20px solid rgba(255, 255, 255, 0);
border-width: 20px 30px;
border-top-color: #ffD700;
width: 0;
height: 0;
}
.fivePointedStar div:nth-child(2) {
border: 20px solid rgba(255, 255, 255, 0);
border-width: 20px 30px;
border-bottom-color: #ffD700;
width: 0;
height: 0;
position: relative;
transform: rotate(-35deg);
top: -20px;
left: -60px;
}
.fivePointedStar div:nth-child(3) {
border: 20px solid rgba(255, 255, 255, 0);
border-width: 20px 30px;
border-bottom-color: #ffD700;
width: 0;
height: 0;
position: relative;
transform: rotate(-111deg);
top: -5px;
left: -128px;
}树冠写法
树干的写法会更加简单一些，刚开始我想的是两种方式：
1.利用三角形堆叠（鄙人使用的就是这种）
2.使用三角形+圆角边框配合（会更加好看，但是费事费力）
部分代码：
.crownTree div {
border: 20px solid rgba(255, 255, 255, 0);
border-bottom-color: #093;
width: 0;
height: 0;
}
.crownTree div:nth-child(1) {
border-width: 50px 30px;
position: relative;
}
.crownTree div:nth-child(2) {
border-width: 60px 51px;
position: relative;
top: -90px;
left: -20px;
}树干写法
一个圆角矩形
/* 树根 */
.treeRoot {
width: 37px;
height: 47px;
border-radius: 12px;
border: #663300 1px solid;
background-color: #333300;
position: relative;
top: -771px;
left: 65px;
}
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2022-08-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录