首页 > 其他分享 >【前端】相关高效率工具(已更新21个)

【前端】相关高效率工具(已更新21个)

时间:2022-09-05 14:55:25浏览次数:104  
标签:动画 高效率 21 前端 css https 官网 com CSS

1、AnimXYZ

官网:https://animxyz.com/

AnimXYZ可以帮助你拆过你见,自定义和组合复杂的动画!AnimXYZ使用 CSS 变量来实现动画,无需编写单个关键帧而实现无限数量的独特动画!节省时间并完全控制元素的移动方式。AnimXYZ 专为 Vue、React、SCSS 和 CSS 打造,让网站栩栩如生!

 

 

2、Shaper

官网:https://hihayk.github.io/shaper/

这是一个必须尝试!  这个交互式工具。可以将让你在页面上玩各种 UI 的“LIVE”!!

 

 

3、Vizzu

官网:https://vizzuhq.com/

Vizzu 是一个免费的开源 JavaScript 库,用于动画数据故事和可视化。你可以用 vizzu 构建疯狂的东西,利用数据 viz 中动画的力量。

 

 

4、Party JS 

官网:https://party.js.org/

基本上,这个 JS 库将帮助我们实现惊人的视觉照亮效果!

 

 

5、Theatre JS

官网:https://www.theatrejs.com/

Theater JS 是一个用于高保真运动图形的动画库。它旨在帮助我们实现详细的动画。它基本上是一个可视化编辑器,您可以在其中为 DOM 元素设置动画

 

 

6、Glass UI

官网:https://ui.glass/generator/

开始使用这个基于 glassmorphism 设计规范的免费 CSS 生成器来快速设计和自定义样式属性。

 

 

7、Whirl

官网:https://whirl.netlify.app/

这是一个必须尝试! Whirl 将帮助我们以更少的代码,创建各样的 CSS 加载动画!轻松加载 CSS 动画!弧形、基本、反弹、追逐、颜色范围、色轮、不同方向、点、点淡入淡出和更多史诗动画。

 

 

8、Codemyui

官网:https://codemyui.com/

这是一个非常酷的网站,有一堆很酷的 CSS、HTML 和 Javascript 片段。所有部分都根据不同的 UI 设计进行划分,并包含各种 Web 元素和片段。

9、CSS Button Generator

官网:https://cssbuttongenerator.com/

CSS Button Generator是一个免费的在线工具,可让您创建跨浏览器的 HTML 和CSS 按钮样式,您不必学习任何复杂的CSS规则。只需单击并滑动即可制作CSS 3按钮。很多漂亮的按钮样本。

 

 

10、花式边界半径

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

通过拖拽的形式生成需要的border-radius!

 

 

11、平滑阴影

官网:https://shadows.brumm.af/

可以生成多个分层阴影,提供非常酷的效果,你也可以自定义颜色。

 

 

12、阴影生成器

官网:https://neumorphism.io/#e0e0e0

此网站通过 选择颜色:或大小:半径:距离:强度:模糊:形状:复制边框半径:50px;背景,生成非常nice的阴影,让你的界面更加的美观自然。

 

 

13、css在线工具

官网:https://tool.lu/css/

美化:格式化代码,使之容易阅读。

净化:将代码单行化,并去除注释。

整理:按照一定的顺序,重新排列css的属性。

优化:将css的长属性值优化为简写的形式。

压缩:将代码最小化,加快加载速度!

 

 

14、cssgradient

官网:https://cssgradient.io/

CSS Gradient 是一个快乐的小网站和免费工具,可让您为网站创建渐变背景。

15、css网格生成器

官网:https://cssgrid-generator.netlify.app/

您可以设置行和列的数字还有单位,我将为您生成一个 CSS Grid 网格布局!在方框中拖动来创建 div 放置在网格内。

 

 

16、过渡动画

官网:https://www.transition.style/

各种各样的css动画合集!

 

 

17、加载动画

官网:https://loading.io/

在这里你可以生成多个加载动画并将其下载为SVG、GIF、PNG和其他格式,但它最棒的特点是你可以将这些动画自定义到一个新的水平。值得尝试。

 

 

18、波浪生成器

官网:https://getwaves.io/

通过一些自定义生成简单的波纹。

 

 

19、我可以用这个css吗?

官网:https://caniuse.com/?search=clip-path

不要问我,得问它!css浏览器兼容性查询工具

 

 

20、零代码工具箱

官网:https://www.lingdaima.com/

各种前端实用的好工具,杜绝造轮子,每款工具都经过精心打磨,帮助所有程序员提高前端开发效率!

 

21、css技巧

官网:https://lhammer.cn/You-need-to-know-css/#/zh-cn/

css小技巧合集,一直在更新!

 

标签:动画,高效率,21,前端,css,https,官网,com,CSS
From: https://www.cnblogs.com/danhuai/p/16658143.html

相关文章

  • 从零开始配置vim(21)——会话管理
    很多代码编辑器都有这么一个功能,重新进入编辑器之后能恢复上次打开的所有文件,窗口布局,有的甚至是上次设置的一些配置。那么vim是否也可以实现这样的功能呢?答案是肯定的。使......
  • 前端JS-Day20
    BOM:浏览器对象模型,核心对象为Window 通过var声明的所有全局变量和函数都会变成window对象的属性和方法,let或const则不行。  窗口加载事件:addEventListener('load......
  • 2022-2023-1 20221311《计算机基础与程序设计》第一周学习总结
    作业信息班级:https://edu.cnblogs.com/campus/besti/2022-2023-1-CFAP作业链接:https://www.cnblogs.com/rocedu/p/9577842.html#WEEK01作业目标:快速浏览教材作业正文:ht......
  • 前端传值字符串,包含逗号问题
    encodeURIComponent()函数_百度百科(baidu.com)//需要前端使用encodeURIComponent(value);编码,后端使用URLDecoder.decode(titles[i],"UTF-8");解码Stringtitle=URL......
  • 2022-2023-1 学号20221418 《计算机基础与程序设计》第1周学习总结
    2022-2023-1学号20221418《计算机基础与程序设计》第1周学习总结作业信息这个作业属于哪个课程https://edu.cnblogs.com/campus/besti/2022-2023-1-CFAP这个......
  • 2022-08-27 田龙跃 web前端(JS)
    原生JS数据类型Number-数字String-字符串Boolean-布尔型null-空undefined-未定义变量(同var功能相同)letnum1=“das”(let会自己检查变量是否重复定义)constnum......
  • 学年(2022-2023-1) 学号(20221317)《计算机基础与程序设计》第1周学习总结
    作业信息班级:https://edu.cnblogs.com/campus/besti/2022-2023-1-CFAP作业链接:https://www.cnblogs.com/zhanquanchen/p/16654783.html作业要求:快速浏览教材(https://www......
  • vue纯前端导入导出excel
    vue纯前端导入导出excel我们有时会遇到在前端实现导入/导出excel的需求这里直接推荐两个现成的vue导入导出excel的库,他们是基于xlsx封装的https://www.npmjs.com/packa......
  • 前端学习之------浏览器兼容(vue)
    1、vue支持所有兼容ES5的浏览器,IE8及以下的浏览器不支持IE5特性,所以IE8及以下的浏览器都不支持vue。2、Babel插件:IE浏览器不支持ES6语法,Babel插件的作用就是把ES6语法转为......
  • 前端学习之------浏览器兼容(移动端)
    1、禁止IOS识别长串数字为电话<metacontent="telephone=no"name="format-detection">2、禁止IOS弹出各种操作窗口.box{ -webkit-touch-callout:none;}3、禁......