整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天继续推荐提高我们摸鱼时间的几个神器，相信我，你会爱上他们的。
地址：https://neumorphism.io/
这个网站为 section 或 div 生成对应UI，它也可以自定义border-radius, box-shadow 等。
地址：https://shadows.brumm.af/
它可以为我们生成多个分层阴影，一种非常酷的效果，也可以从曲线中自定义颜色。
地址：https://bennettfeely.com/clippy/
这个算是我用的最多的，早期录的CSS视频，很多复杂点的效果都是用这个工具帮我生成，前列推荐。
地址：https://9elements.github.io/fancy-border-radius/#30.36.29.30--.
它通过操作 border-radius 生成很 awesome 形状，我们可以在项目中尽情的使用的，通过微调来达到我们想要的形状。
地址：https://cubic-bezier.com/
为 CSS 动画生成cubic-bezier。
地址：https://cssgradient.io/
如果你的项目经常需要使用渐变，那么，你会爱上这个网站。我用了很长时间，它非常完美。在这里你也可以使用一些工具，比如渐变按钮等等。
下面这三个波浪生成器可以生成任何类型的波浪，还在为画破浪而苦恼的小伙伴可以用起来了。
地址：https://getwaves.io/
它能生成简单的波浪，并有一些自定义功能。
地址：https://www.softr.io/tools/svg-wave-generator
它可以产生多个渐变波，非常棒。
地址：https://svgwave.in/
它可以生成多个渐变波浪，但主要特点是它还可以为此生成实时动画。
地址：https://cssgrid-generator.netlify.app/
它为网格生成了很棒的css，你可以用div来定制它，它还会为它创建子元素。
它可以生成网格区域。我们可以根据具体需要来命名和定制区域。
地址：https://loading.io/
这个网站可以生成多个加载动画，并以SVG、GIF、PNG和其他格式下载，但它的最大特点是你可以将这些动画定制到新的水平。
地址：https://www.flaticon.com/
这个库有5.7M+矢量图标。可以在这里找到任何可能的图标，你可以使用它。
地址：https://icons8.com/
这个库也有大量的图标，你可以定制它们，也可以直接使用图标，而无需下载它。
希望你从这篇文章中学到了一些东西，如果有的话，请来波赞被。
~~完，我是刷碗，励志等退休后，要回家摆地摊的人，我们下期见！
作者：Jatin Sharma 译者：前端小智 来源：dev 原文：https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6
天就来和大家分享几个好玩到爆的小网站，都智障中透露着智慧（？）
点开就摸鱼一整天！
地址：https://tikolu.net/emojimix/
在线emoji合成器，可以随机，也可以搜索自己选定的emoji合成出新的表情
我合成了几个，有趣又好笑，感觉还挺智能的
地址：https://www.lanzouy.com/isSE4xlk0uj
大家喜闻乐见的肌肉金轮，就是拿这玩意做的哈哈哈哈哈哈哈哈哈！
下载之后，在这里找到模板就可以换了~~~
地址：https://www.yanlinma.com/10-billion-dollar/
10BillionDollars是一个用来展示100亿美元占有空间有多大的网站，分别展示了来自不同国家的不同币种所需要的大小（共有20个国家的货币，每个国家货币的面额不一样，所以体积差距很大的）
这是100亿美元
日元对应的体积
卢布对应的体积
地址：http://magickeyboard.io/
可以让自己打出来的字母飞上天
有点炫酷的！
地址：https://www.6pian.cn/koutu.html
图片拖进去就能抠出来！
地址：https://www.6pian.cn/dongman.html
图片轻松变成各种风格的动漫脸
地址：https://www.6pian.cn/nianling.html
可以根据年龄，拖动改变效果
地址：http://emojisandearthporn.com/
在一堆emoji表情中，找到那个唯一不动的！
第一关
第二关
第三关
第四关，我真的找不着了天呐
地址：http://liferestart.syaro.io/view/
既然人生都重开了，颜值必须点满啊，说不定也会成为一代直男杀手（并不
沃特？？？直接投胎成男孩了？？？
2倍速度播放了这波澜壮阔的一生，感觉不太平凡
感觉颜值高的人生，注定还不错，95分耶
地址：https://littlealchemy2.com/
一个在线模拟炼金术师的网站。开局只有四个元素：空气、土壤、水、火。然后就可以任意组合了。比如将土和火合在一起，就能得到火山岩。火山岩和水合在一起，得到了蒸汽和黑曜石。
火和空气合成了烟
我合成了半天，居然还有工厂房子之类的东西被我合成出来了。真好玩。
地址：https://sharkle.com/
点击随便进一个酷酷的网站
第一次进入的是这样一个网站，是一个神奇的立方体
第二次看到的不知道是什么东西，一堆可以鬼畜拖动的面条
第三个是一个可以点的七彩炫光气泡
牛片的一系列好用工具：
牛片AI主播配音：在线配音，免费主播音随意选
牛片一键智能字幕：为视频一键添加字幕，音视频转文字稿
牛片视频AI换装：视频AI换装功能在牛片app中~
图片文案提取：粘贴视频链接就能提取文案
牛片一键智能抠图：AI智能在线抠图，一键抠出图片主体
图片图片动漫化：图片动漫化在线处理
照片图片年龄变化：年龄变化面貌
牛片人声分离：歌曲背景音乐伴奏提取
牛片工具箱：影视创作流程必备的效率神器
文：https://www.creativebloq.com/how-to/8-state-of-the-art-css-features
学习使用最新和最棒的CSS属性来构建和设计面向未来的网站。
CSS一直在不断地发展，规范中添加的许多功能，使得它成为web设计者手中一个强大的武器。
CSS的Grid将布局提升到了一个前所未有的高度，自定义属性引入了变量的概念，功能查询检测浏览器是否支持。媒体查询因为新的访问属性也提升到了一个新的高度。可变字体使得能用很少的代码提供去最大的创造力，滚动捕捉（scroll snapping）消除了对JavaScript的依赖。查看我们炫酷的CSS动画示例（https://www.creativebloq.com/inspiration/css-animation-examples），去看看你到底能创造出什么。或者，尝试用网站构造器（https://www.creativebloq.com/web-design/best-website-builder-8133804）构造一个网站（不需要写代码）。
对于那些有创造力的人来说，这里有用于独特布局的CSS形状，以及大量的混合模式和滤镜，以此获得和PhotoShop类似风格的设计效果。继续阅读，了解如何在最新的版本中使用这些必须尝试的新功能。但请记得，一个复杂的站点意味着你需要一个能够支持你需求的虚拟主机服务。
如果你已经使用像Sass这样的预处理器，或者确实使用过像JavaScript这样的编程语言。那么您肯定对变量这样的概念不会陌生 -- 为在代码中重用而定义的值。自定义属性使我们在css中，不需要预处理器，也能这么做。变量可以在 :root 级别设置（创建全局变量）或者在选择器作用域中设置。然后可以使用var(变量名)这样的语法来调用。例如像下面这样我们设置一个--primaryColor这样的变量：
/* On the root element (a global variable) */
:root {
--primaryColor: #f45942;
}
/* Scoped to a selector */
.my-component {
--primaryColor: #4171f4;
}然后我们能够使用这个变量作为属性的值：
h1 {
color: var(--primaryColor);
}自定义属性是继承的，使得它产生了一些非常有用的结果。其中之一就是网站的主题化。继续上面的例子：我们能够在根结点上对--primaryColor定义一个全局的值（#f45942 -- 一个明亮的橘红色），因此每一个我们使用这个变量的地方的值将会是橘红色。但是我们可以在一个选择器内，用一个不同的值（#4171f4 -- 中蓝色）重新定义这个变量。因此在选择器内每一个使用--primaryColor变量的地方，它的计算值都会是蓝色的。
>> 设置默认值
变量作用域是个很好的特性，但有时也可能会让您很惊讶。如果你尝试使用一个还未定义的变量，这个变量的值将会回退到浏览器的默认值或者是一个继承值。而不是在级联中进一步定义的值。在某些情况下，设置一个默认值是合适的：
h1 {
color: var(---primaryColor, blue);
}>> 自定义属性和预处理器的变量有何不同？
自定义属性在几个关键地方与预处理器的变量不同。在你的代码送到浏览器前，预处理器变量会先编译。浏览器从来都不知道这个值是一个变量，它只能看到最终的结果。自定义属性的值是在浏览器里被计算的。你可以在现代的开发者工具中检查它们，改变变量并且查看解析的结果。它们是动态的变量，意味着它们的值可以在css中被改变，或者在JavaScript运行时中被改变。
不像预处理器的变量，自定义属性不能被用在选择器的名字中，属性名或者媒体查询声明中 --- 它们只能被用作CSS属性的值。css预处理器仍然有很多好处，因此我们可能会看到它们还会继续存在一段时间，但是它们可能更多的是和自定义属性组合起来一起被使用。
功能查询是一种测试一个浏览器是否支持css文件中某个特定的CSS属性-值组合的方式。它们实际上消除了对像Modernizr这种功能检测库的需求。它的语法和媒体查询很像：使用 @supports 关键字，跟上你的 属性-值 对。如果浏览器满足这个特殊的条件，它就会执行那些被包裹其中的代码。
功能查询在现代浏览器中得到了很好的支持。但是它们相对来说都是比较新的浏览器，然后另外一个问题可能就是，某个你想要测试是否支持某个属性的浏览器，可能本身并不支持功能查询。通常，处理这种问题最好的方式，就是提供一个后备样式（在功能查询之外），然后在 @suports 规则中包裹浏览器支持的增强特性。
要特别注意，功能查询需要谨慎使用。CSS中最伟大的功能之一就是浏览器会简单地忽略任何它们不理解的属性和值。只有在不这么做会产生视觉bug的情况下，才去使用功能查询，否则你将会为自己增加许多额外的工作。
怎么样去使用功能查询
为了测试单个属性值的支持，我们可以先提供一个后备样式。在下面这个示例中，我们为不支持网格布局的浏览器提供了一个 flexbox 的后备样式。
.my-component {
display: flex;
}
@supports (display: grid) {
.my-component {
display: grid;
}
}
// 或者
.my-component {
display: grid;
}
@supports not (display: grid) {
.my-component {
display: flex;
}
}您可能已经习惯使用媒体查询去探测视口的宽度和高度，以及媒体的类型（通常是screen和打印）。Level 5的媒体查询规范为我们带来了一些可选的需要测试的新媒体特性，它们已经在某些浏览器中得到了支持。这些都给可访问性提供了很好的帮助。
患有前庭疾病的用户以及患有晕车病的用户可能不会喜欢有很多动作移动的页面，例如动画和视差滚动效果。通过使用prefers-reduced-motion媒体查询，我们能给用户提供一个减少动画的选择。
.my-element {
animation: shake 500ms ease-in-out 5;
}
@media (prefers-reduced-motion: reduce) {
.my-element {
animation: none;
}
}
网站提供一个可选的深色主题已经变得越来越流行。Prefers-colors-scheme能够帮住我们查询用户是否设置了一个系统范围的颜色喜好（使用关键字dark、light或者 no-preference），并相应地显示适当的配色。
/* Media queries 02 */
body {
background: linear-gradient(to
bottom, #b5faff, #ffe2b4);
}
@media (prefers-color-scheme: dark) {
body {
color: white;
background: linear-gradient(to
bottom, #0c1338, #3e3599);
}
}通常，如果我们希望在我们的网页上包含同一家族的一系列不同字体，我们一般也需要加载相同数量的字体文件。加载的字体文件越多，你的网页也就越重。从而影响性能 -- 因此通常明智的做法就是最多加载三到四个字体文件（取决于你的性能期望）。
可变字体会改变所有的这些问题。它使得我们只需要一个字体文件就能加载整个字体家族。尽管这个文件通常比单个字体文件会大一点点，但是如果你想使用不同的粗细和风格，可变字体是一个更加性能的解决方案。如果您已经购买了整个字体加载，请记住将其安全的存储在云存储中，避免丢失文件。
>> 变化轴
不仅仅如此，而且使用可变字体，我们也不仅限于一小部分的字体粗细。使用常规字体时，我们可用的字体粗细通常都是用100的倍数描述。通常，400表示常规粗细，300表示细体，700表示粗体-不同的字体家族支持不同的粗细。可变字体有一个可变的轴，对于某些属性，它给我们提供一个范围内的值，例如字体粗细。字体的变化轴可能为1-900，这将会使得我们能够使用900种不同的字体粗细。
这个变化的轴不仅仅局限于字体粗细。可变字体可以有x高度、倾斜、衬线长度、对比度（仅仅举几个例子）等不同的变化轴，这意味着单个字体文件可以为我们提供数百种甚至数千种变体。我们甚至可以给这些属性设置动画，从而使我们获得一些非常酷的效果。Mandy Michael(https://codepen.io/mandymichael)拥有大量的能够真实的测试这些极限的创意示例。
浏览器对可变字体的支持非常好。并且许多字体生产商都非常积极地开发新的可变字体，让你现在就可以立即使用。尽管它们经常都是专业版，特别是那些有着更多特性的字体家族。如果你仅仅只是想试试可变字体，看看它们到底能做什么。这里存在着许多的可变字体试玩网站。
注意，如果你想立即使用可变字体，那么你需要确保你的操作系统是最新的。它们不能在老的系统上工作。
>> 字体变化的设置（font-variation-settings）
当我们想改变字体粗细的时候，我们只需要简单地使用CSS的font-weight属性。font-variation-settings是一个新的属性，它能够让我们完全的访问一个字体的不同变化轴。它们既包含预先注册的轴，也包含自定义的轴。
>>> 预先定义的轴
有五种不同的预定义轴，分别对应着CSS中的不同属性。其中每一个都有一个所谓的“轴标签”。 这些预先定义的轴分别是: wght (font-weight), wdth (font-stretch), slnt (font-style: oblique/angle), ital(font-style: italic), opsz (font-optical-sizing)。我们可以通过单个css属性或者通过font-variation-settings属性访问这些轴。
这些轴不是必须都包含在可变字体中（其中一些可能只有一个或两个变化轴），但他们可能会变得更加通用。
>>> 自定义轴
自定义轴是字体设计者包含的定制轴，可以是任何东西。它们可以包括（举例）衬线长度（serif length）、x高度（x-height），甚至其他一些更有创意的东西（排版不是那么典型），例如旋转。
这两种不同的轴，都必须表示为四个字符的标记。预定义的轴必须是大写的，而自定义的轴必须是小写的。这两者都可以在Font-Variation-Settings属性中组合使用。Font-Variation-Settings设置是可动画的，可以实现一些非常酷的UI效果！其中在图标字体中也进行了一些非常有趣的实验。
假如你对像Photoshop和Illustrator这类的设计工具熟悉，那么你可能会注意到混合模式（blend modes）和它们怎么被用来在图片上制作不同的效果。混合模式的工作方式是使用数学公式将两个或者多个层混合在一起，以计算每个像素的结果值。图层可以是任何东西--图片、渐变或者纯色。其中有些混合模式会产生比较黑的结果（例如，乘，将图层的像素值相乘），也有比较亮的（例如，遮盖和覆盖）。然而，我们不需要理解它们的数学原理就能使用它们。尝试使用不同的混合模式可以给我们一个很好的感觉，当与不同的层组合时，哪种混合模式会产生想要的效果。
通过CSS属性mix-blend-mode和background-blend-mode，我们能够在浏览器里获得像Photoshop这样的图片效果。这两个属性都使用相同的属性值，但工作方式稍微有些不同。
>> Background-blend-mode
背景混合模式将目标的背景层混合在一起。我们的元素有背景图片、颜色和渐变。它们可以在不影响前景内容的情况下相互混合。我们可以为background-blend-mode指定多个值，每个背景层都单独指定一个。
.my-element {
background: url(#myUrl),
linear-gradient(45deg, rgba(65, 68,
244, 1), rgba(203, 66, 244, 0.5)),
rgba(244, 65, 106, 1);
background-size: cover;
background-blend-mode: screen,
multiply;
}>> Mix-blend-mode
Mix-blend-mode 影响这个元素怎么和它的父节点以及兄弟节点的混合，包含任何的前景和背景内容，以及伪元素。可以通过混合覆盖伪元素（::before、::after）来实现一些有趣的创造性效果。
.my-element {
background: rgb(244, 65, 106);
mix-blend-mode: multiply;
}>> CSS filters
CSS filter属性也被用来创造醒目的视觉效果，使用filter属性和滤镜函数值。不像混合模式，它们直接应用一个图片效果在它们指定的元素上，并且一个元素可以使用多个滤镜。
>> 改变灰度
相比依赖混合模式，我们可以更大程度上控制元素的颜色。滤镜可以把一个图片变成黑白的，可以调整明亮、对比度和饱和度，模糊一个元素或者增加一个投影。它们同样支持动画，和hover配合可以有更好的效果。
>> SVG滤镜(filters)
css滤镜实际上是一个SVG滤镜的简化版本。CSS filter 属性也接收一个url()函数，允许我们传递一个指向SVG滤镜的URL。SVG过滤器非常强大，可以实现一些令人难以置信的图片效果，但是它们也比CSS过滤器函数要复杂得多。Sara Soueidan在Codrops上有一系列文章，如果你有兴趣编写自己的自定义SVG过滤器。请在(https://tympanus.net/codrops/2019/01/15/svg-filters-101/)上阅读这些文章。
>> 裁剪(clipping)和蒙版(masking):超越矩形
我们在web上习惯于处理盒子，但是不是所有的东西都必须是矩形。裁剪和遮罩是同一个硬币的两面，是两种不同的方式，显示或者隐藏一个元素的不同部分，使得背景可一穿透显示。这使我们有能力在我们的设计中引入有趣和有创意的形状。
>>> Clip-path
这个clip-path()属性允许我们通过定义一个路径来裁剪元素。它使用一些基本的形状函数，inset(), circle(), ellipse(), 或者 polygon()。它允许我们使用一对xy坐标来定义路径，来制作更加复杂的裁剪形状。另外，我们也可以通过给path()函数传递一个SVG路径，或者使用url()函数来提供一个SVG的路径id。
>>> 不在path范围内的
裁剪一个元素，会把你定义的path之外的任何东西都裁剪掉，不过元素依旧是一个矩形。如果你有在path边界之外的内容，那么也会被一起裁剪掉--它不会包裹在形状内。
>>> Mask-image
mask-image允许我们能够通过使用一张图片（SVG或者透明的PNG）或者渐变作为蒙版来显示或者隐藏图像的某些部分。不像clip-path，我们可以使用蒙版给我们的图像添加纹理，因为蒙版源不是一个路径，它允许是透明的。
CSS Shapes规范允许我们将文本环绕在浮动的几何形状周围，创造有趣的，像杂志一样的布局。使用shape-outside属性能够做到这一点。和clip-path类似，我们可以给这个属性一个基本的形状函数，circle(), ellipse(), inset(), polygon(), 或者一个指向SVG的path，事实上，这两个一起工作的非常协调。shape-outside可以有效地包裹我们的文本，但不会影响浮动元素。如果我们想要我们的文本看起来像环绕在一个图片或者浮动元素周围，我们也能够使用和clip-path相同的值。使用 shape-margin 增加形状路径和包裹它内容之间的空白。可以看一下Stuff & Nonsense（https://stuffandnonsense.co.uk）的网站，看看css-shape是怎么被用来把文字包裹环绕一个位于中心的图片。
FireFox 在开发者工具栏面板里有一个 shape-path 编辑器，这个对于复杂的形状工作来说非常有用。 但是，也必须小心使用。包裹一段文字的开头有着非常好的艺术效果，但是却不一定有最好的用户体验。复杂的锯齿形状会使那一块的文本非常难以阅读。对于重要的文本，你依然想让它清晰明了。
许多网站利用JavaScript库的优势去提供一个流畅的、像本地App那样的滚动体验，当用户滑动页面的时候，内容快速定位到指定的位置。现在，随着滚动捕获的规范被制定，我们能够在我们的CSS文件中完成这个操作--这就不需要引入大量的JS模块，使得页面变得很重。
为了实现滚动捕获，我们需要一个元素去作为我们的滚动容器。容器的直接子元素指示将要捕捉地点，并且可以在捕捉区域以各种不同的方式对齐。
当我们和另一个新的CSS属性值--position: sticky组合使用时，滚动捕捉能够会更有效果。这个position的值表示，当子元素在容器内部滚动的时候，它会“粘住”在一个指定的位置--这是另外一个，以前只能用javascript实现的功能。点击可以查看这个滚动捕捉和位置结合的示例。sticky and intersectionObserver示例（https://www.creativebloq.com/inspiration/css-animation-examples）。
*请认真填写需求信息，我们会在24小时内与您取得联系。
