1 移动端页面制作规范 1.1 计量单位的使用 CSS 的计量单位选择 px：固定的像素值 em：相对父级元素的 font-size 设置来作为当前元素 1em 所代表的像素值，如父节点的 font-size...对于高清屏而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以导致图片看起来比较模糊。 对于图片模糊问题，比较好的方案就是用多倍图片(@2x)。...如：一个 200×300(CSS pixel)的 img 标签，对于 dpr=2 的屏幕，用 400×600 的图片，如此一来，位图像素点个数就是原来的4 倍，在高清屏幕下，位图像素点个数就可以跟物理像素点个数形成...叫多倍图的原因就是不同的移动设备屏幕分辨率不同。比如说：二倍图、三倍图、四倍图等，这些就是多倍图。这里介绍一下二倍图，其他的多倍图都是同样的原理。...标签名 说明 矩形标签 圆形标签 椭圆形标签 线段标签 折线标签 多边形标签 路径标签
目录 头像预览 SVG语法 头像制作 制作圆形透明头像 图片base64格式 头像预览 看一下博主的动态图像，是不是很炫酷，想不想拥有一个？...html，并且支持 css，浏览器通过读取 css 来渲染动画 svg 主标签内要有 xmlns:xlink="http://www.w3.org/1999/xlink" svg 标签中的 width.../height 来标识画布的大小 viewBox 标签可有可无，有的话前两位一般是0，后两位一般与 width、height 保持一致 g 标签可以用于嵌套，包括嵌套子 svg 文件 添加动画的话在 style...这里交大家如何制作博主同款头像 首先将博主的头像 svg 下载下来，用编辑器打开，大概能看到如下内容 可以看到在 image 标签中有一个 base64 格式的图片 其实只要将自己的头像图片转码成 base64...格式，替换博主的内容即可 制作圆形透明头像 一般头像都是正方形非透明的，直接转成 base64 格式，嵌入其中会很丑的 我们需要将图片处理一下，变成圆形背景透明的头像 这里我们就需要借助专业的软件了
通过精心的设计和编程，我们可以用CSS创造出各种生动的图形和动画，这不仅可以展示你的技术实力，更能以一种极具创意的方式表达你的心意。 在这篇文章中，我将带你一步步制作这个充满圣诞气息的CSS圣诞老人。...我们的目标是制作一个响应式的图像，所以画布和内容将主要使用相对单位，比如百分比（%）或视口最小单位（vmin）。这样做的好处是，无论在什么设备上查看，我们的CSS圣诞老人都能保持良好的显示效果。...通过这种方式，我们可以确保无论脸部大小或位置如何变化，眼睛和脸颊都能保持在正确的位置。 响应式设计： 在CSS中使用相对单位（如%）确保我们的绘制可以在不同尺寸的屏幕上保持响应性。...由于vmin是一个响应式单位（取决于视图框架的大小），绘图会适应屏幕大小，但这可能不是我们想要的效果。 我们可能希望将绘图添加到页面中的特定空间，那时vmin单位可能会成为问题。不用担心。...通过使用变量、伪元素、渐变、边框半径和动画关键帧等CSS功能，我们不仅制作出了一个有趣的圣诞老人图像，还实现了雪花飘落的效果，让整个场景更加生动。
前言 通常我们说的 Web 动画，其实包含了以下三大类： 1、CSS3 动画 2、javascript 动画（canvas） 3、html 动画（SVG） 3 种动画各有优劣，实际应用中根据情况作出取舍...3、SVG 是可伸缩的 4、SVG 图像可在任何的分辨率下被高质量地打印 5、SVG 可在图像质量不下降的情况下被放大 6、SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图） 7、...viewbox： 定义了画布上可以显示的区域，当 viewBox 的大小和 svg 不同时，viewBox 在屏幕上的显示会缩放至 svg 同等大小 有了 svg 标签，我们就可以愉快的在内部添加 SVG...包含矩形、圆形、椭圆、线条、多边形、折线等等。 好了，有了基本的了解，我们继续今天的话题，SVG 线条动画。 SVG 线条动画 先看看效果图，然后想想如果是你，该怎么实现这个效果了？ ?...css 中的 border-width，给 svg 图形设定边框宽度； stroke：类比 css 中的 border-color，给 svg 图形设定边框颜色； stroke-linejoin |
作者：David Atanda 译者：前端小智 来源：CSS-Tricket 除了使用媒体查询和现代CSS布局（例如flexbox和grid）来创建响应式网站之外，我们使用一些比较不太被用或者比较新的特性来制作响应式网站...屏幕较小的设备也要下载在大屏幕展现的大尺寸图片。 在网页上使用图像时，我们必须确保它们在分辨率和大小方面得到了优化。...HTML提供了元素，该元素可以根据所添加的媒体查询来指定要渲染的确切图像资源。...如果我们按比例制作不同的图片，这种方法就能奏效。这允许浏览器根据屏幕的像素密度和视口大小来决定下载哪个版本。...2x, flower1x.png 1x " src="flower-fallback.jpg" > 我们可以做的另一件事是根据设备本身的屏幕分辨率(通常以每英寸的点或dpi来衡量)在CSS中编写媒体查询
屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重。...如果不分开做两套，而是直接用响应式的话，那么 pc 端上显示的很多页面布局就要在手机端上隐藏，结果这些页面都没有被用到，但是却加载了。...图像分辨率5 00×200 表示这张图片在屏幕上按1:1显示时，水平方向有500个像素点（色块），垂直方向有200个像素点（色块）。 图片的分辨率越低，图片越模糊。图片的分辨率越高，图片越清晰。...而我们的方案中使用 rem 单位，是能轻易的根据 的 font-size 计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。...而我们的方案中使用 rem 单位，是能轻易的根据 的 font-size 计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。
在易读性方面，基于XML也就是说SVG图像文件可以像HTML网页一样有着很好的可读性，可以用任何文本编辑器打开SVG图像，并可看到用来描述图像的代码（掌握了SVG语法的人甚至可以只用一个记事本便可以读出图像中的内容来...在交互方面，他也可以提供其他图像无法做到的交互，包括与css以及JS的样式表现，声音，动画等效果。...在视觉方面，SVG图像中的文字独立于图像，不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。...SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。 在优化方面，SVG文件比那些GIF和JPEG，PNG格式的文件要小很多，因而下载也更快。...然后我们看到500后面没有单位，SVG默认的单位是px，你也可以使用css里的其他单位，单位的知识在css学习中，已经全面了解，这里也不多做描述。 定义完画布，然后就可以在画布里绘图了。
屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重。...然后每次用户访问的时候它就根据客户端的类型重定向。 为什么呢？...在屏幕的大小相同的情况下，如果屏幕的分辨率低（如640×480），则屏幕上显示的像素少，单个像素点比较大，看起来会有种颗粒感。...在屏幕的大小相同的情况下，如果屏幕的分辨率高（如1920×1080），则屏幕上显示的像素多，单个像素点比较小，看起来会比较清晰。...而我们的方案中使用 rem 单位，是能轻易的根据 的 font-size 计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。
于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？...他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。 如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。...除了用html标签加载CSS文件，还可以在现有CSS文件中加载。 ...@import url("tinyScreen.css") screen and (max-device-width: 400px); 七、CSS的@media规则 同一个CSS文件中，也可以根据不同的屏幕分辨率...document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); }); 不过，有条件的话，最好还是根据不同大小的屏幕
它允许您编辑形状并根据需要自定义它们。然后，您可以复制该形状的 SVG 代码，或者根据需要将其下载为 SVG。...该网站提供了一个简单的界面，用于调整阴影的不同属性，如颜色、大小和偏移量。在生成阴影后，您可以将生成的 CSS 代码复制到您的项目中。...这个工具提供了非常详细的阴影设置来辅助制作 neomorphism 的设计。并且支持移动端和桌面端的阴影设置，使用者可以很方便的制作不同的设计。...该工具基于 CSS 属性 clip-path，可以创建复杂的形状（多边形、圆形、椭圆形等）。...代码来创建带有边框弧度的图像。
根据这个规则命名将有助于团队中的开发人员轻松了解每个类的功能，并更有效地协同工作。...33、Rough.js 地址：https://roughjs.com/posts/release-4.0/ Rough.js 是一个图形库，用于在网页中快速轻松地绘制直线、曲线、圆弧、多边形、圆形和椭圆形...我想向您介绍一种工具，可以帮助您轻松创建网站图标，设计精美且完全免费，免费的网站图标制作工具。...它将帮助我们通过 CSS 轻松设置图标样式，而不必担心损坏的图像。...53、Codeimg 地址：https://codeimg.io/ Codeimg 是一种工具，可帮助我们通过具有许多支持功能的图像显示代码，例如选择背景主题、指定颜色、字体大小、代码语言... 54
（根据祖先html） 3.vh vh指当前屏幕可见高度的1%，即 height:100vh == height:100%; 区别：当元素没有内容时候，若设置height:100%该元素高度不会被撑开。...：用图像做列表项标记 (3)list-style-position：设置列表项标记的位置 (4)list-style：一次设置列表的所有属性 (属性值为none时说明列表无样式) 顺序为...42.border-radius圆角边框：语法和边框相似，只是四个边框带圆角 (语法)border-radius:length{1~4个数字}; (1)用border-radius制作特殊图形 圆形：...圆角半径为元素宽度的一半，或直接设圆角半径为50% 半圆形：元素的高度是宽度的2倍，且圆角半径为元素的宽度值。 扇形：即制作四分之一圆形。”...important要写在分号的前面，但注意当网页制作者不设置css样式时，浏览器会按照自己的样式来显示网页。
元素更加灵活的响应视口改变，还可以通过calc函数实现元素的绝对剧中定位(postion:absoute;top(50vh-Xpx)) min函数(max函数) min()函数支持一个或多个表达式，每个表达式用逗号分隔...相当于min(MIN,min(max,MAX)) 变量使用(var函数) CSS声明变量，需要在声明的变量前加两根连接线：--,需要注意变量名大小写敏感。...利用css动态根据页面变化导致的规则变化，可以在响应式布局中使用media声明全局变量，使得不同的屏幕宽度有不同的变量值。...line-gradient 用于创建一个线性渐变的图像，需要设置起点的方向和渐变的起始颜色。 未设置方向，默认是从上到下。...{ /*最简单的渐变：由中心到四周，由蓝色到黄色*/ background-image: radial-gradient(blue, yellow); } .radial_2 { /*半椭圆形渐变
于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？ ?...他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。 ? 如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。 ?...除了用html标签加载CSS文件，还可以在现有CSS文件中加载。...@import url("tinyScreen.css") screen and (max-device-width: 400px); 七、CSS的@media规则 同一个CSS文件中，也可以根据不同的屏幕分辨率...document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); }); 不过，有条件的话，最好还是根据不同大小的屏幕
目前 CSS 已经原生支持了大部分的混合模式。...background: linear-gradient(45deg, #673ab7, #ff5722); mix-blend-mode: lighten; } } 这里，我们用父元素的伪元素节省一个标签...二维码中间镂空 当然，这还没完，有的时候，我们的二维码中间还会有一些图案，有一张圆形的或者方形的图片。 如果使用上述方法，会有一些瑕疵： 那么，我们还需要根据二维码的样式，将渐变图案中间镂空！...渐变图案中心镂空一个圆形 对于中心图案是圆形的二维码，我们只需要实现这样一个渐变再叠加即可： 这个还是比较简单的，由于原本是一个线性渐变，中间需要镂空一个圆形，最好的方式是使用 mask： div {...这里我简单实现了一个： 我们通过上传一个普通二维码，通过自定义渐变颜色，选择是否需要镂空，镂空的类型及大小，快速制作一个渐变彩色二维码。 简单演示一下： 一个核心利用 CSS 的小工具就完成啦。
该模型识别背景，圆形，矩形三种类别，使用如下图像进行推理: ? 得到的推理结果为三个图像，这三个图像分别是背景、圆、矩形(白色像素为预测结果)： ?...关于标签 假设有如下图像，该图像是一个10x10大小的图像，图像周围是空白背景，中心位置是一个圆形: 该图像包含两个类别，背景和圆，则背景位置对应的标签的像素值应该为0，圆对应的标签像素值应该为1，像下面这样...我们要制作一个只包含三个类别的标签图像，该标签图像中，Background为0，Tom为1，Jerry为2。...我们首先要创建一个和原图大小一致的空白图像，该图像所有像素都是0，这表示在该图像中所有的内容都是Background。...然后根据标签对应的区域使用与之对应的类别索引来填充该图像，也就是说，将Tom对应的区域用1填充，Jerry对应的区域用2填充。具体如下 ?
格式化 CSS格式化程序可以美化压缩的CSS代码，也可以将CSS代码进行压缩 Cron表达式生成器 可以在线生成任务调度Quartz的Cron表达式 GIF生成器 可以在线制作GIF图，将多张静态图片合成一张动态的图片...SVG图像可以调整大小而不会丢失任何细节 URL编码解码 可以将普通URL转为编码URL，也可以将编码URL转为普通URL UTF-8编码解码 可以将文本转换为UTF-8，也可以将UTF-8转为文本 Unicode...单位换算 在线单位换算，支持长度、面积、重量、温度、功率、功/能/热、时间等单位的对等转换 卡通头像制作 免费的卡通头像在线制作工具，可以随心选择人物的面部表情、五官长相和服饰，DIY属于自己的卡通形象...、不限格式、不限尺寸的图片合成一份完整的pdf文档 图像颜色识别 免费的图片颜色在线识别工具，可以提取出图片的主色 图片加水印 图片加水印工具可以自定义文本、字体大小、字体颜色、透明度和文本间距 图片格式转换...流程图 在线流程图工具,内置多种图形如长方形,圆形,线条,箭头,流程图，支持导出SVG/PNG/JPG。
GIF动画最常在H5动效里当担loading导航条，热门小标签等元素，要把控图片大小和精度之间的平衡，所以它一般用于制作小细节的动画。...动效制作手法3：CSS3 CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为擅长于平面层的动画。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。...动效制作手法5：Canvas HTML5 的新元素 ，类似画板，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。本身是没有绘图能力的。...canvas能以.jpg的格式保存图像，svg是文本的格式保存图像 canvas绘制的图像不占DOM，而svg的每个图像都是1个DOM元素 canvas适合图像密集型的动画，而svg不适合大量使用，例如制作飘雪等...动效制作手法7：video 用视频输出非常特别的动效。关于video的魅力我们用吴亦凡H5页面的例子，相信大家瞬间就可以明白了吧^^。 ?
CSS3 动画 javascript 动画（canvas） html 动画（SVG） 个人认为 3 种动画各有优劣，实际应用中根据掌握情况作出取舍，本文讨论的是我认为 SVG 中在实际项目中非常有应用价值...viewbox： 定义了画布上可以显示的区域，当 viewBox 的大小和 svg 不同时，viewBox 在屏幕上的显示会缩放至 svg 同等大小（暂时可以不用理解） 有了 svg 标签，我们就可以愉快的在内部添加...它是一个和数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。...掌握了这个技巧后，就可以使用 stroke-dasharray 和 stroke-dashoffset 制作很多不错的交互场景： SVG 线条动画实现按钮交互 ?...SVG 线条动画实现圆形进度条 多 SVG 图形线条动画配合 之前我司一个 h5 里面应用过的，多SVG 图形线条动画配合，可以制作一些比较酷炫的动画，很有科技感。 ?
Demo 1.2 用CSS隐藏图片 可以用CSS隐藏图片，但是它仍然会被加载到页面中。因此，在执行此操作时请小心，如果一个图片应该被隐藏，那么它可能是出于装饰的目的。...对我来说，我不认为使用 srcset 是根据屏幕宽度显示多个图片大小的完美解决方案。只能让浏览器选择合适的图片，而我们对此无能为力。...它们让我们可以控制 的内容如何调整大小和位置，就像CSS背景图片一样。...注意到上面的模拟图中，你要真的聚焦好了才知道里面有一个圆形。这就是一个问题，为了解决这个问题，我们应该在头像内部添加一个边框，这将是在图像太亮的情况下作为备用。 ?...Demo 4.3.3 具有CSS背景的 如果我要使用 来显示头像，则可能表示该图像具有装饰性。我记得一个用例，它是分散在页面中的随机头像。 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
