学习如何使用JavaScript 生成各种好看的头像!
公众号程序猿DD
共 858字,需浏览 2分钟
· 2021-11-30
大家好,我是TJ
一个励志推荐10000款开源项目与工具的程序员
平时大家在用微信聊天或者发朋友圈的时候,都会希望什么呢?受人敬仰?彰显帅气?体现睿智?TJ君觉得,可能有一点是大家都会在意的,就是有一个特立独行却又让别人称赞、过目不忘的好看头像吧。
今天TJ君就给大家来分享一个使用 Vite + Vue3 开发的纯前端实现的开源头像生成网站。
Color Avatar
网站整体是一款矢量风格头像的生成器,用户可以搭配不同的素材组件,生成自己的个性化头像!来看看具体的头像生成效果:
是不是出乎意料的素材丰富呢?用户可以选择:
3种头像形状 18种背景颜色 9种发型 2种耳朵 3种耳环 4种眉毛 4种眼睛 3种鼻子 3种眼镜 8种嘴巴 不同的胡子、衣着
依靠这些不同的素材,绝对可以打造出一个让人过目不忘的专属头像,同时网站还提供随机生成功能、图片下载功能,并对挑选好的头像图片可以直接查看其代码组成再加上一键复制代码,就像这样:
如何运行项目?
step1 克隆项目至本地 step2 安装项目依赖 yarn install
step3 运行项目 yarn dev
TJ君觉得项目对于想学习Vue3语法或者想掌握相关项目搭建的小伙伴还是很不错的选择。想为自己找一个合适的头像?赶紧来学习这个项目吧,地址如下:
点击下方卡片,关注公众号“TJ君”
回复“可爱头像”,获取仓库地址
关注我,每天了解一个牛x、好用、有趣的东东
往期推荐
评论
如何循序渐进、有效地学习JavaScript?
我喜欢这个问题的问法,比问怎么”系统“学习的有意义多了。 如果让我现在重新学JS,我大概会这么学 首先我会把Chrome浏览器装好,在dev tools => console里直接练习熟悉基本语法,变量,数据类型,数学运算,字符串运算,条件,循环基本结构,简单函数定义和调用这些,之所以用chrome dev tools,是因为这时候我不想费劲折腾单独的编辑器,也不需要在开文件和文件夹,然后去配一些工具最终才接触到真正的JS编程,我想尽可能直接…
啦啦啦ye
0
如何使用redis生成唯一编号
概述在系统开发中,保证数据的唯一性是至关重要的一件事,目前开发中常用的方式有使用数据库的自增序列、UUID生成唯一编号、时间戳或者时间戳+随机数等。生成ID的方法有很多,来适应不同的场景、需求以及性能要求。...
DotNetCore实战
0