css ASCII艺术版的Potherca卡通头像

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css ASCII艺术版的Potherca卡通头像相关的知识，希望对你有一定的参考价值。

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}

// alert('Hello world!');

<pre style="font: 12px/6px monospace;">
<span class="background">''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''''''''''''''''</span>+#<span class="background">'''''''''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''''''''''''''</span>#@##@<span class="background">''''''''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''''''''''''''</span>######@<span class="background">'''''''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''''''''''''</span>##########<span class="background">''''''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''''''''''</span>'''</span>+########<span class="background">'''''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''''''''''</span>@'''''''</span>######<span class="background">''''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''''''''</span>+##''''''''</span>#####<span class="background">''''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''''''</span>#####''''''''</span>####@<span class="background">'''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''''''</span>@#####'''''''''</span>+###@<span class="background">''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''''</span>+#######'''</span>+###########<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''''</span>@########''''</span>##########@<span class="background">'''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''''</span>@##########+'''</span>##########+<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''</span>+########@#################<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''</span>#######````:'+@@+@@#######+<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''</span>@###@````````````````.####+<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''</span>###@````````````````````##+<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''</span>###.````````````````````@#+<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''</span>###`````````````````````@#@<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''''</span>##@`````````````````````@#@<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''</span>+##:`````````````````````###<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''</span>+##.`````````````````````;##<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''</span>+#@````````````````,,````.##<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''</span>+#@`````````````;;````````##<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''</span>@#@````````````:`````````.##<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''</span>@#@``````````````````````,##<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+#@#@`````:;.;;````````````+#@+<span class="background">'''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''</span>#```@@````.  .@@#`#'+,``````##``.<span class="background">''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>@`'#:.@````   @@@+'  ;@@`````@````+<span class="background">'''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>````'`+``'    @@@@   @@ #````,,.'`#<span class="background">'''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''</span>+````#`````     @@`   @@##,````@```#<span class="background">'''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''</span>+```#`````            '@@  ````.```+<span class="background">'''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>```.#````                 ```````.<span class="background">''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>+```@````.       ;        ````.``@<span class="background">''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>+;``'````'      @@       :````,`#<span class="background">'''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+@,`````+. .@.``'     .`````@@<span class="background">''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''''</span>```````````````#   #``````#<span class="background">'''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''</span>+`````````````````,````````#<span class="background">'''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''</span>#`````````````````````````'+<span class="background">'''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''</span>#``````````+``````````````@+<span class="background">'''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''</span>@`````````@```````````````@<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''</span>@````````@````````````````#+<span class="background">'''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''</span>@````````.````````````````#+<span class="background">'''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+@````````.````````````````#+<span class="background">'''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+@````````@`````,``````````#<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+@`````````@+:...`````````+#<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+@````````````,``.````````@@<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+@```````.'+@@#####'``````@@<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+@``````@###########@`````#@<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+@`````#####@#@@######````#@<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+#````,####'````.@####'```#@<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+#;`@...':`````````###@``.#@<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+##@`````@`:@#:,,;,`##,``'#<span class="background">'''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''</span>#@``````@``````````##```@@<span class="background">'''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''</span>#;```:@.```````````@#```#@<span class="background">'''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''''</span>@```'#@.```,#:`````;@``.##<span class="background">'''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>+.```,@@````````````@@``'#+<span class="background">'''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>#```#`@#.```````````#@``##+<span class="background">'''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''</span>+```.;@@@```````````.#@`+##<span class="background">''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''</span>+.`````,@``@@#@#:```@#'`##@<span class="background">''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>+`+``````@``@####@``,##+@##@<span class="background">''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>@`'`````#:@'#######@@#####@+<span class="background">''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>:`.``````'###############<span class="background">'''''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''</span>+```+``:#:`@#############@<span class="background">'''''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''</span>@``````````@############@@<span class="background">'''''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''</span>#`````````,@###########@+<span class="background">''''''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>``````.```@@@@####@@@',@<span class="background">''''''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''</span>;``````;```#'''+#@``````.+<span class="background">'''''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''</span>;``````````+'''''.```````#<span class="background">'''''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>``````.``@''''''.````````#<span class="background">''''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''</span>+``````+@+''''''+`````````.+<span class="background">'''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''</span>@``````#''''''@.```````````+<span class="background">'''''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''</span>+``````@'''''@+'```````````+@<span class="background">''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>;`````+''''@+++``````````,++<span class="background">''''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>@````:''''@++++``````````;++@<span class="background">'''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''</span>+````.'''@`.+++``````````+++#<span class="background">'''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''</span>:````#'@```++#``````````+++++<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">''''''''''''''''''''''''''</span>````#',```+++`````````;+++#@<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''</span>+````:@````+++.```````;++++;,<span class="background">''''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''</span>#`````.``,`++++#.``.,++++++;`#<span class="background">'''''''''''''''''''''''''''''</span>
<span class="background">'''''''''''''''''''''''''</span>#``````````++++++++++++++++'`#<span class="background">'''''''''''''''''''''''''''''</span>
</pre>

/**
 * ASCII Art version of the Potherca Cartoon Avatar
 */
 
 .background {
 	color: red;
 }
 
 .hair {
 	color: darkbrown;
 }
 
 .skin {
 	color: pink;
}

.shirt {
	color: darkblue;
}

以上是关于css ASCII艺术版的Potherca卡通头像的主要内容，如果未能解决你的问题，请参考以下文章

在线头像卡通化

头像NFT为虚拟社交带来身份感

这个Q版卡通头像生成器，太符合程序员形象了

AI教程：Q版卡通人物头像插画

Shader专题：卡通着色控制颜色的艺术

头像上传不上去，显示着这种情况是怎么回事儿？