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

玉兔主题元素绘制

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

  1. <div id="rabbit_box">  
  3. </div>

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

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

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

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

  1. function rabbit_init(){  
  3.     var container = document.getElementById("rabbit_box");  
  5.     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>';  
  7. }  
  9. rabbit_init()

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

随后设置CSS样式：

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

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

接着绘制头部：

  1. .rabbit .rabbit__head {
  2.     position: absolute;
  3.     width: 4em;
  4.     height: 4.6em;
  5.     top: -2.5em;
  6.     left: -2em;
  7.     background: var(--theme-color,#e1e6f4);
  8.     border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;
  9.     transform: rotate(-120deg);
  10.     overflow: hidden;
  11.   }
  12.   .rabbit .rabbit__head:before {
  13.     content: "";
  14.     position: absolute;
  15.     width: 0.65em;
  16.     height: 0.5em;
  17.     top: -0.1em;
  18.     left: 1.8em;
  19.     background: #F97996;
  20.     border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
  21.     transform: rotate(130deg);
  22.   }
  23.   .rabbit .rabbit__head:after {
  24.     content: "";
  25.     position: absolute;
  26.     width: 1em;
  27.     height: 1em;
  28.     top: 1.5em;
  29.     left: 1.6em;
  30.     background: #F4F4F4;
  31.     border-radius: 50%;
  32.     box-shadow: inset 0.1em 0.15em 0 0.37em #e2262e;
  33.   }

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

接着绘制耳朵：

  1. .rabbit .rabbit__ear {
  2.     position: absolute;
  3.     border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
  4.     transform-origin: 50% 100%;
  5.   }
  6.   .rabbit .rabbit__ear--left {
  7.     width: 2.2em;
  8.     height: 4.7em;
  9.     top: -5.7em;
  10.     left: -0.2em;
  11.     background: #F3E3DE;
  12.     transform: rotate(60deg);
  13.     box-shadow: inset 0.3em -0.4em 0 -0.1em var(--theme-color,#c7d1ea);
  14.     -webkit-animation: ear-left 3s infinite ease-out;
  15.             animation: ear-left 3s infinite ease-out;
  16.   }
  17.   .rabbit .rabbit__ear--right {
  18.     width: 2em;
  19.     height: 4.7em;
  20.     top: -5.5em;
  21.     left: -0.7em;
  22.     background: var(--theme-color,#D2DAEE);
  23.     transform: rotate(20deg);
  24.     -webkit-animation: ear-right 3s infinite ease-out;
  25.             animation: ear-right 3s infinite ease-out;
  26.   }
  28. @-webkit-keyframes ear-left {
  29.     0%, 20%, 100% {
  30.       transform: rotate(40deg);
  31.     }
  32.     10%, 30%, 80% {
  33.       transform: rotate(45deg);
  34.     }
  35.     90% {
  36.       transform: rotate(50deg);
  37.     }
  38.   }  
  40.   @keyframes ear-left {
  41.     0%, 20%, 100% {
  42.       transform: rotate(40deg);
  43.     }
  44.     10%, 30%, 80% {
  45.       transform: rotate(45deg);
  46.     }
  47.     90% {
  48.       transform: rotate(50deg);
  49.     }
  50.   }
  51.   @-webkit-keyframes ear-right {
  52.     0%, 20%, 100% {
  53.       transform: rotate(10deg);
  54.     }
  55.     10%, 30%, 80% {
  56.       transform: rotate(5deg);
  57.     }
  58.     90% {
  59.       transform: rotate(0deg);
  60.     }
  61.   }
  62.   @keyframes ear-right {
  63.     0%, 20%, 100% {
  64.       transform: rotate(10deg);
  65.     }
  66.     10%, 30%, 80% {
  67.       transform: rotate(5deg);
  68.     }
  69.     90% {
  70.       transform: rotate(0deg);
  71.     }
  72.   }

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

最后就是四肢和尾巴：

  1. .rabbit .rabbit__leg {
  2.     position: absolute;
  3.   }
  4.   .rabbit .rabbit__leg--one {
  5.     width: 0.8em;
  6.     height: 3em;
  7.     top: 2.3em;
  8.     left: 0.2em;
  9.     background: var(--theme-color,#c7d1ea);
  10.     border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
  11.     transform-origin: 50% 0%;
  12.     transform: rotate(15deg);
  13.   }
  14.   .rabbit .rabbit__leg--one:before {
  15.     content: "";
  16.     position: absolute;
  17.     width: 0.8em;
  18.     height: 0.5em;
  19.     top: 2.6em;
  20.     left: -0.2em;
  21.     background: #f3f6ff;
  22.     border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
  23.     transform: rotate(-10deg);
  24.   }
  25.   .rabbit .rabbit__leg--three {
  26.     width: 0.9em;
  27.     height: 3em;
  28.     top: 2.4em;
  29.     left: 0.7em;
  30.     background: var(--theme-color,#e1e6f4);
  31.     border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
  32.     transform-origin: 50% 0%;
  33.     transform: rotate(10deg);
  34.   }
  35.   .rabbit .rabbit__leg--three:before {
  36.     content: "";
  37.     position: absolute;
  38.     width: 0.8em;
  39.     height: 0.5em;
  40.     top: 2.6em;
  41.     left: -0.2em;
  42.     background: #f3f6ff;
  43.     border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
  44.     transform: rotate(-10deg);
  45.   }
  46.   .rabbit .rabbit__leg--two {
  47.     width: 2.6em;
  48.     height: 3.6em;
  49.     top: 1.7em;
  50.     left: 1.6em;
  51.     background: #c7d1ea;
  52.     border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  53.     transform-origin: 50% 0%;
  54.     transform: rotate(10deg);
  55.   }
  56.   .rabbit .rabbit__leg--two:before {
  57.     content: "";
  58.     position: absolute;
  59.     width: 1.6em;
  60.     height: 0.8em;
  61.     top: 3.05em;
  62.     left: 0em;
  63.     background: #f3f6ff;
  64.     border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
  65.     transform: rotate(-10deg);
  66.   }
  67.   .rabbit .rabbit__leg--four {
  68.     width: 2.6em;
  69.     height: 3.6em;
  70.     top: 1.8em;
  71.     left: 2.1em;
  72.     background: var(--theme-color,#e1e6f4);
  73.     border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  74.     transform-origin: 50% 0%;
  75.     transform: rotate(10deg);
  76.   }
  77.   .rabbit .rabbit__leg--four:before {
  78.     content: "";
  79.     position: absolute;
  80.     width: 1.6em;
  81.     height: 0.8em;
  82.     top: 3.05em;
  83.     left: 0em;
  84.     background: #f3f6ff;
  85.     border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
  86.     transform: rotate(-10deg);
  87.   }
  88.   .rabbit .rabbit__tail {
  89.     position: absolute;
  90.     width: 0.9em;
  91.     height: 0.9em;
  92.     top: 3.7em;
  93.     left: 4em;
  94.     background: var(--theme-color,#D2DAEE);
  95.     transform: rotate(25deg);
  96.   }
  97.   .rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {
  98.     content: "";
  99.     position: absolute;
  100.     width: 100%;
  101.     height: 100%;
  102.     background: var(--theme-color,#D2DAEE);
  103.     border-radius: 50%;
  104.   }
  105.   .rabbit .rabbit__tail:before {
  106.     top: 0;
  107.     left: -50%;
  108.   }
  109.   .rabbit .rabbit__tail:after {
  110.     top: 50%;
  111.     left: 0;
  112.   }

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

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

  1. function rabbit_init(color=null,pos=null){  
  3.     var container = document.getElementById("rabbit_box");  
  5.     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>';  
  7.     if(color != null){  
  9.         document.documentElement.style.setProperty("--theme-color",color);  
  11.     }
  12.     if(pos != null){  
  14.         document.documentElement.style.setProperty("--pos",pos);  
  16.     }  
  18. }  
  20. rabbit_init("pink")

最终效果：

开源发布

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

  1. mkdir rabbit

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

  1. .rabbit {
  2.     position: relative;
  3.   }
  4.   .rabbit .rabbit__body {
  5.     width: 4em;
  6.     height: 5.6em;
  7.     background: #F4F4F4;
  8.     border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  9.     transform: rotate(-40deg);
  10.     box-shadow: inset -2.3em -2.7em 0 0 var(--theme-color,#D2DAEE);
  11.   }
  12.   .rabbit .rabbit__head {
  13.     position: absolute;
  14.     width: 4em;
  15.     height: 4.6em;
  16.     top: -2.5em;
  17.     left: -2em;
  18.     background: var(--theme-color,#e1e6f4);
  19.     border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;
  20.     transform: rotate(-120deg);
  21.     overflow: hidden;
  22.   }
  23.   .rabbit .rabbit__head:before {
  24.     content: "";
  25.     position: absolute;
  26.     width: 0.65em;
  27.     height: 0.5em;
  28.     top: -0.1em;
  29.     left: 1.8em;
  30.     background: #F97996;
  31.     border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
  32.     transform: rotate(130deg);
  33.   }
  34.   .rabbit .rabbit__head:after {
  35.     content: "";
  36.     position: absolute;
  37.     width: 1em;
  38.     height: 1em;
  39.     top: 1.5em;
  40.     left: 1.6em;
  41.     background: #F4F4F4;
  42.     border-radius: 50%;
  43.     box-shadow: inset 0.1em 0.15em 0 0.37em #e2262e;
  44.   }
  45.   .rabbit .rabbit__ear {
  46.     position: absolute;
  47.     border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
  48.     transform-origin: 50% 100%;
  49.   }
  50.   .rabbit .rabbit__ear--left {
  51.     width: 2.2em;
  52.     height: 4.7em;
  53.     top: -5.7em;
  54.     left: -0.2em;
  55.     background: #F3E3DE;
  56.     transform: rotate(60deg);
  57.     box-shadow: inset 0.3em -0.4em 0 -0.1em var(--theme-color,#c7d1ea);
  58.     -webkit-animation: ear-left 3s infinite ease-out;
  59.             animation: ear-left 3s infinite ease-out;
  60.   }
  61.   .rabbit .rabbit__ear--right {
  62.     width: 2em;
  63.     height: 4.7em;
  64.     top: -5.5em;
  65.     left: -0.7em;
  66.     background: var(--theme-color,#D2DAEE);
  67.     transform: rotate(20deg);
  68.     -webkit-animation: ear-right 3s infinite ease-out;
  69.             animation: ear-right 3s infinite ease-out;
  70.   }
  71.   .rabbit .rabbit__leg {
  72.     position: absolute;
  73.   }
  74.   .rabbit .rabbit__leg--one {
  75.     width: 0.8em;
  76.     height: 3em;
  77.     top: 2.3em;
  78.     left: 0.2em;
  79.     background: var(--theme-color,#c7d1ea);
  80.     border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
  81.     transform-origin: 50% 0%;
  82.     transform: rotate(15deg);
  83.   }
  84.   .rabbit .rabbit__leg--one:before {
  85.     content: "";
  86.     position: absolute;
  87.     width: 0.8em;
  88.     height: 0.5em;
  89.     top: 2.6em;
  90.     left: -0.2em;
  91.     background: #f3f6ff;
  92.     border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
  93.     transform: rotate(-10deg);
  94.   }
  95.   .rabbit .rabbit__leg--three {
  96.     width: 0.9em;
  97.     height: 3em;
  98.     top: 2.4em;
  99.     left: 0.7em;
  100.     background: var(--theme-color,#e1e6f4);
  101.     border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
  102.     transform-origin: 50% 0%;
  103.     transform: rotate(10deg);
  104.   }
  105.   .rabbit .rabbit__leg--three:before {
  106.     content: "";
  107.     position: absolute;
  108.     width: 0.8em;
  109.     height: 0.5em;
  110.     top: 2.6em;
  111.     left: -0.2em;
  112.     background: #f3f6ff;
  113.     border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
  114.     transform: rotate(-10deg);
  115.   }
  116.   .rabbit .rabbit__leg--two {
  117.     width: 2.6em;
  118.     height: 3.6em;
  119.     top: 1.7em;
  120.     left: 1.6em;
  121.     background: #c7d1ea;
  122.     border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  123.     transform-origin: 50% 0%;
  124.     transform: rotate(10deg);
  125.   }
  126.   .rabbit .rabbit__leg--two:before {
  127.     content: "";
  128.     position: absolute;
  129.     width: 1.6em;
  130.     height: 0.8em;
  131.     top: 3.05em;
  132.     left: 0em;
  133.     background: #f3f6ff;
  134.     border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
  135.     transform: rotate(-10deg);
  136.   }
  137.   .rabbit .rabbit__leg--four {
  138.     width: 2.6em;
  139.     height: 3.6em;
  140.     top: 1.8em;
  141.     left: 2.1em;
  142.     background: var(--theme-color,#e1e6f4);
  143.     border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  144.     transform-origin: 50% 0%;
  145.     transform: rotate(10deg);
  146.   }
  147.   .rabbit .rabbit__leg--four:before {
  148.     content: "";
  149.     position: absolute;
  150.     width: 1.6em;
  151.     height: 0.8em;
  152.     top: 3.05em;
  153.     left: 0em;
  154.     background: #f3f6ff;
  155.     border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
  156.     transform: rotate(-10deg);
  157.   }
  158.   .rabbit .rabbit__tail {
  159.     position: absolute;
  160.     width: 0.9em;
  161.     height: 0.9em;
  162.     top: 3.7em;
  163.     left: 4em;
  164.     background: var(--theme-color,#D2DAEE);
  165.     transform: rotate(25deg);
  166.   }
  167.   .rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {
  168.     content: "";
  169.     position: absolute;
  170.     width: 100%;
  171.     height: 100%;
  172.     background: var(--theme-color,#D2DAEE);
  173.     border-radius: 50%;
  174.   }
  175.   .rabbit .rabbit__tail:before {
  176.     top: 0;
  177.     left: -50%;
  178.   }
  179.   .rabbit .rabbit__tail:after {
  180.     top: 50%;
  181.     left: 0;
  182.   }  
  184.   @-webkit-keyframes ear-left {
  185.     0%, 20%, 100% {
  186.       transform: rotate(40deg);
  187.     }
  188.     10%, 30%, 80% {
  189.       transform: rotate(45deg);
  190.     }
  191.     90% {
  192.       transform: rotate(50deg);
  193.     }
  194.   }  
  196.   @keyframes ear-left {
  197.     0%, 20%, 100% {
  198.       transform: rotate(40deg);
  199.     }
  200.     10%, 30%, 80% {
  201.       transform: rotate(45deg);
  202.     }
  203.     90% {
  204.       transform: rotate(50deg);
  205.     }
  206.   }
  207.   @-webkit-keyframes ear-right {
  208.     0%, 20%, 100% {
  209.       transform: rotate(10deg);
  210.     }
  211.     10%, 30%, 80% {
  212.       transform: rotate(5deg);
  213.     }
  214.     90% {
  215.       transform: rotate(0deg);
  216.     }
  217.   }
  218.   @keyframes ear-right {
  219.     0%, 20%, 100% {
  220.       transform: rotate(10deg);
  221.     }
  222.     10%, 30%, 80% {
  223.       transform: rotate(5deg);
  224.     }
  225.     90% {
  226.       transform: rotate(0deg);
  227.     }
  228.   }  
  230.   #rabbit_box{  
  232.     position: fixed;
  233.     bottom: var(--pos,5%);
  234.     right: 35px;
  235.     z-index: 99;
  236.     border: none;
  237.     outline: none;
  238.     filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  
  240.   }

rabbit.js代码：

  1. (function (name, context, fn) {
  2.     if (typeof module != 'undefined' && module.exports) {
  3.         // Node 环境
  4.         module.exports = fn();
  5.     } else if (typeof context['define'] == 'function' && (context['define']['amd'] || context['define']['cmd'])) {
  6.         // Require.js 或 Sea.js 环境
  7.         define(fn);
  8.     } else {
  9.         // client 环境
  10.         context[name] = fn();
  11.     }
  12. })('rabbit_init', this, function () {
  13.     return function (color=null,pos=null) {  
  15.         var container = document.getElementById("rabbit_box");  
  17.     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>';  
  19.     if(color != null){  
  21.         document.documentElement.style.setProperty("--theme-color",color);  
  23.     }
  24.     if(pos != null){  
  26.         document.documentElement.style.setProperty("--pos",pos);  
  28.     }  
  30.     }
  31. });

保存在项目的lib目录。

首先将项目提交到Github: https://github.com/zcxey2911/rabbit

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

  1. npm init

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

  1. entry point: ./lib/rabbit.js

登录NPM账号，随后发布：

  1. npm login
  2. npm publish

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

  1. npm config set registry=https://registry.npmjs.com

发布成功后，查看发布内容：https://www.npmjs.com/package/rabbit-widget

开源库引入和使用

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

直接引入：

  1. <!-- https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.css -->
  2. <!-- https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.js -->  
  4. <link
  5.   rel="stylesheet"
  6.   href="https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.css"
  7. />  
  9. <div id="rabbit_box">
  10. </div>  
  12. <script>  
  14. function init_rabbit(){  
  16.  rabbit_init("pink","20%");  // 粉色 高度20%  
  18.  //rabbit_init(); //默认颜色 默认位置  
  20. }  
  22. </script>  
  24. <script
  25.   async
  26.   onload="init_rabbit()"
  27.   src="https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.js"
  28. ></script>

NPM 包的形式安装：

  1. // npm install --save rabbit-widget
  2. import 'rabbit-widget/lib/rabbit.css';  
  4. var rabbit_init = require('rabbit-widget');  
  6. rabbit_init();

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

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

  1. <template>
  2.   <a-layout class="layout">
  3.     <a-layout-header>
  4.       <div class="logo" />  
  6.       <ad_header />  
  8.     </a-layout-header>
  9.     <a-layout-content style="padding: 0 50px">
  10.       <a-breadcrumb style="margin: 16px 0">
  11.         <a-breadcrumb-item>广告平台</a-breadcrumb-item>
  12.         <a-breadcrumb-item>首页</a-breadcrumb-item>  
  14.       </a-breadcrumb>
  15.       <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">  
  17.         这里是首页  
  19.         <div id="rabbit_box"></div>  
  21.     </div>
  22.     </a-layout-content>
  23.     <a-layout-footer style="text-align: center">
  24.       在线广告平台
  25.     </a-layout-footer>
  26.   </a-layout>
  27. </template>  
  29. <script>  
  31. import ad_header from './ad_header';  
  33. import 'rabbit-widget/lib/rabbit.css';  
  35. var rabbit_init = require('rabbit-widget');  
  37. export default {
  38.  data() {
  39.     return {  
  41.     }
  42.   },
  43.   //声明子组件
  44.   components:{  
  46.     'ad_header':ad_header  
  48.   },
  49.   methods:{  
  51.   },
  52.   created(){  
  54.     this.$nextTick(() => {
  55.     console.log("页面加载完啦~")  
  57.     rabbit_init();
  58. })  
  60.   }  
  62. }
  63. </script>
  64. <style>
  65. .site-layout-content {
  66.   min-height: 280px;
  67.   padding: 24px;
  68.   background: #fff;
  69. }
  70. #components-layout-demo-top .logo {
  71.   float: left;
  72.   width: 120px;
  73.   height: 31px;
  74.   margin: 16px 24px 16px 0;
  75.   background: rgba(255, 255, 255, 0.3);
  76. }
  77. .ant-row-rtl #components-layout-demo-top .logo {
  78.   float: right;
  79.   margin: 16px 0 16px 24px;
  80. }  
  82. [data-theme='dark'] .site-layout-content {
  83.   background: #141414;
  84. }
  85. </style>

项目中引入效果：

结语

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

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

  1. 使用asp.net从零开始制作设计网站---转载

    首先感谢提供此教程的朋友,可以给大家学习的机会,很有用,留着好好学.如下正文: 1. 申请域名 2. 购买空间 3. 备案 4. 使用photoshop完成设计与切图  5. 使用dreamweave ...

  2. 从零开始学 Web 之 移动Web（一）屏幕相关基本知识，调试，视口，屏幕适配

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 从零开始制作Minecraft启动器(C++开源)

    从零开始制作Minecraft启动器(C++开源) 新手飙车了~~~,MC启动器源码大放送,随心所欲打造自己的专属MC启动器,这不是易语言,是C++...分析原理,关键源码都有详细的注释,代码编好就打 ...

  4. 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  5. 从零开始学 Web 之 Vue.js（六）Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 从零开始学 Web 之 Vue.js（五）Vue的动画

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 从零开始学 Web 之 HTML（一）认识前端

    大家好,这里是 Daotin 从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享 ...

  9. 从零开始学 Web 之 CSS（一）选择器

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  10. 从零开始学 Web 之 CSS（四）CSS初始化、定位、overflow、标签规范

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

随机推荐

  1. mujoco d4rl 安装问题

    最近mujoco免费了,属实爽歪歪,安装d4rl没有以前那么麻烦了(不知为何半年前我安装d4rl时走了那么多弯路) mujoco安装 在 https://mujoco.org/download 上面下 ...

  2. github使用Webhooks实现自动化部署

    参考: https://blog.csdn.net/u013764814/article/details/85240752 -------------------------------------- ...

  3. maven-入门到入土

    详情见代码重工:连接http://heavy_code_industry.gitee.io/code_heavy_industry/pro002-maven/

  4. 「浙江理工大学ACM入队200题系列」问题 B: 零基础学C/C++12——求平均值

    本题是浙江理工大学ACM入队200题第二套中的B题 我们先来看一下这题的题面. 由于是比较靠前的题目,这里插一句.各位新ACMer朋友们,请一定要养成仔细耐心看题的习惯,尤其是要利用好输入和输出样例. ...

  5. 图扑软件 3D 组态编辑器，低代码零代码构建数字孪生工厂

    行业背景 随着中国制造 2025 计划的提出,新一轮的工业改革拉开序幕.大数据积累的指数级增长为智能商业爆发奠定了良好的基础,传统制造业高污染.高能耗.低效率的生产模式已不符合现代工业要求. 图扑拖拽 ...

  6. docker+nginx 安装部署修改资源目录配置文件和容器端口信息

    查看docker镜像 可以先查看docker下是否存在nginx镜像,使用如下这些命令查看: docker images: 列出所有镜像. docker images nginx: 列出所有nginx ...

  7. csp2022第一轮游记

    DAY -7? 学校没买桶装水!我一时半会不去打水,真的渴.果不其然开始咳嗽了.DAY -1 隔壁班同学主动申请停课了,我也跟来复习,这天主要的成果是把选择题错误控制到2-3题,顺便整理了一点笔记. ...

  8. ironic组件硬件自检服务——ironic-inspector

    介绍 ironic-inspector是一个用于硬件自检的辅助型服务,它可以对被ironic组件管理的裸金属节点进行硬件自检,通过在裸金属节点上运行内存系统,发现裸金属节点的硬件信息,例如CPU数量和 ...

  9. C#程序自启动

    在窗体加载事件里面加入下述代码: //设置开机自启动 RegistryKey registryKey = Registry.CurrentUser.OpenSubKey ("SOFTWARE ...

  10. RabbitMq发布确认

    RabbitMq发布确认 发布确认原理 生产者将信道设置成 confirm 模式,一旦信道进入 confirm 模式,所有在该信道上面发布的消息都将会被指派一个唯一的 ID(从 1 开始),一旦消息被 ...