CSS 写一个圣诞树 Chrome 浏览器小插件

作者：肥晨

2022-11-04
江苏
本文字数：1431 字
阅读完需：约 5 分钟

一时兴起，突然想写一个 Chrome 浏览器插件，不知道写啥，就写了一个圣诞树小插件。项目源码>>

Chrome 浏览器插件

manifest.json 配置

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"  }}

复制代码

重点字段：

名称：name
版本号：version
插件描述：description
插件图标：icons

圣诞树写法

让我们来拆分一下，圣诞树的主要结构。

圣诞树主要分为 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;        }

复制代码

效果图

发布于: 刚刚阅读数: 5

肥晨

关注

还未添加个人签名 2021-04-15 加入

平台：InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者领域：前端公众号：农民工前端

发布

暂无评论

创作场景

CSS 写一个圣诞树 Chrome 浏览器小插件

Chrome 浏览器插件

manifest.json 配置

圣诞树写法

五角星写法

树冠写法

树干写法

效果图

肥晨

评论