网站开发入门指南
welcome
欢迎进入网站开发的世界!本指南专为初学者设计，帮你掌握网页开发的基石
HTMLCSS
body
link
script
input
section
img
header
p
video
span
audio
h1
form
table
body
link
script
input
section
img
header
p
video
span
audio
h1
form
table
background-color
color
font-size
font-weight
font-family
text-align
line-height
letter-spacing
padding
margin
transform
animation
display
background-color
color
font-size
font-weight
font-family
text-align
line-height
letter-spacing
padding
margin
transform
animation
display
适合人群
任何初学者前置知识
不需要编程基础课时总数
200+课时总长
33小时+
@好奇代码的三木
JavaScript
HTML
CSS
React
Nextjs
Shell
Threejs
WebGL
Nodejs
basic
3 节课17 分钟
html
29 节课3 小时 45 分钟
css
164 节课28 小时 12 分钟
基础
16 节课2 小时 22 分钟
样式
37 节课6 小时 38 分钟
布局与定位
44 节课7 小时 21 分钟
元素变化
18 节课3 小时 12 分钟
选择器与优先级
18 节课3 小时 8 分钟
多端响应式适配
24 节课4 小时 27 分钟
dev
5 节课50 分钟
- 整体内容已经更新完结 可放心学习 -
svg
36 节课5 小时 38 分钟
00
SVG的强大你可能真的一无所知10:04
01
先了解一些基本的知识11:54
02
图形绘制与展示的逻辑17:25
03
用代码真实感受svg绘制逻辑｜viewBox17:12
04
svg标签上的常用属性设定10:56
05
基本的图形标签们 path rect等08:56
06
了解常见图形标签的属性10:37
07
让图形动起来很简单 animate10:32
08
形状超级变变变｜svg morph07:32
09
不用JS也能实现svg动画控制08:28
10
变化控制2｜动画接续启动 JS控制svg动画08:38
11
自带的关键帧动画设置与动画曲线的设置11:03
案例｜路径生长效果实现逻辑 stroke-dasharray stroke-dashoffset13:35
案例｜沿着路径移动效果06:39
案例｜文字书写效果12:29
15
图形沿着路径移动是如何实现的 animateMotion标签07:34
16
沿路经运动中三个非常重要的设置要点10:58
17
animateMotion的keyPoints属性 用GSAP实现交互控制03:31
18
animateTransform标签与图形变换中心点12:27
19
set实现瞬间变化 有用的restart属性04:20
20
自带的渐变效果设置 代码基本逻辑 gradient06:33
21
线性渐变的代码设置逻辑 linearGradient09:56
22
渐变的属性也是可以被变化的08:38
案例｜渐变的按钮边框如何实现17:04
24
内置的文字展示与沿着路径移动 textPath text11:32
25
内置的遮罩能力 图形剪切与蒙版 mask07:49
26
两个属性maskUnits和maskContentUnits14:28
27
mask标签剩余的一些小要点06:53
28
clipPath剪切路径标签实现裁切效果08:32
案例｜文字逐步出现效果 mask clipPath07:12
30
强大的svg内置滤镜 filter04:40
31
defs中其他能设置的标签 pattern symbol05:08
32
剩下一些标签以及SVG的API05:55
33
图形元素不同部分对鼠标反应设置09:44
34
尺寸设置的常见情况 viewBox和宽高设置05:03
35
完结！最后推荐几个工具～04:21