CSS基础篇--快速使用CSS Grid布局,实现响应式设计

2018-03-30
阅读 5 分钟
3.8k
CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是实际的 grid(网格),items 是 grid(网格) 内的内容。

CSS基础篇--CSS3图片翻转动画技术详解

2018-03-29
阅读 4 分钟
4.5k
CSS动画非常的有趣;这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果。其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容。本文就是要用最简单的方法向大家介绍如何创建这种效果。

CSS效果篇--CSS3实现全景图特效

2018-03-22
阅读 1 分钟
4k
background-size: auto 100%; 这段代码的意思是让图片的高等于容器的高,并且水平方向自动,即图片最左边贴着容器左侧。

CSS基础篇--使用position:sticky 实现粘性布局

2018-01-31
阅读 3 分钟
12.6k
sticky:对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

CSS基础篇--CSS/CSS3中的原生变量var详解

2017-10-24
阅读 4 分钟
5.5k
使用语法 首先我们先来看一个例子:html代码: {代码...} css代码: {代码...} 实现效果: 结果是该DOM元素背景变成了黑色。 CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示我们的变量名称。关于命名这个东西,各种语言都有些显示,例如CSS选择器不能是数字开头,JS中的变量是不能直接数值的,但...

CSS基础篇--CSS3 calc实现滚动条出现页面不跳动

2017-10-17
阅读 2 分钟
4.9k
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是...

CSS进阶篇--CSS3实现流彩文字效果+图片模糊效果+边框伸展效果实现

2017-08-15
阅读 5 分钟
4.4k
上面一看第一个图片img 就是实现图片模糊效果的DOM元素,text-gradient实现的是流彩文字效果的DOM元素,border实现的是边框伸展效果的DOM元素

CSS基础篇--CSS3 Filter详解(改变模糊度 亮度 透明度等方法)

2017-08-14
阅读 2 分钟
10.2k
-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。

CSS进阶篇--用CSS开启硬件加速来提高网站性能

2017-07-18
阅读 2 分钟
2.4k
中文地址:[链接] 原文地址:[链接] 你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。 在桌面端和移动端用CSS开启硬件加速 CSS animations, tran...

CSS进阶篇--你用过css3的这个currentColor新属性吗?使用与兼容性

2017-05-23
阅读 2 分钟
6k
凡事需要使用颜色值的地方,都可以使用currentColor替换,比方说背景色 – background-color, 渐变色 – gradient, 盒阴影 – box-shadow, SVG的填充色 – fill等等。很灵活,很好用!

CSS进阶篇--CSS3实现波浪效果

2017-05-22
阅读 2 分钟
10.4k
首先得准备三张图,一张是浅黄色的背景图loading_bg.png,一张是深红色的图loading.png,最后一张为bolang.png。

css3效果:animate实现点点点loading动画效果(二)

2017-05-04
阅读 3 分钟
4.2k
这里用到了currentColor这个关键字,IE9+浏览器支持,其可以让CSS生成的图形的颜色跟所处环境的color属性值一样,也就是跟文字颜色一样。

CSS效果篇--CSS3实现5种预载动画效果

2017-02-16
阅读 5 分钟
5.4k
实现如图所示的动画效果: 预载动画一:双旋圈 在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码,即内圈比外圈的速率快2倍。实现如图所示:html代码: {代码...} css代码: {代码...} 预载动画二:交错圈 两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。效果:html代码: {代码....

CSS进阶篇--CSS gradient渐变之webkit核心浏览器下的使用以及实例

2017-02-03
阅读 6 分钟
3.9k
渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色。渐变通过-webkit-gradient方法实现,可以用来代替图片URL。在webkit核...

CSS基础篇--CSS网页中导入特殊字体@font-face属性详解

2015-12-21
阅读 3 分钟
15.1k
font-family: <YourWebFontName> :自定义字库名称(一般设置为所引入的字库名),后续样式规则中则通过该名称来引用该字库。src :设置字体的加载路径和格式,通过逗号分隔多个加载路径和格式srouce :字体的加载路径,可以是绝对或相对URL。 format :字体的格式,主要用于浏览器识别,一般有以下几种——truetype...

CSS基础篇--CSS3 圆角(border-radius)详解

2015-09-23
阅读 4 分钟
5.2k
在做网页的时候,常常需要实现圆角,以前的做法就是切图,现在好了,有了css3的 border-radius 特性之后,实现边框圆角效果就非常简单了。而且其还有多个优点:一是减少网站维护工作量;二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载入速度将变快;三是增加视觉美观性。

CSS基础篇--CSS3之多列布局columns详解

2015-09-15
阅读 3 分钟
5.2k
columns语法:columns:[ column-width ] || [ column-count ] 设置或检索对象的列数和每列的宽度: [ column-width ]:设置或检索对象每列的宽度; [ column-count ]:设置或检索对象的列数。 css代码: {代码...} html代码: {代码...} 结果如图所示: 以下列出column运用的相关属性1.column-width:<length> | a...

CSS基础篇--CSS3之box-flex属性的使用

2015-09-14
阅读 3 分钟
2.7k
语法: {代码...} 其中number取值:使用浮点数指定对象所分配其父元素剩余空间的比例。设置或检索伸缩盒对象的子元素如何分配其剩余空间。(伸缩盒最老版本) html代码: {代码...} css代码: {代码...} 得到的结果如图所示: 注:其实上面的css代码中-ms-box-flex与box-flex可以省略,为什么这么说呢,IE6-IE11的浏览器不...

CSS基础篇--CSS3属性选择器与(:not)选择器

2015-09-05
阅读 1 分钟
8.4k
css3的子字符串匹配属性选择器(1)‘匹配开头’的属性选择器依法如下:Element[attribute^="value"],实例代码如下:

CSS实例篇--CSS3实现模拟select 以及其中的三角形

2015-08-28
阅读 2 分钟
6.7k
如图实现这样的效果:html代码如下: {代码...} css样式代码: {代码...} 需要demo猛点该文字,百度云盘下载

CSS3 - @keyframes

2014-05-21
阅读 2 分钟
3.2k
通过 @keyframes 规则,您能够创建动画。创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。为了获得最佳的浏览器支持,您应该始终定...

CSS3动画属性:转换(transition)

2014-05-21
阅读 4 分钟
2.7k
transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值

[总结]CSS/CSS3常用样式与web移动端资源

2014-02-17
阅读 21 分钟
17.8k
css/css3常用样式 CSS修改选中文字的颜色 html代码: {代码...} css代码: {代码...} 选中文字后的效果如图所示: 强制文本显示 单行显示语法:white-space:nowrap;让一段文字在固定宽度在一行显示,最后一个字符为省略标记(...),css样式如下 {代码...} 多行文本最后省略号: {代码...} 这里用到了文本溢出显示省略号的...