云间玉兔,自出机抒,从零开始制作Web插件网页特效小兔子组件(小挂件widget),基于原生CSS/NPM-编程网

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

著意登楼瞻玉兔，何人张幕遮银阙？又到了一年一度的网页小挂件环节，以往我们都是集成别人开源的组件，但所谓熟读唐诗三百首，不会做诗也会吟，熟读了别人的东西，做几首打油诗也是可以的，但若不能自出机抒，却也成不了大事，所以本次我们从零开始制作属于自己的网页小挂件，博君一晒。

玉兔主题元素绘制

成本最低的绘制方式是使用纯CSS，不依赖任何图片和三方库，首先创建绘制容器：

<div id="rabbit_box">  
    
  
  
</div>

由于是小挂件，我们首先将容器固定在右下角：

#rabbit_box{  
  
    position: fixed;  
    bottom: var(--pos,5%);   
    right: 35px;   
    z-index: 99;   
    border: none;   
    outline: none;   
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  
  
  }

这里加了一层filter滤镜，可以让玉兔更加立体。

考虑到复用性和可移植性，将主题元素动态添加到容器中：

function rabbit_init(){  
  
    var container = document.getElementById("rabbit_box");  
  
    container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>';  
  
     
  
}  
  
rabbit_init()

这里玉兔元素由八个小组件构成，分别是头部，四肢，四爪，两只耳朵，眼睛，尾巴以及嘴。

随后设置CSS样式：

.rabbit .rabbit__body {  
    width: 4em;  
    height: 5.6em;  
    background: #F4F4F4;  
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  
    transform: rotate(-40deg);  
    box-shadow: inset -2.3em -2.7em 0 0 var(--theme-color,#D2DAEE);  
  }

兔子身体元素通过border-radius来获得圆润的曲线，同时使用transform旋转元素得到一个适合的角度。最后通过box-shadow属性来设置颜色，颜色可以自定义，如果没有自定义则使用默认值#D2DAEE，注意旋转角度需要指定单位：deg。

接着绘制头部：

.rabbit .rabbit__head {  
    position: absolute;  
    width: 4em;  
    height: 4.6em;  
    top: -2.5em;  
    left: -2em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;  
    transform: rotate(-120deg);  
    overflow: hidden;  
  }  
  .rabbit .rabbit__head:before {  
    content: "";  
    position: absolute;  
    width: 0.65em;  
    height: 0.5em;  
    top: -0.1em;  
    left: 1.8em;  
    background: #F97996;  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform: rotate(130deg);  
  }  
  .rabbit .rabbit__head:after {  
    content: "";  
    position: absolute;  
    width: 1em;  
    height: 1em;  
    top: 1.5em;  
    left: 1.6em;  
    background: #F4F4F4;  
    border-radius: 50%;  
    box-shadow: inset 0.1em 0.15em 0 0.37em #e2262e;  
  }

这里通过::before 和 ::after 伪元素在兔子头部元素的前面或后面插入内容，头部前面绘制兔嘴，后面则插入兔子眼睛，之所以这样控制，是因为可以灵活的使用box-shadow填充颜色。

接着绘制耳朵：

.rabbit .rabbit__ear {  
    position: absolute;  
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;  
    transform-origin: 50% 100%;  
  }  
  .rabbit .rabbit__ear--left {  
    width: 2.2em;  
    height: 4.7em;  
    top: -5.7em;  
    left: -0.2em;  
    background: #F3E3DE;  
    transform: rotate(60deg);  
    box-shadow: inset 0.3em -0.4em 0 -0.1em var(--theme-color,#c7d1ea);  
    -webkit-animation: ear-left 3s infinite ease-out;  
            animation: ear-left 3s infinite ease-out;  
  }  
  .rabbit .rabbit__ear--right {  
    width: 2em;  
    height: 4.7em;  
    top: -5.5em;  
    left: -0.7em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(20deg);  
    -webkit-animation: ear-right 3s infinite ease-out;  
            animation: ear-right 3s infinite ease-out;  
  }

@-webkit-keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
    
  @keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
  @-webkit-keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }  
  @keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }

