一些好用的css和js

最新推荐文章于 2024-04-09 22:05:41 发布
最新推荐文章于 2024-04-09 22:05:41 发布
阅读量391 收藏
点赞数 1
分类专栏： css js 文章标签： css 性能优化 动画 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xmLove93/article/details/78042276
版权
js 同时被 2 个专栏收录
15 篇文章 0 订阅
订阅专栏
css
10 篇文章 0 订阅
订阅专栏

Loaders.css

Loaders.css是一个为性能优化的实现加载动画效果的 CSS 框架，仅用CSS样式就能实现一个loading动画效果。在CSS中这是一个用于编写加载动画的集合;其中每个动画被限制为CSS属性的一小部分，以避免昂贵的绘制和布局计算。

用法

首先,引入 loaders.min.css 和 loaders.css.js，这个JS只是为了简化动画的DIV标签，如果不加这个JS，那么你的动画就必须加上对应数量DIV标签才能正常显示动画，所以建议加上，这样语义化好会好些。

<link rel="stylesheet" type="text/css" href="loaders.min.css">
<script type="text/javascript" src="loaders.css.js"></script>

其次,加入页面代码,给loading元素加入动画class

<div class="loader-inner ball-pulse"></div>

还可以改变loading的颜色

.ball-grid-pulse > div {
     background: blue;
}

浏览器兼容性


  • IE 9+
  • Firefox 36
  • Chrome 41
  • Safari 8

Download click me

Animated text fills with CSS and SVG

使用这个FreeCode的虚线描边模式来创建SVG文本，对于Web开发员来说，这是非常有用的。
Demo click me
Download click me

Responsive Tabbed Navigation

这是便捷的响应式标签导航，for Mobile or PC，支持横向和纵向菜单定位，使用 CSS 和* jQuery* 创建。这使得你能很容易地添加CSS标签导航元素到你的网站设计中。
Demo click me
Download click me

jeet

这个网站进入比较蛋疼,薛微有点慢,但是jeet很in,是很有用的css栅格系统.
Demo消失在了黑洞中…
Download消失在了太阳系…

Hover Effect Ideas

这是一个超级炫酷的悬停效果集合 墙裂推荐!!!!!
Demo click me
Download click me

Simple Stack Effects

一个简单的堆叠效果集合。其主要思路就是开始显示一个项目，然后通过触发某个事件，从而显示更多的项目。主要用在图片显示,当然脑洞大的可以花样更多.
Demo click me
Download click me

Subtle Click Feedback Effects

主要用于移动端的点击或交互触摸屏幕可视化的微妙效果集合，这些效果大多由CSS动画的伪元素完成的。
Demo click me
Download click me

Drag and Drop Interaction Ideas

拖动!各种拖动效果!放置的层面也是多样的!
Demo click me
Download click me

