大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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账号...