首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【教程】svg文字动画效果 - 路径加载+加粗渐显

    效果展示 homepage:https://starchen.top/ 制作方式 路径设计 使用工具 Adobe illustrator 制作文本图形 · 提要 一开始是直接手打出来的文本,然后通过 文字...制作文本图形 · 解决 只能通过画线,手搓文本路径。 根据自己需求的内容,使用侧边栏的工具。 例如画一个圆,点击shift,通过画椭圆,即可。...制作文本图形 · 扩展 若文本为图片,用illustrator打开后,通过选中图片,点击如图步骤,即可创建路径信息。...根据以上步骤排好序之后,style中有两个参数:--len(路径长度)和--delay(动画延迟),路径长度可以尽可能地大,将文本动画都加载出来,否则将会出现文本残缺的问题。...delay通过自行调节,协调页面动画,建议字母与字母间间隔差距为0.2s,文本之间时间间隔为0.3s即可。

    29110

    【HTML】HTML 标签 ③ ( 文本格式化标签 | 加粗 | 斜体 | 下划线 | 删除线 | 标签属性 | 图像标签 | 图像标签属性 )

    文章目录 一、文本格式化标签 ( 加粗 | 斜体 | 下划线 | 删除线 ) 二、标签属性 三、图像标签 HTML 常用的标签有如下类型 : 排版标签 文本格式化标签 ★ 图像标签 ★ 链接标签 ,...其中 链接涉及到 相对路径 与 绝对路径问题 ; 一、文本格式化标签 ( 加粗 | 斜体 | 下划线 | 删除线 ) ---- 文本格式化标签 : 对文字设置 粗体 , 斜体 , 下划线 , 删除线...ins> 删除线效果 : 下面两种标签都能实现 删除效果 , 在 XHTML 中推荐使用 标签 ; XHTML 是 可扩展超文本标记语言...src="image.jpg" /> 添加后的效果如下 , 图片会按照原始像素进行显示 ; 图像标签 可以设置如下属性 : alt 属性 : 属性值是 文本字符串..., 作用是 当图片无法显示时 , 显示该文本 ; title 属性 : 属性值是 文本字符串 , 作用是 鼠标在图片上悬停时 , 显示该文本 ; width 属性 : 属性值是 像素数值 , 作用是

    5K20

    CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框

    需求背景 - 文字的二次加粗 今天遇到这样一个有意思的问题: 在文字展示的时候,利用了 font-weight: bold 给文字进行加粗,但是觉得还是不够粗,有什么办法能够让文字更粗一点呢?...MDN - webkit-text-stroke: 该属性为文本字符添加了一个边框(笔锋),指定了边框的宽和颜色, 它是 -webkit-text-stroke-width 和 -webkit-text-stroke-color...看下面的 DEMO,我们可以利用 -webkit-text-stroke,给文字二次加粗: 文字加粗CSS 文字加粗CSS 文字加粗CSS 文字加粗CSS...CodePen Demo -- font-weight: bold 和 -webkit-text-stroke 二次加粗文字 如何给二次加粗的文字再添加边框?...我们可以给二次加粗的文字添加一个文字阴影: 文字加粗CSS p { font-size: 48px; letter-spacing: 6px; font-weight

    1.7K30
    领券