30-seconds-of-css
你可以再30秒或者更短的时间内读懂的有用的CSS代码片段的精选.
github地址 不过代码不在github上面
官网地址 上面有详细的介绍和演示
下面是我读到的一些个人认为比较实用的片段
1. 等宽高比
给定一个可变宽度的元素, 它确保其高度以响应的方式与宽度保持成比例, 即宽度与高度的比例保持一致.
<div class="constant-width-to-height-ratio"></div>
CSS代码
.constant-width-to-height-ratio {
background: #333;
width: 50%;
}
.constant-width-to-height-ratio::before {
content: '';
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
2. 计数器
计数器本质上是由CSS维护的变量, 其值可以通过CSS规则递增以跟踪它们的使用次数
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
CSS代码
ul {
counter-reset: counter;
}
li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
效果
3. 自定义文本选择
更改文本选择的样式
<p>Sleect some of this text</p>
<p class="custom-text-selection">Select some of this text.</p>
CSS代码
::selection {
background: aquamarine;
color: black;
}
.custom-text-selection::selection {
background: deeppink;
color: white;
}
效果
4. 自定义变量
CSS变量, 其中包含要在整个文档中重用的值.
<p class="custom-variables">CSS is awesome!</p>
CSS代码
:root {
--some-color: #da7800;
--some-keyword: italic;
--some-size: 1.25em;
--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
}
.custom-variables {
color: var(--some-color);
font-size: var(--some-size);
font-style: var(--some-keyword);
text-shadow: var(--some-complex-value);
}
5. 渐变文本
为文本提供渐变(IE无效)
<p class="gradient-text">Gradient text</p>
CSS代码
.gradient-text {
background: -webkit-linear-gradient(pink, red);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
6. 溢出滚动渐变
向溢出元素添加渐变以更好的提示用户有更多内容需要滚动
<div class="overflow-scroll-gradient">
<div class="overflow-scroll-gradient__scroller">
Content to be scrolled
</div>
</div>
CSS代码
.overflow-scroll-gradient {
position: relative;
}
.overflow-scroll-gradient::after {
content: '';
position: absolute;
bottom:;
width: 240px;
height: 25px;
background: linear-gradient(
rgba(255, 255, 255, 0.001),
white
); /* transparent keyword is broken in Safari */
pointer-events: none;
}
.overflow-scroll-gradient__scroller {
overflow-y: scroll;
background: white;
width: 240px;
height: 200px;
padding: 15px 0;
line-height: 1.2;
text-align: center;
}
7. 环形旋转器
用CSS动画创建一个正在加载的动画
<div class="donut"></div>
CSS代码
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #7983ff;
border-radius: 50%;
width: 30px;
height: 30px;
animation: donut-spin 1.2s linear infinite;
}
其实有很多加载动画都可以用css3去书写, 如果不考虑IE9以下的流浪器
30-seconds-of-css的更多相关文章
- [PHP]Maximum execution time of 30 seconds exceeded
前言 在使用PHP渲染页面页面的时候,如果程序处理的时间特别久,超过配置文件(php.ini)设置的超时时间,就会出现如下提示: Maximum execution time of 30 second ...
- Drupal错误:drupal Maximum execution time of 30 seconds exceeded database in解决方法
Drupal开源内容管理框架 Drupal是使用PHP语言编写的开源内容管理框架(CMF),它由内容管理系统(CMS)和PHP开发框架(Framework)共同构成.连续多年荣获全球最佳CMS大奖,是 ...
- Maximum execution time of 30 seconds exceeded解决错误方法
Maximum execution time of 30 seconds exceeded解决错误方法Fatal error: Maximum execution time of 30 seconds ...
- PHP超过三十秒怎么办Maximum execution time of 30 seconds exceeded
1 如图所示, Maximum execution time of 30 seconds exceeded 2 在php.ini文件中查找"max_execution_time"把 ...
- Maximum execution time of 30 seconds exceeded解决办法
Maximum execution time of 30 seconds exceeded,今天把这个错误的解决方案总结一下: 简单总结一下解决办法: 报错一:内存超限,具体报错语句忘了,简单说一下解 ...
- Fatal error: Maximum execution time of 30 seconds exceeded in
Fatal error: Maximum execution time of 30 seconds exceeded in C:\Program Files\Apache Software Found ...
- 【PHP】Maximum execution time of 30 seconds exceeded解决办法
Maximum execution time of 30 seconds exceeded,今天把这个错误的解决方案总结一下: 简单总结一下解决办法: 报错一:内存超限,具体报错语句忘了,简单说一下解 ...
- 解决php网页运行超时问题:Maximum execution time of 30 seconds exceeded
Fatal error: Maximum execution time of 30 seconds exceeded in C:\Inetpub\wwwroot\ry.php on line 11 意 ...
- 项目读取数据,一直出现 Closing connections idle longer than 30 SECONDS,卡死现象
项目读取数据,一直出现 Closing connections idle longer than 30 SECONDS,卡死现象. 我的是在读取oracle数据的时候出现这种错误. 可以参考这篇文章 ...
- Mysql : Maximum execution time of 30 seconds exceeded
在向Mysql数据库中插入数据时,提示Maximum execution time of 30 seconds exceeded.......翻译:最大运行时间超过30秒. 最后在php.ini中找到 ...
随机推荐
- adb devices连接不上设备
1.端口被占用 解决办法:netstat -aon|findstr "5037",找到占用5037这个端口的进程,然后根据pid在任务管理器里面找到进程然后结束 2.插拔usb数据 ...
- AVD Manager 模拟器使用
一.模拟器配置 1.双击启动AVD Manager,进入配置界面 2.点Create按钮创建 3.配置模拟器基本信息 --AVD Name:设备名称,自己定义一个,用英文(不要用中文) --Devic ...
- TensorFlow函数:tf.zeros_like
tf.zeros_like函数 tf.zeros_like( tensor, dtype=None, name=None, optimize=True ) 定义在:tensorflow/python/ ...
- 深入浅出 - vue变化侦测原理
废话真多!!! 其实在一年前我已经写过一篇关于 vue响应式原理的文章,但是最近我翻开看看发现讲的内容和我现在心里想的有些不太一样,所以我打算重新写一篇更通俗易懂的文章. 我的目标是能让读者读完我写的 ...
- 再谈kbmMW垃圾回收
很早就写了关于kbmMW Server如何实现的垃圾回收,但最近一段时间还是为此遇到问题,实现的Server不能稳定运行,发生问题后不响应客户端的查询请求,在客户端得到服务端返回地址错误信息,只能重启 ...
- Centos7防火墙开放8080端口
查看已经开发的端口: firewall-cmd --list-ports 开启端口: firewall-cmd --zone=public --add-port=8080/tcp --permanen ...
- SQL注入之Sqli-labs系列第二十六关(过滤空格、注释符、逻辑运算符注入)和第二十六A
开始挑战第二十六关(Trick with comments and space) 0x1看看源代码 (1)过滤了# or and /**/ / \ ,通过判断也过滤了空格 (2)这样一来只能看 ...
- JavaScript条件语句-5--if语句的嵌套
JavaScript条件语句 学习目标 1.掌握length属性的应用 2.掌握if语句的嵌套 length 语法:string.length 功能:获取string字符串的长度 返回值:number ...
- (转载)Peter Norvig:十年学会编程
作者 Peter Norvig 是计算机科学家,Google 的研究总监.在本文中,Peter Norvig会告诉你:为什么急功近利地学习软件开发技术是没效果滴? ================华丽 ...
- Quorum算法
分布式系统中,一般保存多个数据副本,明显可以提高系统可靠性.并且存储这些数据副本的节点,不仅做容灾用,也可以提供服务,作负载均衡. 这里就涉及到一个数据一致性的问题,也就是各副本间要进行同步,来保持最 ...