一半设计一半前端
鹤望岚
首页
前端教程
HTML教程
CSS教程
JavaScript教程
jQuery教程
界面设计
案例集
zblog建站
前端资源
工具
书籍
酷站推荐
杂谈
关于我
文章归档
导航菜单
首页
前端教程
HTML教程
CSS教程
JavaScript教程
jQuery教程
界面设计
案例集
zblog建站
前端资源
工具
书籍
酷站推荐
杂谈
关于我
文章归档
CSS教程
首页
>
前端教程
>CSS教程
CSS教程
CSS3第十二课:强大的多时间段animation动画!
animation动画与transition过渡动画有两个明显的区别:1、transition过渡动画只能执行一个时间段的动画,从初始到结束。而且必须有事件触发,比如hover事件,或者添加了新的class属性等。2、animation动画可以分时间段执行,比如第一个时间段执行一段动画,第二个时间段...
2018年06月04日
2260
CSS教程
CSS3第十一课:transform2D变形,注意多个变形的执行顺序!
用过ps的童鞋几乎都知道ctrl+T自由变换工具,我觉得CSS3 transform就汲取了ps变形的精华,好好地继承了这三板斧精神。 一、transform变形 实现对元素的缩放、移动、旋转、倾斜,分别对应以下几个方法。 注意:变形...
2018年04月16日
2850
CSS教程
CSS3第十课:transition过渡动画(内附神器!)
在十年前,我用flash做动画的时候,总结了一下flash的运动规律,主要有形状、大小、位置、角度、颜色、透明度、加减速等变化。没想到移动端异军突起,似乎一夜之间,flash就没落了。想起自己曾经每天必逛的闪吧,在2012年也停止更新,虽然现在网站还在, 但也只是一个象征了,偶尔回去悼念一下,怀念过...
2018年03月30日
2639
CSS教程
CSS3第九课:重复放射性渐变repeating-radial-gradient
repeating-radial-gradient重复性放射渐变和radial-gradient放射渐变的参数都是一样的,差别在于是否利用渐变单元扩展至整个容器。可以先看看这篇详细介绍放射性渐变的文章↓CSS3教程:background-image之放射性渐变(radial-gradient)详解一...
2018年03月28日
2600
CSS教程
CSS3第八课:重复线性渐变repeating-linear-gradient
很早以前写过一篇线性渐变的文章,如果还没有掌握CSS3中的线性渐变,建议先看一下。CSS3教程:background-image之线性渐变(linear-gradient)最in版!时隔一年半,再把它的姐妹篇——重复线性渐变搞定,才算是真正完结了吧。忍不住感叹,How time flies!这个属性...
2018年03月24日
3061
CSS教程
CSS3第七课:background多重背景及新增属性
关于CSS3的边框、圆角、阴影等新特性,在以前的CSS3教程里面已经详细介绍过,在这个系列里面就不再啰嗦,有兴趣的可以直接查看CSS3教程系列。 这篇文章详细讲解一下CSS3多重背景这个新特性,真的是很强大。 一、多重背景的用法 ba...
2018年03月24日
2390
CSS教程
CSS3第六课:web中的颜色值以及rgba和opacity的区别
每次听一些web前端开发大神讲公开课或者看录制的视频,很多时候脱离了UI设计稿,大神们自己做案例的时候,都是用RGB三原色来搭配,或者直接red/blue/yellow/gray等颜色值,看得我眼睛火辣辣的痛,强烈建议web前端们也要把自己的审美,特别是色彩审美提高一下。审美教育必须从娃娃抓起!1、...
2018年03月22日
2218
CSS教程
CSS3第五课:rem、em、vh、vw等新增单位的用法
很早以前,大家都习惯用像素(px)这个单位来控制大小,但是随着响应式布局和跨平台跨设备的web应用的兴起,很多具有百分比性质的单位其实更灵活。浏览器都允许用户重新设置文字的大小,如图:但是很多网页在body的样式上直接写死了文字大小,比如为14px或者16px,这样用户修改浏览器的字号是没法改变网页...
2018年03月20日
6073
CSS教程
CSS3第四课:伪元素选择器,::before和::after就是左膀右臂!
讲完了伪类选择器,还有一个兄弟叫伪元素的选择器也把它搞定吧。它们都有一个伪字,说明都是不存在的,但是它们也有区别:伪类是一种状态,伪对象是不真正存在于HTML文档中的标签对象,但是它是以html对象的方式虚拟出现,并且可以通过css控制的对象。在最新的CSS3标准中,把伪对象的格式改成了双冒号,即:...
2018年02月09日
3116
CSS教程
CSS3第三课:伪类选择器,为什么有一个伪字?
拖了好久的教程终于等到授课结束了,便开始马不停蹄的准备更新~~~今年自学了很多关于UI类的内容,在审美上又有了一些提高,以后做的案例更美美哒!一、CSS3新增伪类选择器在CSS1版本的时候,几乎都是:hover的天下,在CSS2版本的时候,增加了:focus这个常用的,CSS3版本就增加了:nth-...
2018年02月08日
2176
CSS教程
从CSS Reset到Normalize.css
几年前为了重置样式,或者说为了让元素的浏览器默认样式不影响到页面的效果,我一般使用CSS Reset直接全部重置,当然,我是反对通配符*{margin:0;padding:0}这种写法的,但是CSS Reset全部归零了所有样式,后面有些样式又要自己贱兮兮的重新写回来,感觉也是做了无用功。直到发现了...
2017年07月26日
1757
CSS教程
CSS3第二课:与家庭伦理有关的组合选择器
在CSS2时代,组合选择器中用的最多的是后代选择器,比如#nav li a等。因为这是CSS1版本就有的,IE6都毫无压力地支持。可是,在CSS2中新增的子元素选择器等,IE6就支持不友好了。不过,现在新版本的浏览器几乎都支持这些选择器了。一、组合选择器选择器举例含义版本element e...
2017年06月30日
2158
CSS教程
CSS3第一课:被IE耽搁了的属性选择器
CSS2系列的教程已经更新完毕很久了,今天终于开始了CSS3系列教程的更新,貌似又是一个漫长的过程!还没有看完CSS2系列教程的童鞋麻烦先学习一遍哦,知识都是有体系的,基础没有打好,后面的内容会更吃力。既然是系列教程,那还是要按照体系来,先把最基础的选择器讲完。CSS3新增了很多很棒的选择器,其中属...
2017年06月26日
1983
CSS教程
网页文字字体大小,在固定像素px和相对倍数em之间如何自由切换?附一个神器!
以前固定宽度布局的时候,几乎都是固定像素,宽度固定,间距固定,文字大小更是固定像素。可在流布局和响应式布局的催化下,固定宽度,固定大小的布局已经不能满足我们多元化的显示设备,pc端,平板端,手机端,各种尺寸的设备,如果都要重新做一个网页的话,我觉得那不是我们前端人的工作态度,毕竟学会如何偷懒是人的共...
2017年05月03日
2296
CSS教程
CSS3教程:background-image之放射性渐变(radial-gradient)详解
写完了linear-gradient线性渐变的初级教程后,看到了Lea Veron博客上那个用渐变做的图案集,我瞬间就觉得自己的想象力弱爆了。容我躺躺,再站起来继续战斗!缓过来了,开讲放射性渐变吧。一、放射性渐变原理别人都用ps解释,我却在渐变上独喜欢flash的渐变变形工具。别人都说径...
2016年08月05日
12462
CSS教程
CSS3教程:background-image之线性渐变(linear-gradient)最in版!
long long ago,我很不喜欢用CSS3的渐变,宁愿一切纯色扁平,因为那时候的渐变TMD太复杂了,版本太多了,真的很想死!今天百度linear-gradient的关键词,翻出的文章几乎都是2011年——2013年的,版本太out了,难道不知道webkit和moz已经手...
2016年08月02日
15569
CSS教程
CSS3教程:border-radius你以为就是个圆角边框吗?
很多人拿border-radius就是做点圆角效果,或者弄一个圆形的头像(说的就是以前的自己^_^),但,这些都是没有真正发掘border-radius的价值的!先看看一些别人的效果↓css3的border-radius各种参数设置下的圆角效果CSS3 border-radius圆角各个属性值作用演...
2016年08月01日
14189
CSS教程
CSS3教程:box-shadow盒阴影详解
最近忙着暑期补课,在招生路线上,搞得很紧张啊,我的痘痘都多冒了好几颗。关键是一个星期补六天课,还包括三个晚上,觉得日子怎么过得那么慢呢!忙里偷闲,还是继续CSS3的学习之旅吧。讲完了text-shadow,今天我们来八一八box-shadow这个看起来很相似的属性。在之前,也写了一篇box-shad...
2016年07月28日
9026
CSS教程
CSS3教程:text-shadow文字阴影详解
在web的早期战场,要实现文字或者图片或者盒的阴影效果,必须启用图片,导致html代码和css代码量都要增加很多,而现在,利用css3新增的text-shadow和box-shadow可以轻松完成阴影的添加,而且效果自然,不逊于ps制作出的效果,唯一的问题就是多层阴影的时候可能渲染要多耗费一点性能。...
2016年07月09日
12473
CSS教程
CSS第十八课:PC端和移动端下拉菜单的实现
在CSS第八课讲解了如何制作水平和纵向导航,然后拖到了第十八课才讲解下拉菜单,为什么呢?因为下拉菜单必须要在明白了相对和绝对定位后才能讲解。如果你没有搞定CSS十六课和CSS十七课,建议你出门左拐下两层楼,先看完相对定位和绝对定位再来学习下拉菜单吧。下拉菜单作为导航目录较多的网站的必备武器,的确可以...
2016年07月01日
4203
‹‹
‹
1
2
3
4
›
››