zhangxm 0104
关注
专栏目录
【前端篇】html、css、JavaScript、vue基础知识
weixin_39335999的博客
12-22 883
本文主要介绍测试开发所需学习的html、css、JavaScript、vue基础知识
很好用的css（千万别）
07-01
css，很好用！提供给同事使用！css，很好用！提供给同事使用！
好用的一些CSS样式
andy20160821的博客
03-25 145
1.垂直对齐 .vc{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } 2. 渐变背景动画效果 button { ...
css好用吗,比较好用的 CSS 的技巧，总有一个你需要的！
weixin_34362937的博客
08-04 137
原标题：比较好用的 CSS 的技巧，总有一个你需要的！一、黑白图像当你需要让一张彩色的图片显示为黑白照片的时候，你可以用下面的一段代码。 二、使用 :not() 在菜单上应用/取消应用边框 三、页面顶部阴影给网页加上漂亮的顶部阴影效果 四、给 body 添加行高不需要给别给 p,h之类的添加行高，直接：body{ line-height: 1;}五、所有一切都垂直居中 IE11中需要注意 flex...
分享八个超级好用的css
不二喵老师
07-06 380
1. Text-stroke 文字轮廓 <p class="text-text-stroke">测试 text-stroke 属性</p> <style> .text-text-stroke{ /* 文字填充颜色 */ -webkit-text-fill-color: transparent; /* 文字边框宽度 */ -webkit-text-stroke: 1px #000; } </st..
好用的css库
weixin_30892889的博客
12-22 260
实现元素各种抖动效果：https://elrumordelaluz.github.io/csshake/ 转载于:https://www.cnblogs.com/xuepei/p/8086918.html
js，css
zwldzj的博客
05-28 364
1.img标签的title和alt有什么区别？ 1.alt：图片加载失败时，显示在网页上的替代文字 2.title：鼠标放在上面时显示的文字 3.alt是必要属性，title非必要 2.html5有那些新特性、移除了那些元素 （1）新增特性 1.新增标签（常用的）：article、aside、audio、video、canvas、footer、header、nav、section 2.新增localStorage、sessionStorage 3.新增contenteditable属性（任何dom节点只要加
一些CSS
qq_39262418的博客
08-24 918
一些css
网站模板一键下载css，js，html，php工具
03-23
网站模板下载工具 用于开发仿站是最好用的工具 一键下载css，js，html，php文件 几分钟就可以制作一个网站模板开发
超好用的网站整站静态资源文件CSS\JPG\JS下载神器
07-10
标题中的“超好用的网站整站静态资源文件CSS\JPG\JS下载神器”指的是一个工具或服务，专门用于批量下载网站上的CSS（层叠样式表）、JPG（联合图像专家小组格式的图片）和JS（JavaScript）等静态资源。这类工具对于...
Html+Css+JS的生日网页
08-26
积分所需不高 关注博主留言可以白嫖!!!! 积分所需不高 关注博主留言可以白嫖!!!! 积分所需不高 关注博主...好用的可以送给女朋友/兄弟/老师/家长 适用于各种对象的生日祝福网页 稍加修改也可应对其他场合 内附使用说明
好用的CSS框架，真的很好用
06-03
很好用的CSS，960 Grid System Version 1.5 2010-05-11 Created by Nathan Smith. See the official site for more info: http://960.gs/ ============================================================================ Thank you for downloading the 960 Grid System. I hope it helps to streamline web development workflow. Enclosed in the bundle are printable sketch sheets and template files for Adobe Fireworks and Photoshop, OmniGraffle and Visio. Also included is a lightweight CSS file, which contains the grid dimensions. To use this file, simply include the 960.css in the <head> of the HTML page. You may also use the reset.css and text.css files, or opt to leave them out. Here is an example of the XHTML code necessary to incorporate the CSS files: <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/960.css" /> </head> It is worth noting that these styles do not automatically make up a finished site design. They are simply a starting point, ideally for rapid prototyping or as a basis for creating your own designs. You should not feel constrained by the way I have built the initial code. If you disagree with how something has been done, feel free to revise it for the needs of your particular site. The files in the 960 Grid System are free of charge, licensed under GPL/MIT. ============================================================================ Note that if you are building a site in a language which reads from right to left, use the CSS files that begin with "rtl_" instead. Denote the language: <html lang="..." dir="rtl"> Be sure to replace "..." with the appropriate two-letter abbreviation of the language you are using. Example: lang="he" for Hebrew, lang="ar" for Arabic. ============================================================================ Special thanks to Eric Meyer for his comprehensive browser reset stylesheet. http://meyerweb.com/eric/tools/css/reset/
很好用的css+js加密工具
12-13
很好用的css+js加密工具 ，修好好源码中的需要加密的文件目录（会编译子文件夹）；请确保自己的css和js文件的编码格式为utf-8
好用的 CSS 特性
闲客的博客
05-27 157
好用的 CSS 特性 1.多列布局 CSS 提供了对多列布局的支持。支持设置布局中的列数 (column-count)、内容应如何列之间的流动规则、列之间的间距 (column-gap) 以及列分割线（column-rule）的样式。 效果： 主要样式： .masonry { width: 1440px; margin: 20px auto; columns: 4; column-gap: 30px; .item { width: 100%; break-inside
10个好用的CSS工具
BaoBao_yt的博客
02-08 1308
1.Neumorphism 这个网站为可以为我们的section或是div生成对应UI，它还可以自定义border-radius, box-shadow等。 2.Shadows Brumm 它可以为我们生成多个分层阴影，带来非常酷的效果，也可以通过曲线来自定义颜色。 3.CssClip-Pathmaker 它可以生成各种不同形状的漂亮的剪辑路径，可以非常方便地生成各种形状和属性。 4.FancyBorder Shape Generator 它通过操纵边界半径生成好看的形状，我们可以在项目的
CSS——7个好用的CSS属性
qq_45997679的博客
04-08 119
1、background-clip backgroundclip CSS属性设置元素的背景是否扩展到其border 、padding 或content 框之下。 此属性采用以下值之一：border-box (default) | padding-box | content-box | text 主要说明一下属性值是：text的时候。当属性时text的时候，以区块的文字作为裁剪区域，即文字的背景是裁剪图片的背景。以下为属性值效果： p { font-size: 100px; font-w
10个好用的的css框架，2024年最新前端语言基础教程
最新发布
m0_60452141的博客
04-09 2229
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。一个人可以走的很快，但一群人才能走的更远。
项目中好用得css样式
sinat_38992528的博客
06-03 227
效果一： html：<a href="#">沙盒<i class="triangle"></i><i class="plus"></i></a> css：a{position：relative；display:block;text-align:center;line-height:60px;} .triangle{display:block;width:0;height:0;border-right:15p...
少见又好用的css属性
weixin_42574100的博客
05-31 339
overlay属性 img图片变形如何处理 object-fit
给我几个好用的css动画库和css好看的边框样式库
06-09
4. WOW.js：一个基于 CSS3 和 JavaScript 的动画库，可以在滚动页面时触发动画效果，支持自定义配置和事件绑定。 5. Animista：一个在线的动画生成器，提供了大量的 CSS 动画模板，可以生成自定义的 CSS 动画代码。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值