benben-miao
/
benben-miao


  
1

	
2

	
3

	
4

	
5

	
6

	
7

	
8

	
9

	
10

	
11

	
12

	
13

	
14

	
15

	
16

	
17

	
18

	
19

	
20

	
21

	
22

	
23

	
24

	
25

	
26

	
27

	
28

	
29

	
30

	
31

	
32

	
33

	
34

	
35

	
36

	
37

	
38

	
39

	
40

	
41

	
42

	
43

	
44

	
45

	
46

	
47

	
48

	
49

	
50

	
51

	
52

	
53

	
54

	
55

	
56

	
57

	
58

	
59

	
60

	
61

	
62

	
63

	
64

	
65

	
66

	
67

	
68

	
69

	
70

	
71

	
72

	
73

	
74

	
75

	
76

	
77

	
78

	
79

	
80

	
81

	
82

	
83

	
84

	
85

	
86

	
87

	
88

	
89

	
90

	
91

	
92

	
93

	
94

	
95

	
96

	
97

	
98

	
99

	
100

	
101

	
102

	
103

	
104

	
105

	
106

	
107

	
108

	
109

	
110

	
111

	
112

	
113

	
114

	
115

	
116

	
117

	
118

	
119

	
120

	
121

	
122

	
123

	
124

	
125

	
126

	
127

	
128

	
129

	
130

	
131

	
132

	
133

	
134

	
135

	
136

	
137

	
138

	
139

	
140

	
141

	
142

	
143

	
144

	
145

	
146

	
147

	
148

	
149

	
150

	
151

	
152

	
153

	
154

	
155

	
156

	
157

	
158

	
159

	
160

	
161

	
162

	
163

	
164

	
165

	
166

	
167

	
168

	
169

	
170

	
171

	
172

	
173

	
174

	
175

	
176

	
177

	
178

	
179

	
180

	
181

	
182

	
183

	
184

	
185

	
186

	
187

	
188

	
189

	
190

	
191

	
192

	
193

	
194

	
195

	
196

	
197

	
198

	
199

	
200

	
201

	
202

	
203

	
204

	
205

	
206

	
207

	
208

	
209

	
210

	
211

	
212

	
213

	
214

	
215

	
216

	
217

	
218

	
219

	
220

	
221

	
222

	
223

	
224

	
225

	
226

	
227

	
228

	
229

	
230

	
231

	
232

	
233

	
234

	
235

	
236

	
237

	
238

	
239

	
240

	
241

	
242

	
243

	
244

	
245

	
246

	
247

	
248

	
249

	
250

	
251

	
252

	
253

	
254

	
255

	
256

	
257

	
258

	
259

	
260

	
261

	
262

	
263

	
264

	
265

	
266

	
267

	
268

	
269

	
270

	
271

	
272

	
273

	
274

	
275

	
276

	
277

	
278

	
279

	
280

	
281

	
282

	
283

	
284

	
285

	
286

	
287

	
288

	
289

	
290

	
291

	
292

	
293

	
294

	
295

	
296

	
297

	
298

	
299

	
300

	
301

	
302

	
303

	
304

	
305

	
306

	
307

	
308

	
309

	
310

	
311

	
312

	
313

	
314

	
315

	
316

	
317

	
318

	
319

	
320

	
321

	
322

	
323

	
324

	
325

	
326

	
327

	
328

	
329

	
            <!DOCTYPE html>

<html lang="en">

<head>
  
  <title>benben-miao</title>
  <meta charset="UTF-8">
  <meta name="description" content="Research for bioinformatics.">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
  
  
  <link rel="shortcut icon" href="https://benben-miao.gitee.io/image-cloud/BioBlog/avatar.jpg" type="image/jpg" />
  <meta name="description" content="1. Black Cat    2. Code of this website is deploy on github.    https:&#x2F;&#x2F;github.com&#x2F;benben-miao&#x2F;benben-miao.github.io     3. About this Website !    https:&#x2F;&#x2F;benben-miao.github.io">
