最近更新

CSS3第十一课:transform2D变形,注意多个变形的执行顺序!

用过ps的童鞋几乎都知道ctrl+T自由变换工具,我觉得CSS3 transform就汲取了ps变形的精华,好好地继承了这三板斧精神。一、transform变形实现对元素的缩放、移动、旋转、倾斜,分别对应以下几个方法。注意:变形只能针对块状对象,行内元素需要变成块状对象才能实现变形效果。1、scal...

CSS3第十课:transition过渡动画(内附神器!)

在十年前,我用flash做动画的时候,总结了一下flash的运动规律,主要有形状、大小、位置、角度、颜色、透明度、加减速等变化。没想到移动端异军突起,似乎一夜之间,flash就没落了。想起自己曾经每天必逛的闪吧,在2012年也停止更新,虽然现在网站还在, 但也只是一个象征了,偶尔回去悼念一下,怀念过...

CSS3第九课:重复放射性渐变repeating-radial-gradient

repeating-radial-gradient重复性放射渐变和radial-gradient放射渐变的参数都是一样的,差别在于是否利用渐变单元扩展至整个容器。可以先看看这篇详细介绍放射性渐变的文章↓CSS3教程:background-image之放射性渐变(radial-gradient)详解一...

CSS3第八课:重复线性渐变repeating-linear-gradient

很早以前写过一篇线性渐变的文章,如果还没有掌握CSS3中的线性渐变,建议先看一下。CSS3教程:background-image之线性渐变(linear-gradient)最in版!时隔一年半,再把它的姐妹篇——重复线性渐变搞定,才算是真正完结了吧。忍不住感叹,How time flies!这个属性...

CSS3第七课:background多重背景及新增属性

关于CSS3的边框、圆角、阴影等新特性,在以前的CSS3教程里面已经详细介绍过,在这个系列里面就不再啰嗦,有兴趣的可以直接查看CSS3教程系列。 这篇文章详细讲解一下CSS3多重背景这个新特性,真的是很强大。 一、多重背景的用法 ba...

CSS3第六课:web中的颜色值以及rgba和opacity的区别

每次听一些web前端开发大神讲公开课或者看录制的视频,很多时候脱离了UI设计稿,大神们自己做案例的时候,都是用RGB三原色来搭配,或者直接red/blue/yellow/gray等颜色值,看得我眼睛火辣辣的痛,强烈建议web前端们也要把自己的审美,特别是色彩审美提高一下。审美教育必须从娃娃抓起!1、...

CSS3第五课:rem、em、vh、vw等新增单位的用法

很早以前,大家都习惯用像素(px)这个单位来控制大小,但是随着响应式布局和跨平台跨设备的web应用的兴起,很多具有百分比性质的单位其实更灵活。浏览器都允许用户重新设置文字的大小,如图:但是很多网页在body的样式上直接写死了文字大小,比如为14px或者16px,这样用户修改浏览器的字号是没法改变网页...

CSS3第四课:伪元素选择器,::before和::after就是左膀右臂!

讲完了伪类选择器,还有一个兄弟叫伪元素的选择器也把它搞定吧。它们都有一个伪字,说明都是不存在的,但是它们也有区别:伪类是一种状态,伪对象是不真正存在于HTML文档中的标签对象,但是它是以html对象的方式虚拟出现,并且可以通过css控制的对象。在最新的CSS3标准中,把伪对象的格式改成了双冒号,即:...

CSS3第三课:伪类选择器,为什么有一个伪字?

拖了好久的教程终于等到授课结束了,便开始马不停蹄的准备更新~~~今年自学了很多关于UI类的内容,在审美上又有了一些提高,以后做的案例更美美哒!一、CSS3新增伪类选择器在CSS1版本的时候,几乎都是:hover的天下,在CSS2版本的时候,增加了:focus这个常用的,CSS3版本就增加了:nth-...

如何把codepen上面的代码嵌入个人网站中?

在大漠的网站中看到了codepen实时编辑代码和直接显示效果的方便,心动不已,这种方法可以解决我截gif动图展示案例效果的劳累历史。下定决心学起来。于是打算注册一个codepen账号,结果用QQ邮箱账号居然不行,百度一搜,原来是QQ邮箱太中国化了,接收不到某些国外网站的邮件。但是还有另一个方法,那就...

带缩略图的产品放大镜jquery插件

有学生要仿电商网站,需要一个带缩略图的产品放大镜的插件,我觉得这个还不错,推荐给大家。这个插件有好几种效果,但是在初始化插件的时候,把几种效果的初始化放在一个js文件里面了,所以我专门做了一个案例,提取了一个效果,可供大家参考。效果演示案例下载链接:https://pan.baidu.com/s/1...

仿腾讯专题页,实现3D旋转效果

仿腾讯专题页,实现3D旋转效果
这个专题页我挺喜欢的,就在上课的时候简单的仿制了一下,不过没有设置video和图片的切换,直接用了图片,算是阉割版了。下面的3D旋转使用了不同的方式,把图片也包括进去了,原始版本是只有边框旋转,图片不...
Top