收藏这几个开源库,写css你会笑出声

你是否遇到过写css没灵感,写不出酷炫的效果,那这篇文章你一定要看完。知道这几个开源库,它能让你写出炸天的效果并且有效地增加你的摸鱼时长。

1.CSS Inspiration

网址:https://chokcoco.github.io/CSS-Inspiration/#/

图片

图片

CSS Inspiration 上面有各种天马行空的css教程,涵盖了css的许多常见的特效。以分类的形式展示不同的css属性或者不同的课题,例如布局方式、border、伪元素、滤镜、背景3D等。这些都是css里面十分重要的知识点,不管是用于学习还是项目中实际运用都是不错的选择。

当然你也可以用来巩固基础知识,可以利用此项目来制作一些常用的特效,可以看到有上百个经典案例供我们参考,重点是提供源代码,复制粘贴即可使用。

图片

2.Neumorphism

地址:https://neumorphism.io/

图片

Neumorphism属于新拟态ui风格,是目前比较新颖的一种前端css设计风格。它的格调简单,基本颜色比较浅,如米白、浅灰、浅蓝等。再利用阴影呈现出凹凸效果,看起来很简单舒适且有3D效果,因此我们可以通过拟态设计出很多优美的页面,拖动效果控制条即可秒生成css样式。

图片

3.AnimXYZ

地址:https://animxyz.com/

图片

如果说你热衷于动画,那animxyz绝对是你的不二之选。你可以使用animxyz组合和混合不同的动画来创建自己的高度可定制的css动画,而无需编写一个单一的关键帧。

图片

相比于animate css,它的强大之处在于你可以在这里根据自己的想法来手动配置动画。实现的动画代码实例,我们可以复制迁移到项目中使用。

4.CodePen

图片

图片

最后要推荐的则是我最常用也是我最推荐的,它就是codepen。codepen是一个完全免费的前端代码托管服务,上面云集了各路大神,拥有全世界前端达人经典项目进行展示,让你从中获取到很多的创作灵感。

它可以实现即时预览,你甚至可以在线修改并及时预览别人的作品。支持多种主流预处理器,快速添加外部资源文件,只需在输入框里输入库名,codepen就会从cdn上寻找匹配的css或js库。

相关内容拓展:(技术前沿)

近 10 年间,甚至连传统企业都开始大面积数字化时,我们发现开发内部工具的过程中,大量的页面、场景、组件等在不断重复,这种重复造轮子的工作,浪费工程师的大量时间。

针对这类问题,低代码把某些重复出现的场景、流程,具象化成一个个组件、api、数据库接口,避免了重复造轮子。极大的提高了程序员的生产效率。

介绍一款程序员都应该知道的软件 JNPF 快速开发平台,基于 Java/.Net 双技术引擎,专注于低代码,采用业内领先的 SpringBoot 微服务架构、支持 SpringCloud 模式,完善了平台的扩增基础,满足了系统快速开发、灵活拓展、无缝集成和高性能应用等综合能力;采用前后端分离模式,前端和后端的开发人员可分工合作负责不同板块,省事又便捷。

免费体验官网:www.jnpfsoft.com/?csdn

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/184403.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

时间序列分析算法的概念、模型检验及应用

时间序列分析是一种用于研究随时间变化的数据模式和趋势的统计方法。这类数据通常按照时间顺序排列,例如股票价格、气温、销售额等。时间序列分析的目标是从过去的观测中提取信息,以便预测未来的趋势。 以下是关于时间序列分析的一些重要概念、模型检验…

[Android]使用Retrofit进行网络请求