<meta property="og:type" content="website">
<meta property="og:title" content="benben-miao">
<meta property="og:url" content="https://benben-miao.github.io/about.html">
<meta property="og:site_name" content="benben-miao">
<meta property="og:description" content="1. Black Cat    2. Code of this website is deploy on github.    https:&#x2F;&#x2F;github.com&#x2F;benben-miao&#x2F;benben-miao.github.io     3. About this Website !    https:&#x2F;&#x2F;benben-miao.github.io">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://benben-miao.gitee.io/image-cloud/BioBlog/github-io.png">
<meta property="og:image" content="https://benben-miao.gitee.io/image-cloud/BioBlog/github-io-website.png">
<meta property="article:published_time" content="2021-12-27T16:00:00.000Z">
<meta property="article:modified_time" content="2022-03-03T10:40:36.422Z">
<meta property="article:author" content="benben-miao">
<meta property="article:tag" content="Website">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://benben-miao.gitee.io/image-cloud/BioBlog/github-io.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/gh/nexmoe/nexmoe.github.io@latest/css/style.css,npm/highlight.js@9.15.8/styles/atom-one-dark.css,gh/nexmoe/nexmoe.github.io@latest/lib/mdui_043tiny/css/mdui.css,gh/nexmoe/nexmoe.github.io@latest/lib/iconfont/iconfont.css" crossorigin>
  
  <!--<link rel="stylesheet" href="/css/style.css?v=1646305991349">-->

   
    <style>
      .nexmoe-avatar img:hover {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
      }	
    </style>
  
<meta name="generator" content="Hexo 4.2.0"></head>

<body class="mdui-drawer-body-left">
  
  <div id="nexmoe-background">
    <div class="nexmoe-bg" style="background-image: url()"></div>
    <div class="mdui-appbar mdui-shadow-0">
      <div class="mdui-toolbar">
        <a mdui-drawer="{target: '#drawer', swipe: true}" title="menu" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon nexmoefont icon-menu"></i></a>
        <div class="mdui-toolbar-spacer"></div>
        <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>-->
        <a href="/" title="benben-miao" class="mdui-btn mdui-btn-icon"><img src="https://benben-miao.gitee.io/image-cloud/BioBlog/avatar.jpg" alt="benben-miao"></a>
       </div>
    </div>
  </div>
  <div id="nexmoe-header">
      <div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/" title="benben-miao">
            <img src="https://benben-miao.gitee.io/image-cloud/BioBlog/avatar.jpg" alt="benben-miao" alt="benben-miao">
        </a>
    </div>
    <div class="nexmoe-count">
        <div><span>Articles</span>80</div>
        <div><span>Tags</span>8</div>
        <div><span>Categories</span>0</div>
    </div>
    <div class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/" title="Home">
            <i class="mdui-list-item-icon nexmoefont icon-home"></i>
            <div class="mdui-list-item-content">
                Home
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/bioblog" title="BioBlog">
            <i class="mdui-list-item-icon nexmoefont icon-coffee"></i>
            <div class="mdui-list-item-content">
                BioBlog
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/about.html" title="About">
            <i class="mdui-list-item-icon nexmoefont icon-info-circle"></i>
            <div class="mdui-list-item-content">
                About
            </div>
        </a>
        
    </div>
    <aside id="nexmoe-sidebar">
  
  <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-search">
        <form id="search_form" action_e="https://cn.bing.com/search?q=https://github.com/benben-miao/" onsubmit="return search();">
            <label><input id="search_value" name="q" type="search" placeholder="Search"></label>
        </form>
    </div>
</div>
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">Social</h3>
    <div class="nexmoe-widget nexmoe-social">
        <a class="mdui-ripple" href="https://github.com/benben-miao" target="_blank" mdui-tooltip="{content: 'GitHub'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-github"></i>
        </a><a class="mdui-ripple" href="https://gitee.com/benben-miao" target="_blank" mdui-tooltip="{content: 'Gitee'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-container"></i>
        </a><a class="mdui-ripple" href="https://hiplot.com.cn" target="_blank" mdui-tooltip="{content: 'Hiplot-Cloud'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-dribbble"></i>
        </a><a class="mdui-ripple" href="https://bio-nav.hiplot.com.cn" target="_blank" mdui-tooltip="{content: 'Bio-Nav'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-battlenet"></i>
        </a><a class="mdui-ripple" href="https://colors-cloud.onrender.com" target="_blank" mdui-tooltip="{content: 'Colors-Cloud'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-calendar-fill"></i>
        </a><a class="mdui-ripple" href="https://www.yuque.com/benben.miao" target="_blank" mdui-tooltip="{content: 'YuQue'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-home"></i>
        </a><a class="mdui-ripple" href="https://hiplot.com.cn/developer-wall" target="_blank" mdui-tooltip="{content: 'Dev-Wall'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-coffee"></i>
        </a><a class="mdui-ripple" href="https://omicspheremed.netlify.app/" target="_blank" mdui-tooltip="{content: 'OmicsSphere'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-areachart"></i>
        </a>
    </div>
    <hr/>
