制作动态头像_取网名独一无二的

制作动态头像_取网名独一无二的制作一个炫酷的svg动态头像,闪瞎技术人的双眼吧

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

? 头像预览

  • 看一下博主的动态图像,是不是很炫酷,想不想拥有一个?
  • 这是一个 svg 图片,svg 图片不仅可以通过制图软件制作外,其实也可以通过代码进行开发
  • 因为 svg 本质上是一个 xml 文件,是一种标记语言,可以使用编辑器编辑
制作动态头像_取网名独一无二的

? SVG语法

  • svg 语法类似于 html,并且支持 css,浏览器通过读取 css 来渲染动画
  • svg 主标签内要有 xmlns:xlink="http://www.w3.org/1999/xlink"
  • svg 标签中的 width/height 来标识画布的大小
  • viewBox 标签可有可无,有的话前两位一般是0,后两位一般与 width、height 保持一致
  • g 标签可以用于嵌套,包括嵌套子 svg 文件
  • 添加动画的话在 style 标签中写 css 即可
  • 使用 transform="translate(x y)" 属性,可以移动元素在图片中的位置
  • image 标签是用来嵌入 png、jpg 等格式类型的图片
<svg width="366" height="366" viewBox="0 0 366 366" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g fill="none" fill-rule="evenodd" width="258" height="258" viewBox="0 0 258 258" transform="translate(54 54)">
        <image xlink:href="url" x="0" y="0" width="200" height="200"/>
    </g>
</svg>

? 头像制作

  • 这里交大家如何制作博主同款头像
  • 首先将博主的头像 svg 下载下来,用编辑器打开,大概能看到如下内容
  • 可以看到在 image 标签中有一个 base64 格式的图片
  • 其实只要将自己的头像图片转码成 base64 格式,替换博主的内容即可
制作动态头像_取网名独一无二的

? 制作圆形透明头像

  • 一般头像都是正方形非透明的,直接转成 base64 格式,嵌入其中会很丑的
  • 我们需要将图片处理一下,变成圆形背景透明的头像
  • 这里我们就需要借助专业的软件了,比如 photoshop
制作动态头像_取网名独一无二的
制作动态头像_取网名独一无二的

? 图片base64格式

  • 将图片处理完成之后,我们需要将图片转码成 base64 格式
  • 可以找一些在线转码工具,这里使用的是:base64转码工具
  • 转码成功后,将其复制到 image 标签中即可
制作动态头像_取网名独一无二的
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170856.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ios系统软件迁移到安卓_苹果一键换机到安卓(苹果安卓一键迁移的软件)

    ios系统软件迁移到安卓_苹果一键换机到安卓(苹果安卓一键迁移的软件)去年开始,以iPhone为首的苹果系列产品,在中国销量出现严重下滑。2018年第四季度,苹果出货量下降约300万台,同比下降约22%。全年,iPhone出货量从2017年的3670万台,下降至2018年3420万台。苹果在中国市场销量跌跌不休已是不争事实。产品缺乏创新,价格屡创新高,消费者升级欲望随之降低。虽然整个手机大环境由增量市场转为存量市场,但每年换机的用户量依然庞大。这个现象现已逐步由国内…

  • em算法在高斯混合模型中的应用_高斯分布概率计算公式

    em算法在高斯混合模型中的应用_高斯分布概率计算公式一个例子高斯混合模型(GaussianMixedModel)指的是多个高斯分布函数的线性组合,理论上GMM可以拟合出任意类型的分布,通常用于解决同一集合下的数据包含多个不同的分布的情况(或者是同一类分布但参数不一样,或者是不同类型的分布,比如正态分布和伯努利分布)。如图1,图中的点在我们看来明显分成两个聚类。这两个聚类中的点分别通过两个不同的正态分布随机生成而来。但是如果没有GMM,那么只能用一

    2022年10月21日
  • Latex公式换行编写

    Latex公式换行编写latex在写公式时往往会遇到长公式或者连续等于的情况,这时可以选择公式换行操作:\begin{equation}\begin{aligned}a&=b+c\\&=c+b\end{aligned}\end{equation}得到如下的效果:其中&是用于标注需要对齐的位置,例如示例代码中放在…

  • 基于Eclipse的Android开发环境搭建「建议收藏」

    基于Eclipse的Android开发环境搭建「建议收藏」对于才接触Android开发的人员来说,复杂的开发环境搭建,各种新知识,新内容要接触总是让人无从下手。通过这篇文章,让零基础开发人员成功搭建基于Eclipse的android开发环境。Android使用Java语言进行开发,首先我们需要搭建Java开发环境,在此基础上搭建Android开发环境。如果开发者有Java开发经验,并有基于Eclipse的Java开发环境,可以跳过Java开发环境搭建。

  • 跟开涛老师学shiro — 授权

    跟开涛老师学shiro — 授权授权,也叫访问控制,即在应用中控制谁能访问哪些资源(如访问页面/编辑数据/页面操作等)。在授权中需了解的几个关键对象:主体(Subject)、资源(Resource)、权限(Permission)、角

  • sql中decode的用法_sql求和函数

    sql中decode的用法_sql求和函数decode()函数的语法:其中:columnname为要选择的table中所定义的column;缺省值可以是你要选择的columnname本身,也可以是你想定义的其他值,比如Other等;

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号