这里通过-webkit-animation属性让兔子左右耳在3秒内进行来回摆动，达到一种动态效果，注意左耳内侧颜色固定为：#F3E3DE，同时动画会影响元素的布局，需要注意元素的宽高。

最后就是四肢和尾巴：

.rabbit .rabbit__leg {  
    position: absolute;  
  }  
  .rabbit .rabbit__leg--one {  
    width: 0.8em;  
    height: 3em;  
    top: 2.3em;  
    left: 0.2em;  
    background: var(--theme-color,#c7d1ea);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(15deg);  
  }  
  .rabbit .rabbit__leg--one:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--three {  
    width: 0.9em;  
    height: 3em;  
    top: 2.4em;  
    left: 0.7em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--three:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--two {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.7em;  
    left: 1.6em;  
    background: #c7d1ea;  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--two:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--four {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.8em;  
    left: 2.1em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--four:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__tail {  
    position: absolute;  
    width: 0.9em;  
    height: 0.9em;  
    top: 3.7em;  
    left: 4em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(25deg);  
  }  
  .rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {  
    content: "";  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    background: var(--theme-color,#D2DAEE);  
    border-radius: 50%;  
  }  
  .rabbit .rabbit__tail:before {  
    top: 0;  
    left: -50%;  
  }  
  .rabbit .rabbit__tail:after {  
    top: 50%;  
    left: 0;  
  }

这里四肢和四爪的颜色应该有差异，四肢颜色可以自定义，四爪固定为白色，以达到“四蹄踏雪”的效果。

接着改造初始化函数，使其可以动态更改颜色：

function rabbit_init(color=null,pos=null){  
  
    var container = document.getElementById("rabbit_box");  
  
    container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>';  
  
    if(color != null){  
  
        document.documentElement.style.setProperty("--theme-color",color);  
  
    }  
    if(pos != null){  
  
        document.documentElement.style.setProperty("--pos",pos);  
  
    }  
  
}  
  
rabbit_init("pink")

最终效果：

云间玉兔,自出机抒,从零开始制作Web插件网页特效小兔子组件(小挂件widget),基于原生CSS/NPM

开源发布

现在我们将这个开源特效打包上线，首先创建项目目录：

mkdir%20rabbit

随后将特效的样式CSS代码以及JS代码分别抽离出来：rabbit.css:

.rabbit%20{%20%20
%20%20%20%20position:%20relative;%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__body%20{%20%20
%20%20%20%20width:%204em;%20%20
%20%20%20%20height:%205.6em;%20%20
%20%20%20%20background:%20#F4F4F4;%20%20
%20%20%20%20border-radius:%2050%%2050%%2050%%2050%/60%%2060%%2040%%2040%;%20%20
%20%20%20%20transform:%20rotate(-40deg);%20%20
%20%20%20%20box-shadow:%20inset%20-2.3em%20-2.7em%200%200%20var(--theme-color,#D2DAEE);%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__head%20{%20%20
%20%20%20%20position:%20absolute;%20%20
%20%20%20%20width:%204em;%20%20
%20%20%20%20height:%204.6em;%20%20
%20%20%20%20top:%20-2.5em;%20%20
%20%20%20%20left:%20-2em;%20%20
%20%20%20%20background:%20var(--theme-color,#e1e6f4);%20%20
%20%20%20%20border-radius:%2050%%2050%%2050%%2050%/65%%2060%%2040%%2035%;%20%20
%20%20%20%20transform:%20rotate(-120deg);%20%20
%20%20%20%20overflow:%20hidden;%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__head:before%20{%20%20
%20%20%20%20content:%20"";%20%20
%20%20%20%20position:%20absolute;%20%20
%20%20%20%20width:%200.65em;%20%20
%20%20%20%20height:%200.5em;%20%20
%20%20%20%20top:%20-0.1em;%20%20
%20%20%20%20left:%201.8em;%20%20
%20%20%20%20background:%20#F97996;%20%20
%20%20%20%20border-radius:%2050%%2050%%2050%%2050%/30%%2030%%2070%%2070%;%20%20
%20%20%20%20transform:%20rotate(130deg);%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__head:after%20{%20%20
%20%20%20%20content:%20"";%20%20
%20%20%20%20position:%20absolute;%20%20
%20%20%20%20width:%201em;%20%20
%20%20%20%20height:%201em;%20%20
%20%20%20%20top:%201.5em;%20%20
%20%20%20%20left:%201.6em;%20%20
%20%20%20%20background:%20#F4F4F4;%20%20
%20%20%20%20border-radius:%2050%;%20%20
%20%20%20%20box-shadow:%20inset%200.1em%200.15em%200%200.37em%20#e2262e;%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__ear%20{%20%20
%20%20%20%20position:%20absolute;%20%20
%20%20%20%20border-radius:%2050%%2050%%2050%%2050%/40%%2040%%2060%%2060%;%20%20
%20%20%20%20transform-origin:%2050%%20100%;%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__ear--left%20{%20%20
%20%20%20%20width:%202.2em;%20%20
%20%20%20%20height:%204.7em;%20%20
%20%20%20%20top:%20-5.7em;%20%20
%20%20%20%20left:%20-0.2em;%20%20
%20%20%20%20background:%20#F3E3DE;%20%20
%20%20%20%20transform:%20rotate(60deg);%20%20
%20%20%20%20box-shadow:%20inset%200.3em%20-0.4em%200%20-0.1em%20var(--theme-color,#c7d1ea);%20%20
%20%20%20%20-webkit-animation:%20ear-left%203s%20infinite%20ease-out;%20%20
%20%20%20%20%20%20%20%20%20%20%20%20animation:%20ear-left%203s%20infinite%20ease-out;%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__ear--right%20{%20%20
%20%20%20%20width:%202em;%20%20
%20%20%20%20height:%204.7em;%20%20
%20%20%20%20top:%20-5.5em;%20%20
%20%20%20%20left:%20-0.7em;%20%20
%20%20%20%20background:%20var(--theme-color,#D2DAEE);%20%20
%20%20%20%20transform:%20rotate(20deg);%20%20
%20%20%20%20-webkit-animation:%20ear-right%203s%20infinite%20ease-out;%20%20
%20%20%20%20%20%20%20%20%20%20%20%20animation:%20ear-right%203s%20infinite%20ease-out;%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__leg%20{%20%20
%20%20%20%20position:%20absolute;%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__leg--one%20{%20%20
%20%20%20%20width:%200.8em;%20%20
%20%20%20%20height:%203em;%20%20
%20%20%20%20top:%202.3em;%20%20
%20%20%20%20left:%200.2em;%20%20
%20%20%20%20background:%20var(--theme-color,#c7d1ea);%20%20
%20%20%20%20border-radius:%2050%%2050%%2050%%2050%/30%%2030%%2070%%2070%;%20%20
%20%20%20%20transform-origin:%2050%%200%;%20%20
%20%20%20%20transform:%20rotate(15deg);%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__leg--one:before%20{%20%20
%20%20%20%20content:%20"";%20%20
%20%20%20%20position:%20absolute;%20%20
%20%20%20%20width:%200.8em;%20%20
%20%20%20%20height:%200.5em;%20%20
%20%20%20%20top:%202.6em;%20%20
%20%20%20%20left:%20-0.2em;%20%20
%20%20%20%20background:%20#f3f6ff;%20%20
%20%20%20%20border-radius:%2050%%2050%%2050%%2050%/70%%2070%%2030%%2030%;%20%20
%20%20%20%20transform:%20rotate(-10deg);%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__leg--three%20{%20%20
%20%20%20%20width:%200.9em;%20%20
%20%20%20%20height:%203em;%20%20
%20%20%20%20top:%202.4em;%20%20
%20%20%20%20left:%200.7em;%20%20
%20%20%20%20background:%20var(--theme-color,#e1e6f4);%20%20
%20%20%20%20border-radius:%2050%%2050%%2050%%2050%/30%%2030%%2070%%2070%;%20%20
%20%20%20%20transform-origin:%2050%%200%;%20%20
%20%20%20%20transform:%20rotate(10deg);%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__leg--three:before%20{%20%20
%20%20%20%20content:%20"";%20%20
%20%20%20%20position:%20absolute;%20%20
%20%20%20%20width:%200.8em;%20%20
%20%20%20%20height:%200.5em;%20%20
%20%20%20%20top:%202.6em;%20%20
%20%20%20%20left:%20-0.2em;%20%20
%20%20%20%20background:%20#f3f6ff;%20%20
%20%20%20%20border-radius:%2050%%2050%%2050%%2050%/70%%2070%%2030%%2030%;%20%20
%20%20%20%20transform:%20rotate(-10deg);%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__leg--two%20{%20%20
%20%20%20%20width:%202.6em;%20%20
%20%20%20%20height:%203.6em;%20%20
%20%20%20%20top:%201.7em;%20%20
%20%20%20%20left:%201.6em;%20%20
%20%20%20%20background:%20#c7d1ea;%20%20
%20%20%20%20border-radius:%2050%%2050%%2050%%2050%/50%%2050%%2050%%2050%;%20%20
%20%20%20%20transform-origin:%2050%%200%;%20%20
%20%20%20%20transform:%20rotate(10deg);%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__leg--two:before%20{%20%20
%20%20%20%20content:%20"";%20%20
%20%20%20%20position:%20absolute;%20%20
%20%20%20%20width:%201.6em;%20%20
%20%20%20%20height:%200.8em;%20%20
%20%20%20%20top:%203.05em;%20%20
%20%20%20%20left:%200em;%20%20
%20%20%20%20background:%20#f3f6ff;%20%20
%20%20%20%20border-radius:%2050%%2050%%2050%%2050%/70%%2070%%2030%%2030%;%20%20
%20%20%20%20transform:%20rotate(-10deg);%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__leg--four%20{%20%20
%20%20%20%20width:%202.6em;%20%20
%20%20%20%20height:%203.6em;%20%20
%20%20%20%20top:%201.8em;%20%20
%20%20%20%20left:%202.1em;%20%20
%20%20%20%20background:%20var(--theme-color,#e1e6f4);%20%20
%20%20%20%20border-radius:%2050%%2050%%2050%%2050%/50%%2050%%2050%%2050%;%20%20
%20%20%20%20transform-origin:%2050%%200%;%20%20
%20%20%20%20transform:%20rotate(10deg);%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__leg--four:before%20{%20%20
%20%20%20%20content:%20"";%20%20
%20%20%20%20position:%20absolute;%20%20
%20%20%20%20width:%201.6em;%20%20
%20%20%20%20height:%200.8em;%20%20
%20%20%20%20top:%203.05em;%20%20
%20%20%20%20left:%200em;%20%20
%20%20%20%20background:%20#f3f6ff;%20%20
%20%20%20%20border-radius:%2050%%2050%%2050%%2050%/70%%2070%%2030%%2030%;%20%20
%20%20%20%20transform:%20rotate(-10deg);%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__tail%20{%20%20
%20%20%20%20position:%20absolute;%20%20
%20%20%20%20width:%200.9em;%20%20
%20%20%20%20height:%200.9em;%20%20
%20%20%20%20top:%203.7em;%20%20
%20%20%20%20left:%204em;%20%20
%20%20%20%20background:%20var(--theme-color,#D2DAEE);%20%20
%20%20%20%20transform:%20rotate(25deg);%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__tail:after,%20.rabbit%20.rabbit__tail:before%20{%20%20
%20%20%20%20content:%20"";%20%20
%20%20%20%20position:%20absolute;%20%20
%20%20%20%20width:%20100%;%20%20
%20%20%20%20height:%20100%;%20%20
%20%20%20%20background:%20var(--theme-color,#D2DAEE);%20%20
%20%20%20%20border-radius:%2050%;%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__tail:before%20{%20%20
%20%20%20%20top:%200;%20%20
%20%20%20%20left:%20-50%;%20%20
%20%20}%20%20
%20%20.rabbit%20.rabbit__tail:after%20{%20%20
%20%20%20%20top:%2050%;%20%20
%20%20%20%20left:%200;%20%20
%20%20}%20%20
%20%20%20%20
%20%20@-webkit-keyframes%20ear-left%20{%20%20
%20%20%20%200%,%2020%,%20100%%20{%20%20
%20%20%20%20%20%20transform:%20rotate(40deg);%20%20
%20%20%20%20}%20%20
%20%20%20%2010%,%2030%,%2080%%20{%20%20
%20%20%20%20%20%20transform:%20rotate(45deg);%20%20
%20%20%20%20}%20%20
%20%20%20%2090%%20{%20%20
%20%20%20%20%20%20transform:%20rotate(50deg);%20%20
%20%20%20%20}%20%20
%20%20}%20%20
%20%20%20%20
%20%20@keyframes%20ear-left%20{%20%20
%20%20%20%200%,%2020%,%20100%%20{%20%20
%20%20%20%20%20%20transform:%20rotate(40deg);%20%20
%20%20%20%20}%20%20
%20%20%20%2010%,%2030%,%2080%%20{%20%20
%20%20%20%20%20%20transform:%20rotate(45deg);%20%20
%20%20%20%20}%20%20
%20%20%20%2090%%20{%20%20
%20%20%20%20%20%20transform:%20rotate(50deg);%20%20
%20%20%20%20}%20%20
%20%20}%20%20
%20%20@-webkit-keyframes%20ear-right%20{%20%20
%20%20%20%200%,%2020%,%20100%%20{%20%20
%20%20%20%20%20%20transform:%20rotate(10deg);%20%20
%20%20%20%20}%20%20
%20%20%20%2010%,%2030%,%2080%%20{%20%20
%20%20%20%20%20%20transform:%20rotate(5deg);%20%20
%20%20%20%20}%20%20
%20%20%20%2090%%20{%20%20
%20%20%20%20%20%20transform:%20rotate(0deg);%20%20
%20%20%20%20}%20%20
%20%20}%20%20
%20%20@keyframes%20ear-right%20{%20%20
%20%20%20%200%,%2020%,%20100%%20{%20%20
%20%20%20%20%20%20transform:%20rotate(10deg);%20%20
%20%20%20%20}%20%20
%20%20%20%2010%,%2030%,%2080%%20{%20%20
%20%20%20%20%20%20transform:%20rotate(5deg);%20%20
%20%20%20%20}%20%20
%20%20%20%2090%%20{%20%20
%20%20%20%20%20%20transform:%20rotate(0deg);%20%20
%20%20%20%20}%20%20
%20%20}%20%20
%20%20
%20%20#rabbit_box{%20%20
%20%20
%20%20%20%20position:%20fixed;%20%20
%20%20%20%20bottom:%20var(--pos,5%);%20%20%20
%20%20%20%20right:%2035px;%20%20%20
%20%20%20%20z-index:%2099;%20%20%20
%20%20%20%20border:%20none;%20%20%20
%20%20%20%20outline:%20none;%20%20%20
%20%20%20%20filter:%20drop-shadow(3px%205px%202px%20rgb(0%200%200%20/%200.4));%20%20
%20%20
%20%20}

rabbit.js代码：

(function%20(name,%20context,%20fn)%20{%20%20
%20%20%20%20if%20(typeof%20module%20!=%20'undefined'%20&&%20module.exports)%20{%20%20
%20%20%20%20%20%20%20%20//%20Node%20环境%20%20
%20%20%20%20%20%20%20%20module.exports%20=%20fn();%20%20
%20%20%20%20}%20else%20if%20(typeof%20context['define']%20==%20'function'%20&&%20(context['define']['amd']%20||%20context['define']['cmd']))%20{%20%20
%20%20%20%20%20%20%20%20//%20Require.js%20或%20Sea.js%20环境%20%20
%20%20%20%20%20%20%20%20define(fn);%20%20
%20%20%20%20}%20else%20{%20%20
%20%20%20%20%20%20%20%20//%20client%20环境%20%20
%20%20%20%20%20%20%20%20context[name]%20=%20fn();%20%20
%20%20%20%20}%20%20
})('rabbit_init',%20this,%20function%20()%20{%20%20
%20%20%20%20return%20function%20(color=null,pos=null)%20{%20%20
%20%20%20%20%20%20%20%20%20%20
%20%20
%20%20%20%20%20%20%20%20var%20container%20=%20document.getElementById("rabbit_box");%20%20
%20%20
%20%20%20%20container.innerHTML%20=%20'<div%20class="rabbit"><div%20class="rabbit__leg%20rabbit__leg--one"></div><div%20class="rabbit__leg%20rabbit__leg--two"></div><div%20class="rabbit__tail"></div><div%20class="rabbit__body"></div><div%20class="rabbit__leg%20rabbit__leg--three"></div><div%20class="rabbit__leg%20rabbit__leg--four"></div><div%20class="rabbit__ear%20rabbit__ear--right"></div><div%20class="rabbit__head"></div><div%20class="rabbit__ear%20rabbit__ear--left"></div></div>';%20%20
%20%20
%20%20%20%20if(color%20!=%20null){%20%20
%20%20
%20%20%20%20%20%20%20%20document.documentElement.style.setProperty("--theme-color",color);%20%20
%20%20
%20%20%20%20}%20%20
%20%20%20%20if(pos%20!=%20null){%20%20
%20%20
%20%20%20%20%20%20%20%20document.documentElement.style.setProperty("--pos",pos);%20%20
%20%20
%20%20%20%20}%20%20
%20%20
%20%20
%20%20%20%20}%20%20
});

保存在项目的lib目录。

首先将项目提交到Github:%20github.com/zcxey2911/r…

随后运行命令填写NPM配置：

npm%20init

entry%20point%20配置项填写你的入口文件：

entry%20point:%20./lib/rabbit.js

登录NPM账号，随后发布：

npm%20login%20%20
npm%20publish

登录之前，最好将切换回默认源，否则无法登录：

npm%20config%20set%20registry=https://registry.npmjs.com

发布成功后，查看发布内容：www.npmjs.com/package/rab…

开源库引入和使用

首先需要引入模块，可以使用%20CDN%20直接引入或者通过%20NPM%20包的形式安装。

直接引入：

<!--%20https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.css%20-->%20%20
<!--%20https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.js%20-->%20%20
%20%20
<link%20%20
%20%20rel="stylesheet"%20%20
%20%20href="https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.css"%20%20
/>%20%20
%20%20
<div%20id="rabbit_box">%20%20
</div>%20%20
%20%20
<script>%20%20
%20%20
function%20init_rabbit(){%20%20
%20%20
%20rabbit_init("pink","20%");%20%20//%20粉色%20高度20%%20%20
%20%20
%20//rabbit_init();%20//默认颜色%20默认位置%20%20
%20%20
}%20%20
%20%20
</script>%20%20
%20%20
%20%20
<script%20%20
%20%20async%20%20
%20%20onload="init_rabbit()"%20%20
%20%20src="https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.js"%20%20
></script>

NPM%20包的形式安装：

//%20npm%20install%20--save%20rabbit-widget%20%20
import%20'rabbit-widget/lib/rabbit.css';%20%20
%20%20
var%20rabbit_init%20=%20require('rabbit-widget');%20%20
%20%20
rabbit_init();

如果使用NPM导入模块的形式引入，请确保页面加载完毕之后执行再执行rabbit_init();，否则会报错：Uncaught%20TypeError:%20Cannot%20set%20properties%20of%20null%20(setting%20'innerHTML')。

这里以Vue.js3.0组件为例子：

<template>%20%20
%20%20<a-layout%20class="layout">%20%20
%20%20%20%20<a-layout-header>%20%20
%20%20%20%20%20%20<div%20class="logo"%20/>%20%20
%20%20
%20%20%20%20%20%20<ad_header%20/>%20%20
%20%20%20%20%20%20%20%20
%20%20
%20%20
%20%20%20%20</a-layout-header>%20%20
%20%20%20%20<a-layout-content%20style="padding:%200%2050px">%20%20
%20%20%20%20%20%20<a-breadcrumb%20style="margin:%2016px%200">%20%20
%20%20%20%20%20%20%20%20<a-breadcrumb-item>广告平台</a-breadcrumb-item>%20%20
%20%20%20%20%20%20%20%20<a-breadcrumb-item>首页</a-breadcrumb-item>%20%20
%20%20
%20%20%20%20%20%20</a-breadcrumb>%20%20
%20%20%20%20%20%20<div%20:style="{%20background:%20'#fff',%20padding:%20'24px',%20minHeight:%20'280px'%20}">%20%20
%20%20
%20%20
%20%20%20%20%20%20%20%20这里是首页%20%20
%20%20
%20%20
%20%20%20%20%20%20%20%20<div%20id="rabbit_box"></div>%20%20
%20%20
%20%20
%20%20%20%20</div>%20%20
%20%20%20%20</a-layout-content>%20%20
%20%20%20%20<a-layout-footer%20style="text-align:%20center">%20%20
%20%20%20%20%20%20在线广告平台%20%20
%20%20%20%20</a-layout-footer>%20%20
%20%20</a-layout>%20%20
</template>%20%20
%20%20
<script>%20%20
%20%20
import%20ad_header%20from%20'./ad_header';%20%20
%20%20
import%20'rabbit-widget/lib/rabbit.css';%20%20
%20%20
var%20rabbit_init%20=%20require('rabbit-widget');%20%20
%20%20
%20%20
export%20default%20{%20%20
%20data()%20{%20%20
%20%20%20%20return%20{%20%20
%20%20
%20%20%20%20%20%20%20
%20%20
%20%20%20%20}%20%20
%20%20},%20%20
%20%20//声明子组件%20%20
%20%20components:{%20%20
%20%20
%20%20%20%20'ad_header':ad_header%20%20
%20%20
%20%20
%20%20},%20%20
%20%20methods:{%20%20
%20%20
%20%20%20%20%20
%20%20
%20%20
%20%20},%20%20
%20%20created(){%20%20
%20%20
%20%20
%20%20%20%20this.$nextTick(()%20=>%20{%20%20
%20%20%20%20console.log("页面加载完啦~")%20%20
%20%20
%20%20%20%20rabbit_init();%20%20
})%20%20
%20%20
%20%20
%20%20}%20%20
%20%20
}%20%20
</script>%20%20
<style>%20%20
.site-layout-content%20{%20%20
%20%20min-height:%20280px;%20%20
%20%20padding:%2024px;%20%20
%20%20background:%20#fff;%20%20
}%20%20
#components-layout-demo-top%20.logo%20{%20%20
%20%20float:%20left;%20%20
%20%20width:%20120px;%20%20
%20%20height:%2031px;%20%20
%20%20margin:%2016px%2024px%2016px%200;%20%20
%20%20background:%20rgba(255,%20255,%20255,%200.3);%20%20
}%20%20
.ant-row-rtl%20#components-layout-demo-top%20.logo%20{%20%20
%20%20float:%20right;%20%20
%20%20margin:%2016px%200%2016px%2024px;%20%20
}%20%20
%20%20
[data-theme='dark']%20.site-layout-content%20{%20%20
%20%20background:%20#141414;%20%20
}%20%20
</style>

项目中引入效果：

结语

奉上项目代码，与众亲同飨:github.com/zcxey2911/r… www.npmjs.com/package/rab… ，最后祝各位乡亲祥瑞玉兔，人机平安，愿诸君2023年武运昌隆，前端一统。

云间玉兔,自出机抒,从零开始制作Web插件网页特效小兔子组件(小挂件widget),基于原生CSS/NPM

玉兔主题元素绘制

结语

相关专题