<!-- https://clustrmaps.com -->
<script type='text/javascript' id='clustrmaps' src='//cdn.clustrmaps.com/map_v2.js?cl=ffffff&w=a&t=tt&d=2LlOs1moz-K8B-p9A0x0aIHu3QVuKMC40q9JHNA5XH4&co=0a77c4&cmo=3acc3a&cmn=ff5353&ct=ffffff'></script>
</div>
  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">Tag Cloud</h3>
    <div id="randomtagcloud" class="nexmoe-widget tagcloud nexmoe-rainbow">
      <a href="/tags/Bioinformatics/" style="font-size: 15px;">Bioinformatics</a> <a href="/tags/Cartoon/" style="font-size: 10px;">Cartoon</a> <a href="/tags/Code/" style="font-size: 17.5px;">Code</a> <a href="/tags/Design/" style="font-size: 20px;">Design</a> <a href="/tags/Festival/" style="font-size: 12.5px;">Festival</a> <a href="/tags/Rhyme/" style="font-size: 20px;">Rhyme</a> <a href="/tags/Science/" style="font-size: 12.5px;">Science</a> <a href="/tags/ThreeD/" style="font-size: 10px;">ThreeD</a>
    </div>
    
  </div>

  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">Archive</h3>
    <div class="nexmoe-widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/03/">March 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/02/">February 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/01/">January 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/12/">December 2021</a></li></ul>
    </div>
  </div>


</aside>
    <div class="nexmoe-copyright">
        &copy; 2022 benben-miao
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://nexmoe.com/hexo-theme-nexmoe.html" target="_blank">Nexmoe</a>
    </div>
</div><!-- .nexmoe-drawer -->
  </div>
  <div id="nexmoe-content">
    <div class="nexmoe-primary">
        <div class="nexmoe-post">
  
      <div class="nexmoe-post-cover" style="padding-bottom: 56.25%;"> 
          <img data-src="https://benben-miao.gitee.io/image-cloud/Codepen/cute-cat.png" data-sizes="auto" alt="" class="lazyload">
          <h1></h1>
      </div>
  
  
  <div class="nexmoe-post-meta nexmoe-rainbow" style="margin:10px 0!important;">
    <a><i class="nexmoefont icon-calendar-fill"></i>2021年12月28日</a>
    <a><i class="nexmoefont icon-areachart"></i>30 字</a>
    <a><i class="nexmoefont icon-time-circle-fill"></i>大概 1 分钟</a>
</div>

  <div class="nexmoe-post-right">
    
      <div class="nexmoe-fixed">
        <div class="nexmoe-valign">
            <div class="nexmoe-toc">
                <ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#"><span class="toc-number">1.</span> <span class="toc-text">1. Black Cat</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#"><span class="toc-number">2.</span> <span class="toc-text">2. Code of this website is deploy on github.</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#"><span class="toc-number">3.</span> <span class="toc-text">3. About this Website !</span></a></li></ol>
            </div>
        </div>
      </div>
    
  </div>

  <article>
    
<h4 style="color: #333;text-shadow:1px 1px 3px #888;">1. Black Cat</h4>
<iframe src="https://benben-miao.gitee.io/beautiful-code/lina-cat/index.html" style="width:100%;height:450px;border-radius:10px;box-shadow: 0px 0px 10px #cccccc" frameborder="no">
</iframe>

<h4 style="color: #333;text-shadow:1px 1px 3px #888;">2. Code of this website is deploy on github.</h4>
<div style="background-color:#eeeeee; border-radius:3px; padding:10px;">
  <a href="https://github.com/benben-miao/benben-miao.github.io" target="_blank" rel="noopener" style="text-shadow: 1px 1px 3px #888;">https://github.com/benben-miao/benben-miao.github.io</a>
