css画横线箭头_2020年你应该关注这50款前端热门工具:CSS HTML 工具篇
大家好,在一篇文章里 2020年让人难以置信的50款前端新工具:JavaScript插件篇(一),我分享了 11 款 JS 插件,本篇文章我将会和大家分享七款 CSS、HTML 相关的新工具。
12、project wallace
官网地址:https://www.projectwallace.com/
一款在线可视化统计分析项目中CSS代码的工具,这款在线工具十分强大,方便你管理分析项目中的CSS代码,并通过可视化的报表进行呈现,报表功能主要包含以下内容:
- 按照文件历史版本统计代码的行数、CSS规则、选择器的使用情况、代码的大小,并以可视化的报表进行呈现。
- 比较CSS文件代码的更改,并通过颜色提示选择器的复杂性降低了多少。
- 帮你查找隐藏的css hack 和 !importants 的数量。
- 可视化的统计颜色的使用情况、字体的使用情况、媒介查询的使用情况
- 可视化统计动画使用的情况
- CSS命名规则的可视化归类统计,帮你梳理归类
其实功能不止这些,更多功能等待你的挖掘,此款工具唯一不足的地方就是只能免费创建一个项目,如果需要创建更多的项目,你需要付钱。
13、DebuCSSer
官网地址:https://github.com/lucagez/Debucsser
DebuCSSer 是一款简易版的CSS调试工具,通过线框的形式呈现网页上的DOM元素,使用这款工具十分简单,你可以按住 CTRL 键,然后使用鼠标在页面上进行滑动 ,就会看到对应元素被加上了线框,并显示元素的宽高和对应的class或id。当你按住 CTRL + SHIFT 时,页面上所有的元素都以线框的形式进行呈现,方便你看元素与元素之间的关系。这些快捷键的设置当然你可以自定义,包括线框样式。
14、Animated CSS burger
官网地址:https://github.com/march08/animated-burgers
一款汉堡动画变换(三条横线) 的CSS插件,说简单点就是三个横线的动画变换,我们在做导航的侧滑菜单会经常看到它,点击图标变成叉号菜单打开,然后再次点击叉号菜单关闭,恢复成三条横线。这款插件除了可以变成叉号,还能对叉号的变换效果进行细微控制,比如旋转,挤压、侧滑、滑动等效果。同时还能变成各种方向的箭头。
15、DropCSS
官网地址:https://github.com/leeoniya/dropcss
一款快速高效、体积小(10KB)的清理未使用CSS代码的插件。DropCSS将HTML和CSS作为输入,仅返回使用的CSS作为输出。它的自定义HTML和CSS解析器针对99%的用例进行了高度优化,从而避免了处理格式错误的标记或样式表的开销。
16、cssfx
官方网站地址:https://cssfx.netlify.com/
cssfx网站,汇集了许多常用的漂亮的动画小组件,比如按钮点、链接的点击滑动效果,还有一些常用的loading动画小组件,这些小组件的代码十分简洁,只有CSS没有JS,点击对应的组件,就会显示对应的源码,很方便的集成到你的项目中。此项目中的代码免费开源并准守MIT许可。
17、CSS Grid Generator
官方网站地址:https://cssgrid-generator.netlify.com/
通过这款在线工具,你可以设置行和列的数字还有单位,工具将为您生成一个 CSS Grid 网格布局!在方框中拖动来创建 div 放置在网格内。
虽然这个项目可以为您提供一个基本的布局, 但是本项目不是对 CSS 网格功能的全面介绍。这只是一种快速使用 CSS Grid 网格布局功能的方法。
我注意到很多人没有使用 Grid,因为他们觉得这个太复杂了,难以理解。 Grid 可以做很多事情,而这个小的生成器只涉及到了一小部分功能。 这样做的目的是让人们能够快速上手并创建更多有趣的布局。
顺便在分享一个通过在线游戏的形式学网格布局的网站:https://cssgridgarden.com/
18、Darkmode.Js
官方网站地址:https://github.com/sandoche/Darkmode.js
花几秒钟你也能打造一款 白天/夜间 阅读模式的网站,这个插件使用 css mix-blend-mode 的特性为你的网站添加夜间模式。只需要复制粘贴代码在网页上添加一个小部件就可以进行白天和黑夜模式的切换,除了这种方式,你还可以编程的方式进行使用。该插件是轻量级的,基于原创JS实现。同时它基于本地存储的方式,记住你最后一次选择的阅读模式。
该插件具有以下特点:
- 窗口小部件自动适应窗口大小
- 能够记住用户的选择
- 如果操作系统偏好设置为夜间黑暗深色主题的话,则自动显示为“夜间模式 ”(如果浏览器支持“ preferred-color-scheme”)
- 可以用编程的方式进行实现,无需挂载小部件
小节
关于 CSS & HTML 工具的插件就分享到这里,如果你喜欢我的分享,麻烦给个关注、点赞加转发哦,你的支持,就是我分享的动力,在下篇文章我将和大家分享一些关于测试及数据相关的工具,敬请期待...
css画横线箭头_2020年你应该关注这50款前端热门工具:CSS HTML 工具篇相关推荐
- css画横线箭头_css 画带边框的箭头的问题
我圈调直年情,量的单框来离理这接法清都的为想要用css画一个如下图的箭需朋朋支带不新器功几的事上为做的和时意后头,带边框 思路很简单,用一个带坐上下边框的长方形,拼一个灰色的三角形,然后在用一个白色的 ...
- css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
- 利用css画三角箭头图标
利用css画三角箭头图标方式 单独设置正方形的两条相邻的边框,通过transform的rotate属性值旋转实现箭头图标(注意单位为deg) div {width: 50px;height: 50px ...
- css空心图形,css画空心箭头
css画空心箭头 .hot-point-title { width: 30px; height: 38px; border:1px solid #999; position: relative; } ...
- 你玩过谷歌的猜画小歌,但你用过他们这款绘制城市和世界的工具吗?
在今年的7月份,谷歌发布了其首款微信小程序[猜画小歌] 官方对这款小程序是这么介绍的 这是由Google开发的一款人工智能猜画小程序,用户绘制出一个日常物件,然后神经网络会在限定时间识别用户的涂鸦.该 ...
- 用CSS样式画横线的方法
今天在做网页的时候,需要用到CSS画横线,虽然比较简单,但也出了一些小问题,拿来做个备忘. 方法一:用DIV,代码如下:(推荐此方法)<div style="width:800px;h ...
- 用CSS画圆、半圆、线性箭头
一.css画半圆 border-radius 可以设置盒子四边的弧度.可以设置%,px等单位. 在css中利用border-radius可以画出圆形,半圆,等图案 半圆需要两个块元素,两个块元素分别设 ...
- css html弄出哆啦a梦,用css画一个哆啦A梦
原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了CSS的乐趣! 好好学习,天天向上! body{ background-color: #66B3FF; height: 300px; ov ...
- css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
最新文章
- VS 调试断点命中了,程序无法再断点处中断
- POJ-4004:数字组合(用位移方法解组合数问题,Java版)
- python三种导入模块的方法和区别
- DDD:如何更好的使用值对象
- java 获取年 两位,java使用jxl读取日期年份只显示前两位的解决方法
- 安全是什么意思_进衡水火车站要转着圈找门!这是什么意思……清扫车路边倒水 既浪费又不安全...
- Python入门--函数的参数总结
- 敏捷开发中XP与SCRUM的区别
- MySQL 在512M一下内存优化配置
- WebGL 3D on iOS8 正式版
- 毕向东_JavaScript视频教程_JavaScript回顾
- 如何设计报表?手把手教你5步轻松制作报表
- 程序员可选择的个博客论坛网站
- 【ARM】迅为rk3568开发板buildroot添加桌面应用
- pandas中访问使用多个索引的Series
- SR-GNN论文解读并附代码分析
- 硬件电路(3)设计篇----为什么栅极型推挽电路不用上P下N?
- 从2019看2020前端发展趋势
- IDEA 简体繁体切换插件
- 关于冒险岛封包拦截程序的开发计划
热门文章
- h5微信本地调试 vue_Vue 移动端微信内H5调起支付(利用js sdk)
- 蝴蝶优化算法_算法|FFT基础及各种常数优化,5万字笔记:公式推导+代码模板...
- maven整合@data注解_springboot整合spring Cache(redis)
- Python下载安装
- Python自动化运维——文件与目录差异对比
- Java8 PriorityBlockingQueue源码分析
- JavaScript实现floatAsBinaryString浮点转为二进制字符串算法(附完整源码)
- wxWidgets:使用 wxWidgets 资源文件XRC
- boost::sort模块实现spreadsort wstring 排序示例
- boost::signals2模块实现为类定义后构造函数的示例