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大结构:

1.png

 

 

五角星、树冠和树根

五角星写法

五角星我想到的最好的方法是由3个三角形组合成

2.png

开始的时候可以使用不同颜色 用于区分,后期统一颜色就好

3.png

<!-- 五角星 -->
<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;
        }

效果图

4.png

 

目录
相关文章
|
13天前
|
人工智能 程序员 测试技术
AI编程:Coze + Cursor实现一个思维导图的浏览器插件
本文是小卷关于AI编程工具学习的第3篇文章,通过开发一个思维导图生成工具,详细介绍了AI编程的完整流程。从需求分析、插件选择(如Coze的TreeMind),到创建测试工作流、发布API,再到整合API和开发浏览器插件,最终实现了用户选中文字后生成思维导图的功能。文章展示了如何利用现有工具高效开发,并总结了AI编程的优势与未来趋势。
95 14
|
30天前
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
139 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
1月前
|
Web App开发 存储 开发者
Chrome 插件上架发布全流程指南
浏览器插件开发完以后,要发布到 Chrome Web Store上,也是需要颇费一番周折的,本文就从注册账号开始,一直到最后发布上架的全流程进行指导,希望帮助你提供一些经验,避免踩坑,耗时耗力。
249 8
|
1月前
|
Web App开发 搜索推荐 开发者
浏览器插件上架指南:如何把你的产品搬上浏览器插件市场
在实践了 Chrone、Firefox、Edge、Opera 等 几个主要的插件平台的上架发布工作后,我觉得很有必要把这个过程和思考记录下来,分享给大家,希望能提供一些参考和避坑的经验。我想通过这篇文章,和大家聊聊「为什么我要做这件事」,以及「这个系列文章会包含哪些内容」。我想用一个系列的文章,记录我是如何把 EmojiClick 搬到浏览器插件市场的,也给大家提供一些借鉴经验。
85 19
|
1月前
|
Web App开发 安全 前端开发
一个接口4个步骤轻松搞定最新版Chrome、Edge、Firefox浏览器集成ActiveX控件
目前的浏览器市场,谷歌浏览器占据了半壁江山,因此,谷歌也是最有话语权的,2015年开始取消支持 NPAPI 插件,2022 年10月停止支持 PPAPI 插件;而曾经老大哥IE浏览器也已停止服务,退出历史舞台,导致大量曾经安全、便捷的ActiveX控件无法使用。为了解决这个难题,本人特研发出allWebPlugin中间件,重新让所有ActiveX控件能在谷歌、火狐等浏览器使用。
|
1月前
|
Web App开发 数据采集 JavaScript
Chrome浏览器实例的TypeScript自动化脚本
Chrome浏览器实例的TypeScript自动化脚本
|
2月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
34 2
|
2月前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
2月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
72 21
|
3月前
|
前端开发
纯css3经典列表式手风琴插件
这是一款十分经典的纯css3列表手风琴插件。该插件使用css兄弟选择器和:target伪类来实现。

热门文章

最新文章