</div>
<br/><br/>
<img src="https://benben-miao.gitee.io/image-cloud/BioBlog/github-io.png" style="width: 100%;border-radius: 5px; box-shadow: 0px 0px 10px #cccccc">

<h4 style="color: #333;text-shadow:1px 1px 3px #888;">3. About this Website !</h4>
<div style="background-color:#eeeeee; border-radius:3px; padding:10px;">
  <a href="https://benben-miao.github.io" style="text-shadow: 1px 1px 3px #888;">https://benben-miao.github.io</a>
</div>
<br/><br/>
<img src="https://benben-miao.gitee.io/image-cloud/BioBlog/github-io-website.png" style="width: 100%;border-radius: 5px; box-shadow: 0px 0px 10px #cccccc">
  </article>

  <div class="nexmoe-post-meta nexmoe-rainbow">
    
    
</div>

  <div class="nexmoe-post-footer">
    
      
  <div class="nexmoe-post-copyright">
    <strong>Author：</strong>benben-miao<br>
    <strong>Link：</strong><a href="https://benben-miao.github.io/about.html" title="https:&#x2F;&#x2F;benben-miao.github.io&#x2F;about.html" target="_blank" rel="noopener">https:&#x2F;&#x2F;benben-miao.github.io&#x2F;about.html</a><br>
    
      <strong>Copyright：</strong>benben-miao <a href="https://github.com/benben-miao" target="_blank">https://github.com/benben-miao</a>
    
  </div>


  <span id="busuanzi_container_site_pv">
          <span style="color:brown;text-shadow:1px 1px 3px #888;">Number of Views：</span><span id="busuanzi_value_site_pv"></span>
  </span>
  <span class="post-meta-divider"> & </span>
  <span id="busuanzi_container_site_uv" style='display:none'>
          <span style="color:brown;text-shadow:1px 1px 3px #888;">Number of Visitors：</span><span id="busuanzi_value_site_uv"></span>
  </span>
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


    <section class="nexmoe-comment">
    <script id="dsq-count-scr" src="https://&lt;shortname&gt;.disqus.com/count.js" async></script>
<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
        this.page.url = 'https://benben-miao.github.io/about.html'; // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = 'https://benben-miao.github.io/about.html'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
</script>
<script id="disqus-thread-script">
    (function() { // DON'T EDIT BELOW THIS LINE
        var d = document;
        var s = d.createElement('script');
        s.src = '//&lt;shortname&gt;.disqus.com/embed.js';
        s.setAttribute('data-timestamp', + new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

</section>
  </div>
</div>

<style>
img {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #cccccc !important;
  transition-duration: 300ms;
}
img:hover {
  box-shadow: 0px 0px 30px #cccccc !important;
  transition-duration: 300ms;
}

.card {
  box-shadow: 0px 0px 10px #cccccc !important; 
  padding:20px; 
  line-height:2em; 
  border-radius:10px;
  transition-duration: 300ms;
  text-align: justify;
  text-justify: inter-ideograph;/*IE*/
}

.card:hover {
  box-shadow: 0px 0px 30px #cccccc !important; 
  padding:20px; 
  line-height:2em; 
  border-radius:10px;
  transition-duration: 300ms;
  text-align: justify;
  text-justify: inter-ideograph;/*IE*/
}

.frame {
  box-shadow: 0px 0px 10px #cccccc !important; 
  padding:0px; 
  border-radius:10px;
  transition-duration: 300ms;
}

.frame:hover {
  box-shadow: 0px 0px 30px #cccccc !important;
  transition-duration: 300ms;
}
</style>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/combine/npm/lazysizes@5.1.0/lazysizes.min.js,gh/highlightjs/cdn-release@9.15.8/build/highlight.min.js,npm/mdui@0.4.3/dist/js/mdui.min.js,gh/nexmoe/nexmoe.github.io@latest/js/app.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--<script src="/js/app.js?v=1646305991353"></script>-->


    <script src="https://cdn.jsdelivr.net/gh/xtaodada/xtaodada.github.io@0.0.2/copy.js"></script>


<script> 
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
</script>

  
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json"},"display":{"superSample":2,"width":150,"height":300,"position":"left","hOffset":10,"vOffset":-20},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.2}});</script></body>

</html>