一时兴起，突然想写一个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个三角形组合成
开始的时候可以使用不同颜色 用于区分，后期统一颜色就好
<!-- 五角星 --> <div class="fivePointedStar"> <div></div> <div></div> <div></div> </div> .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; }
效果图
