介绍loaders.css是Github上一个使用纯粹的css实现的开源loading动画库，完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分，以避免复杂的绘画和布局计算。下面这张图是在demo页面截取的Gif效果图，可供参考！Github就这样一个小小的库也收获了9.5k的stars，以下是其仓库源地址https://github.co
......
559
0
0
2022-04-03
作者：Patrik Kiss 译者：前端小智 来源：dev1.Animista网站地址:http://animista.net/网站描述:在线生成 css 动画Animista是一个在线动画生成器，同时也是一个动画库，它为我们提供了以下功能1. 选择不同的动画我们可以选择想要的动画类型（例如entrance/exist），除了可以选择某个动画（例如，scal
......
480
0
0
2022-03-31
今天在写uni-app项目的时候学到一个不错的API，今天记录一下。CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。当我们把flex-shrink设置为0的时候就是不让元素挤压。该柔性收缩属性指定多少项目会缩小相对的其余项目柔性容
......
383
0
0
2022-03-30
点击右上方红色按钮关注“web秀”，让你真正秀起来前言作为程序员的我们，书写代码也需要大量的技巧。一份良好的代码能让人耳目一新，让人容易理解，同时也让自己成就感满满。因此，在这里简单的整理一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。CSS实用技巧第一讲：文字处理本小结主要是围绕css对文字处理的技巧，有兴趣的小伙伴可以收藏一下。文本
......
401
0
0
2022-03-30
用一个CSS属性创建一个响应式网站，让我们来看看它是如何做到的。以这个模板为例，没有应用css属性。使用 clamp() CSS函数，我们可以创建仅具有一个属性的响应式网站。现在添加魔术CSSclamp(minimum, preferred, maximum);
在这里！你已经完成了✌说明clamp()的工作原理是“夹紧”或限制一个灵活的值，使其处于最小和
......
431
0
0
2022-03-29
本文已经过原作者 Ahmad Shadeed 授权翻译大家看到这个标题可能会以为小智是不是又写错别字了 ，响应式高度设计？你认真的吗？因为“响应式Web设计”通常是在多个宽度和设备尺寸上检查浏览器。我们一般通过减小宽度调整水平方向的响应能力，但是我很少看到通过减小浏览器高度来进行垂直响应的考虑。此时，智米么内心可能有一丝的波动，并带有许些疑问：我们需要降低浏
......
369
0
0
2022-03-29
animate.css是一款强大且实用的css动画库，目前github的stars量69K以上教程使用的是最新版本4.1.1一、安装1、通过npm工具安装npm install animate.css --save
2、html文件直接导入github搜索moment直接下载源码文件包<link rel="stylesheet" href="./cs
......
523
0
0
2022-03-27
1.直角三角形（1）等边直角三角形制作 <style>
.box1 {
/* 盒子的宽度、高度、行高、字体大小都设置为0 */
width: 0;
height: 0;
line-height: 0;
font-size: 0;
/* 利用边框的四个边的宽度、线型、颜色属性，设置三角形 */
/*
......
463
0
0
2022-03-27
1.CSS样式初始化不同的浏览器对有些HTML标签属性的默认值是不同的，为消除这种差异，需要对CSS进行初始化，即通过设置样式及其属性值，替代浏览器默认的属性值。2.京东首页CSS初始化（1）CSS初始化样式引入方式采用引入外部样式表的方式进行CSS初始化（2）相关代码解读/* 京东CSS初始化 */
/* *为通配符，表示html所有标签 */
*
......
609
0
0
2022-03-27
radio、checkbox和switch应该是一个比较常用的html标签，尤其是在中后台ERP系统里面更为常见。不过浏览器自带的样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，自定义样式就被提出来了。实现思路纯css实现的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的input元素，即使这个inp
......
1042
0
0
2022-03-27
例1（小米米官网）：font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;例2（淘宝技术研发中心）： font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;例3（加网 ）： font: 14px/1.5 'Microsoft YaHei',
......
758
0
0
2022-03-27
1. 查看元素伪类 css 样式例如我想查看元素触发 hover 时的 css 样式。先选中该元素，然后按下图操作：2. 临时增删元素 class3. document.body.contentEditable="true"在控制台输入 document.body.contentEditable="true"，就可以对页面直接进行编辑。4. 查看 place
......
416
0
0
2022-03-27
前言最近在写移动端 H5 应用，遇到一个值得记录下来的点。现在从它的由来到实现，我们来聊一下移动端 1px，说 1px 不够准确，应该说成 1 物理像素。通过阅读下面文章，你将会理解以下问题：问题为什么有 1px 这个问题？实现 1px 有哪些方法？这些方法分别有哪些优缺点？开源项目中使用的哪些解决方案？如何在项目中处理 1px 的相关问题？由来基本概念首先
......
364
0
0
2022-03-27
本人一开始是做移动端原生开发的程序员一枚。现在原生开发实在是不咋景气，公司现在的项目基本上都是前端的项目，所以现在被调到前端，从小白一枚的角度出发分享一部分项目开发过程中用的比较多的知识吧，今天先学习一个flex布局，这个在项目中用到的实在太多了。一、介绍什么叫做弹性布局呢，他就是根据内容多少分配多大的控件，当内容不足时会自动的换行，去适应父布局，这也是他最
......
634
0
0
2022-03-27
在这篇文章中我们将学习关于自适应图片：一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片，并且看看HTML提供了什么工具来帮助实现它们。自适应图片仅仅只是自适应网站设计的一部分，为您奠定了自适应网页设计的良好基础。为什么要用自适应的图片？让我们来看一个典型的场景。一个典型的网站可能会有一张页首图片，这让访问者看起来感到愉快。图片下面可能会
......
436
0
0
2022-03-27