0
点赞
收藏
分享

微信扫一扫

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



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


 五角星、树冠和树根

五角星写法

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

 

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

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

 

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



<!-- 五角星 -->



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



效果图

 

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

举报

相关推荐

0 条评论