现代 CSS

入门级

css3树形导航

css3树形导航
本实例主要是比较好看哈哈,然后使用了css3初级学习者一般不理解的:target这个伪元素,所以收纳。运用的css3有gradient生成渐变背景,:before生成前面的图标及二级菜单的箭头,:target来实现折叠效果,同时还应用了个transition来改变opacity的动画。当然这个案例其实左边的小图标还可以用font-face来制作,那样就更好了。

css3 icon导航

css3 icon导航
本实例主要应用了border-radius,transition,font-face。先设置一个宽度并设置overflow为hidden,然后鼠标滑过用transition来改变其宽度,以显示文字信息部分。至于三个icon,前面两个为font-face做的,后面一个为图片。

css3大背景运动

css3大背景运动
其实这个的大背景运用和之前背景运动的那个demo,核心点都是一样的,关键就是animation对背景定位的改变。只不过这里我们在一个标签中同时应用了三张图片,注意多背景图片时其层次与其书写顺序有关,其层次高低随着书写顺序依次递减,所以第一张图片在最高层,所以这个时候千万不要定义背景色啊,不然会把后面的全部覆盖了。如果要写背景色的话,请在最后一张图片上面加上。同理你可以做个简单的飘雪或蒲公英散落等一些零散的效果,当然首先得把背景图片设计好。

css3导航设计1

css3导航设计1
本实例通过:before和:after生成高度和宽度透明度都为0且背景为渐变的两个内容,两个不同点在于绝对定位的位置一个为left,一个为right,然后渐变背景的方向刚好相反;最后当鼠标滑过改变高度宽度及透明度,就完成了该动画。因为是对:hover状态下的:before和:after生成的内容进行宽度变化,所以该实例如同先前的那个:hover状态下的激发伪元素动画一样,webkit内核是不支持的。

css3标题设计

css3标题设计
本实例主要是对:before及:after的应用,比较初级,浅显易懂,适合入门。第一个使用border-left和负margin,跟css3没有关系,就是应用了rgba这个属性,使border的颜色有一定的透明值;第二个运用:before和:after生成两个三角叠加起来;第三个背景应用了linear-gradient,然后加上:before和:after生成的三角左右两边各一个;第四个则应用了:after生成元素,然后box-shadow生成阴影,再加上rotate旋转一点角度。这四个虽然比较简单,但是还是非常实用的。

css3面包屑设计

css3面包屑设计
这里总共有四种面包屑效果,其中第一种运用:before和:after,运用border生成同等大小的尖角,叠加起来左右错动1px;第二个还是运用:before和:after,运用border生成不同的尖角,一个在左一个在右;第三个是运用一个:after生成一个正方形,设置border-radius然后rotate旋转45度;第四个直接运用水平扭曲就skewX就可以了。

css3层次堆叠效果

css3层次堆叠效果
这种实例其实在css3刚出的时候就比较风靡了,也算是入门级的很好实例吧,还是很值得去练练手的。它主要是对css3的:before和:after的应用,当然再加上一些rotate的旋转及box-shadow的阴影,最后配以:hover来达到动画的效果。由于webkit内核不支持:hover之后其他元素的动画效果(如:hover:before;:hover *;:hover + *),所以该实例用webkit内核浏览器来看,鼠标滑过直接就到生硬的最后状态,没有动画过程。

纯css3手风琴效果3

纯css3手风琴效果3
本实例主要是对css3的:target这个选择器的应用,通过:target这个状态来改变需要改变的元素。主要就是在设计html结构的时候得想一下,各个点击的href值对应各自要展开内容的id值。最有可能迷惑的就是:target这个选择器的运用,刚接触的时候还是有些晕的,多看看理解理解就好了。

CSS3制作三角TIP框

CSS3制作三角TIP框
sofish在《CSS quiz: 带边 border 的三角形》制作介绍了使用border制作三角的兼容方案,很实用的一个东东。目前这种效果在Web中的运用是越来越多,有很多同学也想尽办法:有使用图片的,有使用border的,当然还有使用其他方法的。今天我要为大家介绍的是使用“::after”和"::before"配合border制作带边三角提示框,并为大家推荐一个在线制作工具。只不过这种方法不兼容IE8以及其以下的浏览器。如果要兼容IE,建议使用sofish的方法。

css3 slideup box

css3 slideup box
本实例主要是对css3的transition属性的应用,同时应用了rotate旋转和nth-child子元素选择器。原理是先设置容器为一定的高度并overflow为hidden,然后标题的高度为整个高度且opacity为1,而内容为一定的rotate角度且opacity为0。当鼠标滑过的时候标题margin为负的容器高度,opacity为0,而内容的rotate为0,opacity为1。当然最关键的是我们的transition的应用,把这些变化动画化。而内容的背景图片就充分应用了nth-child子元素选择器。

页面

返回顶部