CSS常用示例100+ 【目录】

目前已有文章 11 篇

本专栏记录的是经常使用的CSS示例与技巧，主要包含CSS布局，CSS特效，CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点，CSS特效主要是一些动画示例，CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录、展示、分享，希望能给您带来帮助。

CSS布局

• CSS布局001：画各种三角形

CSS特效

• tCSS特效001：鼠标放div上，实现旋转、放大、移动等效果
• CSS特效002：花样的鼠标悬停效果
• CSS特效003：太阳、地球、月球之间的绕转动画
• CSS特效004：hover图片，显示文字或附加层
• CSS特效005：绘制一个环环相扣的五个环
• CSS特效006：绘制不断跳动的心形
• CSS特效007：绘制3D文字，类似PS效果
• CSS特效008：鼠标悬浮文字跳动动画效果
• CSS特效009：音频波纹加载律动

CSS花边

• CSS花边001：无衬线字体和有衬线字体

什么是CSS

CSS是Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。CSS的作用就是为网页设置外观，相当于给HTML文档穿上了华丽的衣服。CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒子模型的控制能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

为什么要使用CSS？

这个问题得从HTML和浏览器的发展说起。HTML 标签原本被设计为用于定义文档内容。通过使用 h1、p、table这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。但是，在浏览器发展过程中，由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C）在 HTML 4.0 之外创造出样式（Style）。

相关专栏

CSS的应用无处不在，希望某个片段就能帮助你，欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》，
《 leaflet示例教程100+ 》，
《 Cesium示例教程100+》，
《MapboxGL示例教程100+》。