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

制作动态头像_取网名独一无二的制作一个炫酷的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)
blank

相关推荐

  • java integer.parseint_java method.invoke

    java integer.parseint_java method.invoke我正在编写一个使用反射来动态查找和调用方法的库.只给出一个对象,一个方法名和一个参数列表,我需要调用给定的方法,就好像方法调用是在代码中显式编写的一样.我一直在使用以下方法,在大多数情况下都可以使用:staticvoidcallMethod(Objectreceiver,StringmethodName,Object[]params){Class>[]paramTypes…

  • 二十三又是谁的二十三

    二十三又是谁的二十三23岁那年你正处在哪个状态?现在呢?我,23岁,应届毕业生。生活,工作,爱情都处于人生的低谷,一穷二白,一无所有,一事无成。分享一下成长的建议吧。匿名用户23岁那年…就是去年…在22岁的时候我毕业,同时第二年准备考研,结果因为压力太大,期望太高,又失利了,但是我依然满怀信心和憧憬在我23岁那年四月,当我深爱的女孩(在这之前我追了她四年)说她要去北京时,我在毫无准备的情况下,带了2000块钱冲到北京,那会的北京还有点冷…但是我只是想打好前站,在她来的时候能提供一点帮助,在前两周里,每天面试两家公

  • vim的配置_vim全局配置

    vim的配置_vim全局配置vim前端全家桶配置指南简介因为写了一段时间前端,一直在考虑vim是否能够替代前端无敌编辑器vscode,最后发现只能高仿,自己配置的性能跟vscode下的vim模式差不多,灵活性更高点,喜欢折腾的朋友可以试试,否则用vscodevim模式吧,已经神一般的完美了(不是高级黑-。-)。这套插件目前包含了代码自动补全,目录树,js/jsxeslint自动格式化,小黑屋模式,文件搜索ctr…

  • phpstorm2021.12激活【中文破解版】

    (phpstorm2021.12激活)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~AFH5…

  • .Net Core 2.0介绍「建议收藏」

    .Net Core 2.0介绍「建议收藏」.NetCore2.0是微软推出的一个参考.netframework重新开发的.NET实现,它是未来的所有.NET平台的基础。随着.NETCoreFramework的开发完成,.netfr

  • ShellExecute使用详解

    ShellExecute使用详解有三个API函数可以运行可执行文件WinExec、ShellExecute和CreateProcess。1.CreateProcess因为使用复杂,比较少用。2.WinExec主要运行EXE文件。

发表回复

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

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