你可以再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变量, 其中包含要在整个文档中重用的值.

阮一峰老师关于css变量的介绍

张鑫旭老师关于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的更多相关文章

  1. [PHP]Maximum execution time of 30 seconds exceeded

    前言 在使用PHP渲染页面页面的时候,如果程序处理的时间特别久,超过配置文件(php.ini)设置的超时时间,就会出现如下提示: Maximum execution time of 30 second ...

  2. Drupal错误:drupal Maximum execution time of 30 seconds exceeded database in解决方法

    Drupal开源内容管理框架 Drupal是使用PHP语言编写的开源内容管理框架(CMF),它由内容管理系统(CMS)和PHP开发框架(Framework)共同构成.连续多年荣获全球最佳CMS大奖,是 ...

  3. Maximum execution time of 30 seconds exceeded解决错误方法

    Maximum execution time of 30 seconds exceeded解决错误方法Fatal error: Maximum execution time of 30 seconds ...

  4. PHP超过三十秒怎么办Maximum execution time of 30 seconds exceeded

    1 如图所示, Maximum execution time of 30 seconds exceeded 2 在php.ini文件中查找"max_execution_time"把 ...

  5. Maximum execution time of 30 seconds exceeded解决办法

    Maximum execution time of 30 seconds exceeded,今天把这个错误的解决方案总结一下: 简单总结一下解决办法: 报错一:内存超限,具体报错语句忘了,简单说一下解 ...

  6. 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 ...

  7. 【PHP】Maximum execution time of 30 seconds exceeded解决办法

    Maximum execution time of 30 seconds exceeded,今天把这个错误的解决方案总结一下: 简单总结一下解决办法: 报错一:内存超限,具体报错语句忘了,简单说一下解 ...

  8. 解决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 意 ...

  9. 项目读取数据,一直出现 Closing connections idle longer than 30 SECONDS,卡死现象

    项目读取数据,一直出现 Closing connections idle longer than 30 SECONDS,卡死现象. 我的是在读取oracle数据的时候出现这种错误. 可以参考这篇文章 ...

  10. Mysql : Maximum execution time of 30 seconds exceeded

    在向Mysql数据库中插入数据时,提示Maximum execution time of 30 seconds exceeded.......翻译:最大运行时间超过30秒. 最后在php.ini中找到 ...

随机推荐

  1. wpf 使用Font-Awesome图标字体

    wpf 使用Font-Awesome图标字体 1.http://fontawesome.io/ 中下载Font-Awesome字体 然后把字体文件fontawesome-webfont.ttf 拷贝到 ...

  2. Linux:NFS配置

    NFS配置 1.创建分享的文件:touch /var/www/html/aa.txt2.查看是否安装NFS:rpm -qa|grep nfs3.查看IP地址:ifconfig4.配置NFS:vi /e ...

  3. Flask源码阅读-第一篇(flask包下的__main__.py)

    源码: # -*- coding: utf-8 -*-""" flask.__main__ ~~~~~~~~~~~~~~ Alias for flask.run for ...

  4. 10.3.1 iOS启动画面横屏是怎么回事?

    产生这个问题的原因是编译旧版Delphi建立的项目,二种解决方法: 1.用 10.3.1 重建空工程,再把使用的单元文件重新加进来.这个操作有点麻烦,尤其对于使用单元多的文件,不过,有种方法,就是先把 ...

  5. ChinaCock界面控件介绍-CCNavigateTitle

    先看一下实际项目中的运行效果,如图,通过品牌的导航栏,显示不同品牌的商品列表. 完全基于ChinaCock控件包中CCNavigateTitle组件实现的,这是一个可视控件,从组件面板上拖放一个到Fo ...

  6. python储存数据的方式

    python储存数据的方式2017年10月13日 23:38:10 Nick_Spider 阅读数:59286 标签: redis 数据库 爬虫 存储 结构 更多 个人分类: 数据库 爬虫 pytho ...

  7. CHAP认证(双向)

    实验要求:掌握CHAP认证配置 拓扑如下: R1enable 进入特权模式configure terminal    进入全局模式hostname R1 设置主机名 interface s0/0/0 ...

  8. 【tomcat】启动报错:Failed to initialize end point associated with ProtocolHandler ["http-apr-8080"] java.lang.Exception: Socket bind failed 和java.net.BindException: Address already in use: JVM_Bind错误解决

    背景:[新手] 将开发机子上的Tomcat连同其中的项目,一起拷贝到服务器上,启动tomcat的start.bat,然后报错如下: 问题1: Failed to initialize end poin ...

  9. linux下数学函数

    linux 下如果用数学函数比如sin,需要加上“-lm”参数编译,如:gcc test.c -lglut -lGLU -lGL -lm && ./a.out

  10. 安装Nmon方法

    1. 登录IBM官方网站(http://nmon.sourceforge.net/pmwiki.php?n=Site.Download)下载相应版本的nmon工具:nmon_linux_14g.tar ...