5 分鐘速通 SVG
- 2022 年 11 月 16 日
- 筆記
前言 SVG 对不少前端来说就是一个熟悉的陌生人，此篇博客是我学习完 SVG 后做的一个小总结，帮助我快速回忆 SVG 相关内容。 它不能帮你精通 SVG ，但是可以帮你快速了解 SVG 的一些核心内容，不会迷失在一些细枝末节的设定中，让你对 SVG 有一个大概的认识。 基础 SVG ， 全名 Sc …
Continue Reading
vue3 vite2 封裝 SVG 圖標組件 - 基於 vite 創建 vue3 全家桶項目續篇
- 2022 年 10 月 4 日
- 筆記
在 《基于 vite 创建 vue3 全家桶》 一文整合了 Element Plus ，并将 Element Plus 中提供的图标进行全局注册，这样可以很方便的延续 Element UI 的风格 —— 通过 el-icon-xxx 的方式使用图标（如果有问题的朋友可以先阅读前面的文章： 基于 Vi …
Continue Reading
前端動效講解與實戰
- 2022 年 9 月 26 日
- 筆記
作者：vivo 互联网前端团队- ZhaoJie 本文将从各个角度来对动画整个体系进行分类，并且介绍各种前端动画的实现方法，最后我们将总结在实际开发中的各个场景的动画选择方案。 一、背景 前端动画场景需求多 对众多动画场景的技术实现方案选择上比较模糊 各动画方案的优劣及适用场景认识模糊 现有动画库太 …
Continue Reading實現一個會動的鴻蒙 LOGO
- 2022 年 8 月 12 日
- 筆記
本文将带大家简单实现一个会动的鸿蒙 LOGO。 emmm，写本文的动机是之前在掘金看到一篇实现鸿蒙 LOGO 的文章 -- 产品经理：鸿蒙那个开场动画挺帅的 给咱们页面也整一个呗 鸿蒙的 LOGO 本身是这样的： 该篇作者最终实现的是一个字母 O 的动画展开过程： 而本文想尝试的，是该 LOGO 的 …
Continue Reading圓角大殺器，使用濾鏡構建圓角及波浪效果！
- 2022 年 7 月 25 日
- 筆記
本文，将另辟蹊径，介绍一种使用滤镜去构建圆角的独特方式。 首先，我们来看这样一个图形： 一个矩形，没什么特别的，代码如下： div { width: 200px; height: 40px; background-color: #000; } 如果，我们现在需要给这个矩形的两端加上 圆角 ，像是这样 …
Continue Reading
彰顯個性│製作一個獨一無二的動態 svg 頭像
- 2022 年 6 月 16 日
- 筆記
一、头像预览 看一下博主的动态图像，是不是很炫酷，想不想拥有一个？ 这是一个 svg 图片， svg 图片不仅可以通过制图软件制作外，其实也可以通过代码进行开发 因为 svg 本质上是一个下 xml 文件，是一种标记语言，可以使用编辑器编辑 二、SVG语法 svg 语法类似于 html ，并且支持 …
Continue Reading
SVG 和 CSS3 實現一個超酷愛心 Like 按鈕
- 2022 年 4 月 15 日
- 筆記
在现代网页中，我们经常可以在一些文章、视频和图片页面上找到”Like”按钮，并且通过点击该按钮来表示自己对该内容的喜欢或者不喜欢。大部分”Like”按钮是纯文本按钮或者图片按钮，如果你想让它们具有特别的动画特效，那么我们就需要用到CSS3或者JavaScript了。本文给大家带来一个带有爱心散列动画 …
Continue Reading不藉助 Javascript，利用 SVG 快速構建馬賽克效果
- 2022 年 4 月 12 日
- 筆記
之前在公众号转发了好友 Vajoy 的一篇文章 -- 巧用 CSS 把图片马赛克风格化 。 核心是利用了 CSS 中一个很有意思的属性 -- image-rendering ，它可以用于设置图像缩放算法。 何为 image-rendering？ CSS 属性 image-rendering 用于设置 …
Continue Reading巧用 CSS 實現炫彩三角邊框動畫
- 2022 年 3 月 3 日
- 筆記
最近有个小伙伴问我，在 某个网站 看到一个使用 SVG 实现的炫彩三角边框动画，问能否使用 CSS 实现： 很有意思的一个动画效果，立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画，非常的类似： 其核心就是利用了角向渐变（ conic-gradient ），然后将图案的中心区域通过 …
Continue ReadingLPL Ban/Pick 選人階段的遮罩效果是如何實現的？
- 2022 年 2 月 15 日
- 筆記
最近 S11 LPL 春季赛开赛，在看比赛的过程中，我发现新赛季的 Ban/Pick 选人阶段，出现了一种新的，有意思的遮罩效果，如下图所示： 当然，它是一个动态的效果，当选人的过程中，会有一种呼吸的效果： Gif 图有点糊，总的而言，就是一种接近迷雾的遮罩效果。并且，他是能够动态变化的。 本文将探 …
Continue Reading