以下是使用 Retrofit 发送 POST 请求获取分页城市列表的 Kotlin 代码示例 1.在你的 build.gradle 文件中添加 Retrofit 和 Gson 的依赖 dependencies {......implementation("com.squareup.retrofit2:retrofit:2.9.0")implementation("com.squareup.retrofit2…

在Linux服务器部署爬虫程序?大佬只需七步!

之前在某乎上看见一篇关于《为什么很多程序员都建议使用 Linux》的文章,结合我自身关于Linux的使用经验。心血来潮得写了一段关于我在Linux系统部署爬虫程序的心得,希望结识更多的爬虫技术大佬,一起游弋在代码世界中。 根据我多年在Linux上部…

基于C#实现Dijkstra算法

或许在生活中,经常会碰到针对某一个问题,在众多的限制条件下,如何去寻找一个最优解?可能大家想到了很多诸如“线性规划”,“动态规划”这些经典策略,当然有的问题我们可以用贪心来寻求整体最优解&#xff0…

vue3.0使用leaflet

1、获取天地图密钥; 访问:https://www.tianditu.gov.cn/ 注册并登录,访问开发资源 =》地图API =》 地图服务=》申请key 应用管理=》创建新应用=》获取到对应天地图key 2、引入leaflet组件 参考资料:https://leafletjs.com/reference.html#path npm install leaflet …

用自己热爱的事赚钱,是多么的幸福

挖掘天赋可能有些困难,但挖掘爱好就简单多啦!最幸福的事情就是能用自己喜欢的事情赚钱。 我们要说的是一个博主,他非常喜欢骑自行车,虽然他的工作是在外贸公司做销售,但每当有空时,他都会骑自行车。而且他…

竞赛选题 题目: 基于深度学习的疲劳驾驶检测 深度学习

文章目录 0 前言1 课题背景2 实现目标3 当前市面上疲劳驾驶检测的方法4 相关数据集5 基于头部姿态的驾驶疲劳检测5.1 如何确定疲劳状态5.2 算法步骤5.3 打瞌睡判断 6 基于CNN与SVM的疲劳检测方法6.1 网络结构6.2 疲劳图像分类训练6.3 训练结果 7 最后 0 前言 🔥 优…

MES管理系统需要与ERP系统协同工作吗

在当前的制造业环境中,信息化、智能化、数字化已经成为了企业转型升级的重要方向。其中,ERP企业管理系统与MES生产管理系统的应用和实施,对于提升企业的运营效率和竞争力具有显著效果。然而,在面对系统工具选择时,许多…

内网横向技术

如果拿下了一台机器之后寻找域控机器 ipconfig /all 找到域名 ping 域名或者nslookup域名

局域网协议:动态主机配置协议(Dynamic Host Configuration Protocol,DHCP)

在局域网络中,DHCP协议通过自动化和简化网络配置过程,提高网络的可管理性和灵活性,使得设备可以更轻松地连接到网络并获得所需的网络配置信息。 文章目录 What is DHCP?DHCP的组成1. DHCP客户端2. DHCP服务器:3. 中继代理&#…

Linux CentOS7的主机名

主机名,也称为计算机名,是提供给网络连接的设备(如系统、交换机、路由器等)的识别名称。同一网络中不能有两个主机名相同的系统。Linux系统给当前主机命名的目的是能够容易记住,尤其是在部署集群的时候更加方便。 一般…

第二证券:股票破发后面还会涨吗?

许多出资者遇到这样的状况,自己心里也着急及担忧。破发是股价掉破了发行价,这种状况下就会引起出资者的不安。那么股票破发后边还会涨吗?这个问题没有定论,需求从多个视点进行分析和判别。 从经济基础面来看,破发的股…

JSP EL表达式之 empty

好 本文我们还是继续说EL表达式 我们来讲一个非空判断的好手 empty 我们直接编写代码如下 <% page contentType"text/html; charsetUTF-8" pageEncoding"UTF-8" %> <%request.setCharacterEncoding("UTF-8");%> <!DOCTYPE html&…

Maven 简单配置阿里云镜像

配置步骤&#xff1a; 1、找到 maven 的安装目录&#xff0c;修改settings.xml 2、在文件中找到<mirrors>标签&#xff0c;然后再标签中添加阿里云配置即可 <mirror><id>aliyunmaven</id><mirrorOf>*</mirrorOf><name>阿里云公共…

Echarts+Vue+dataV 首页大屏静态示例Demo

效果图: <template><div class="content bg"><!-- 全屏容器 --><!-- 第一行 --><div class="module-box"><div style="flex: 0 1 30%"><dv-decoration-10 style="height: 5px" /></div…

2016年2月17日 Go生态洞察:Go 1.6版本发布

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

简述马尔可夫链【通俗易懂】

前言 马尔可夫链&#xff08;Markov Chain&#xff09;可以说是机器学习和人工智能的基石&#xff0c;在强化学习、自然语言处理、金融领域、天气预测、语音识别方面都有着极其广泛的应用。 The future is independent of the past given the present 未来独立于过去&#xff…

批量将本地N个英文Html文档进行中文翻译-操作篇

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

GPT、GPT-2、GPT-3论文精读笔记

视频&#xff1a;GPT&#xff0c;GPT-2&#xff0c;GPT-3 论文精读【论文精读】_哔哩哔哩_bilibili MAE论文&#xff1a;把bert用回计算机视觉领域 CLIP论文&#xff1a;打通文本和图像 GPT 论文&#xff1a;Improving Language Understanding by Generative Pre-Training …

Android开发从0开始(Activity篇)

Activity的生命周期 对应解释&#xff1a; startActivity(new Intent(源页面.this,目标页面.class)) 结束当前活动页面finish(); Activity的启动模式 App先后打开两个活动&#xff0c;此时活动会放入栈内。 &#xff08;Android:launchMode”standard”&#xff09;默认 &am…