程序员经验分享-hwhale

前端常用的CSS工具库

2023-11-06

1、 animista，在线查看自己需要的动画效果，比较常用，直接复制代码即可。

官网： Animista - CSS Animations on Demand

2、Animate.css是一个现成的跨浏览器动画工具库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。 

官网： Animate.css | A cross-browser library of CSS animations.

使用方法：初识Animate.css_前端 萌新的博客-CSDN博客_animate.css 教程

 3、cssbuttongenerator 前端微网站交互按钮在线设计，直接复制代码即可。

官网：CSS Button Generator | create CSS buttons without code

4、 零代码工具箱，集合了在线css阴影效果，毛玻璃效果，按钮设计，文字排版等系列工具。

官网：零代码-前端工具箱

 5、边框阴影生成器，不同颜色样式都可以在线编辑，直接复制代码即可。

官网：Neumorphism/Soft UI CSS shadow generator

 6、花式边界半径，多样化圆角随便拿捏，这个工具可以在线编辑通过拖拽的方式生成需要的 border-radius，赋予更加个性化的圆角效果。直接复制代码即可。

官网：https://9elements.github.io/fancy-border-radius/

 7、平滑阴影，可以在线编辑生成多个分层阴影，提供非常酷的效果，也可以自定义颜色，直接复制代码即可。

官网：Smooth Shadow

 8、CSS Gradient 是一个在线编辑css渐变色背景，直接复制代码即可。

官网：CSS Gradient — Generator, Maker, and Background

 9、css 网格生成器，在线编辑 Grid布局，可以设置行和列的数字还有单位，生成一个 CSS Grid 网格布局，在方框中拖动来创建 div 放置在网格内，可直接复制代码。

官网：CSS Grid Generator

10、过渡动画 ,各种各样的css动画集合! 

官网：Transition.css - easy transitions with clip-path

 11、加载动画，可以在线生成多个加载动画并将其下载为 SVG、GIF、PNG和其他格式，有很多样式供你选择。

官网：https://loading.io/

12、波浪生成器，在线生成编辑波浪效果的SVG格式。 

官网：Get Waves – Create SVG waves for your next design

13、Anime.js ，轻量的JavaScript 动画库， 拥有简单而强大的API。可对 CSS 属性、 SVG、 DOM 和JavaScript 对象进行动画。

官网：anime.js官网_免费、灵活的轻型JavaScript动画库 | animejs

 

14、CSS兼容性查询，CSS、ES6等 浏览器兼容性查询工具，这样就不怕出现兼容性问题了。

官网：Can I use... Support tables for HTML5, CSS3, etc

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

css

javascript

CSS3

html

前端常用的CSS工具库 的相关文章

  • 两列表：一列尽可能小，另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr

  • JavaScript 验证和 PHP 验证？

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单

  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改？使用哈希？

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法

  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test

  • 如何使使用 css 调整大小的图像在 IE 中看起来不错？

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制

  • JavaScript 中的 Promise 有什么意义？

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调

  • 计算三次贝塞尔曲线的弧长、曲线长度。为什么不工作？

    我正在用这个算法计算弧长 三次贝塞尔曲线的长度 function getArcLength path var STEPS 1000 gt precision var t 1 STEPS var aX 0 var aY 0 var bX 0

  • 如何使用 Javascript 设置查询字符串

    有没有办法使用 javascript 设置查询字符串的值 我的页面有一个过滤器列表 单击该列表时 它将更改右侧的页内结果窗格 我正在尝试更新 url 的查询字符串值 因此如果用户离开页面 然后单击 后退 按钮 他们将返回到最后一个过滤器选择

  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com

  • -webkit-box-shadow 与 QtWebKit 模糊？

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL

  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div

  • JavaScript eval("{}") 返回行为？

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a

  • 使用 CSS 的响应式图像

    我发现调整图像大小以使其具有响应能力很棘手 我正在开发一个 php 应用程序来自动将网站转换为响应式版本 我有点被图像困住了 我已经成功地为网站上的每个图像添加了一个包装类 并且可以很好地调整图像的大小 我的问题在于自然小于窗口的图像 例如

  • 用于选择特定 div 中具有特定类的锚元素的 jQuery 选择器是什么

    我有一些这样的代码 我想选择每个 a 带有类的标签status在 div 中foo div a class status a div 你可以这样做 foo find status a

  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用

  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht

  • $resource.query 返回分割字符串（字符数组）而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P

  • Webpack 4：如何使用 LESS 获取 CSS 源映射？

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说

  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011

  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下

随机推荐

  • 将开源clucene引擎编译成动态库

    本章介绍如何将clucene编译成动态库 开发桌面级的全文检索引擎 1 准备工具 编译平台 windows 10 代码编译工具 vs2010 CMake版本 cmake 3 17 1 win64 x64 源代码版本 clucene core

  • C++ 模板类和友元

    模板类的友元分三类 1 非模板友元 2 约束模板友元 即友元的类型取决于类被实例化时的类型 3 非约束模板友元 即友元的所有具体化都是类的每一个具体化的友元 1 模板类的非模板友元函数 count 函数不是通过对象调用的 它是友元不是成员函

  • QT中css样式

    QLabel 字体左对齐 QLabel qproperty alignment AlignLeft 字体居中 QLabel qproperty alignment AlignCenter 字体右对齐 QLabel qproperty ali

  • 基于FiscoBcos v3.0.1 pro版的host网络模式集群环境搭建

    安装软件 更新 最新版本系统软件 yum update y 安装docker yum install y yum utils device mapper persistent data lvm2 设置yum源 yum config mana

  • python+unittest+HTMLReopertRunner生成测试报告

    1 安装HTMLReport 在线安装 使用pip命令安装HTMLReport 命令 pip install HTMLReport 安装好的位置在 Python安装路径下的Lib site packages下 离线安装 直接将下载好的HTM

  • 现在上车音视频开发还来得及吗？论音视频开发的的前景趋势！

    一 行业现状 核心竞争力 定义音视频是程序届的皇冠 掌握音视频意味着拿到通往未来的船票 不用担心会被其他人替代 音视频是有门槛的 是与其他人拉开差距的分水岭 高端人才相关缺乏 Boss直聘中 北上广深很多年限上50w 70w的音视频岗位 常

  • Sqlilabs-22

    这里来到了第一阶段的最后一关 22 关 其实跟 21 关一样 只不过变成了双引号 而已 直接上菜吧o uname YWRtaW4iIGFuZCBleHRyYWN0dmFsdWUoMSxjb25jYXQoMHg3ZSwoc2VsZWN0IGR

  • 数字后端学习之SDC

    SDC是一个设计中最重要的文件 为什么这么说呢 ppa大家知道把 sdc就是要对ppa进行约束 那sdc有哪些具体的内容呢 1 描述芯片的工作速度 包括 create clock create generate clock 要知道clock

  • 华为OD机试 Python 称砝码

    题目 你有一些不同的砝码 每个砝码都有自己的重量和数量 试问 用这些砝码 你可以得到多少种不同的重量组合 输入 第一行给出砝码的种类数 n 1 n 10 第二行按顺序列出每种砝码的重量 重量范围为 1 m 2000 第三行按顺序列出每种砝码

  • 商品推荐（内容过滤 + 协同过滤）

    目录 1 名词列表 2 协同过滤 2 1 基于物品的协同过滤 itemCF 2 1 1 数据模型 2 1 2 商品相似度矩阵生成 2 1 3 推荐策略 2 2 基于用户的协同过滤 userCF 2 2 1 数据模型 2 2 2 用户相似度矩

  • Hive/MaxCompute SQL性能优化(三)：数据倾斜优化实战

    SQL性能优化系列 Hive MaxCompute SQL性能优化 一 什么是数据倾斜 Hive MaxCompute SQL性能优化 二 如何定位数据倾斜 前面介绍了如何定位数据倾斜 本文介绍如果遇到各种数据倾斜的情况该怎样优化代码 Ma

  • LINUX基础试题大全（3）

    说明 此文章由于题数庞大 为方便阅读本人将其分为四篇文章为大家分享 答案会今后不断进行更新 LINUX基础试题大全 1 填空题题 LINUX基础试题大全 2 单项选择题 LINUX基础试题大全 3 简答 LINUX基础试题大全 4 数据结构

  • C语言指针数组和数组指针［转］

    ps 文章属于总结性前 第一部分部分来自于 http www cnblogs com hongcha717 archive 2010 10 24 1859780 html 数组指针 也称行指针 定义 int p n 优先级高 首先说明p是一

  • 车载通信——J1939故障码

    一 诊断 UDS是统一诊断系统 冻结帧 出现故障码时 ECU存储故障码出现时的数据 就是冻结帧 二 J1939故障诊断 SAE J1939应用层定义了12种诊断报文 Diagnostic Message DM 诊断故障码 DTC 故障码 可

  • eval(function(p,a,c,k,e,d) javascrip类型代码 解决办法

    eval function p a c k e d e function c return c35 String fromCharCode c 29 c toString 36 if replace String while c d e c

  • 均衡器--时域均衡，频域均衡，无限长迫零（Zero force\ZF）均衡器，有限长时域迫零(ZF)均衡器，无限长MSE均衡器

    均衡器 1 原因 2 线性均衡器 2 1时域均衡 2 2频域均衡 3 均衡器 3 1无限长迫零 Zero force ZF 均衡器 3 2有限长时域迫零 ZF 均衡器 3 3无限长MSE均衡器 4 性能比较 1 原因 之前讨论的是在AWGN

  • 【GitHubShare】适合练习python的编程类网站，可以边学边玩

    非常有意思的编程网站 leetcode pythontip Coding Games Codewars CodeCombat Checkio Cyber Dojo pythonchallenge Code Monkey leetcode l

  • 【Docker】Docker中启动redis

    1 使用命令 docker pull redis 来下载redis镜像 2 通过命令 docker images来查看redis镜像是否安装成功 3 安装成功后通过 docker run name java redis d redis 来运

  • 客户异常数据清洗详细教程——pandas

    前言 在不同行业中 我们经常会遇到一个麻烦的问题 数据清洗 尤其是当我们需要处理客户编码异常数据时 这个问题变得尤为重要 想象一下 许多银行都是以客户为单位管理数据的 因此每个客户都有一个独特的编码 在处理这些数据时 我们常常会面临以下问题

  • 前端常用的CSS工具库

    1 animista 在线查看自己需要的动画效果 比较常用 直接复制代码即可 官网 Animista CSS Animations on Demand 2 Animate css是一个现成的跨浏览器动画工具库 可用于您的 Web 项目 非常

热门标签