Clik here to view.
Clik here to view.
2012年优秀jQuery插件连载（六）
几篇连载下来，W3cplus已经向大家推荐过五个jQuery插件了，不知道大家是否喜欢这些插件，也不知道大家工作中是否能使用上。今天继续为大家推荐第51个至第60个jQuery插件。今天这十个插件涉及Web中各个方面的，比如说有幻灯片制作的、弹出窗口的、图片截取的、提示框的、数据图表的、媒体分享等插件。希望这些插件对大家有所帮助。 如果你有兴趣的话，可以先回顾一下前五十个jQuery的插件：...
View ArticleClik here to view.
Clik here to view.
css3背景运动
两个css3背景运动实例，一个是图片，一个是渐变。关键点就在于定义背景的位置，使之可以循环往复，注意衔接地方不要出现中断啊。这个对不支持的浏览器降级也可以很优雅，第一个就是背景的平铺，至于第二个也可以设置一个背景，或者直接设置一个border-top什么的都可以。 demodownload 第一个实例的主要css3代码： body{...
View ArticleClik here to view.
css3标签设计
设计了三种常用的文章标签，第一个是圆角效果比较简单，主要思路就是非等的对称的圆角；第二个主要应用了ribbon，使用:before生成；第三个就稍微麻烦点，三角加上一个小圆点，使用:before和:after生成，看来不错啊。 demodownload 主要css代码： /* demo1 */ .demo1 .tag a{ background-color:#93BD17; color:#fff;...
View ArticleClik here to view.
css3内部虚线框设计
第一个使用的是border为虚线，再加上box-shadow来模拟外面的框；第二个使用的:before方法生成一个虚线框，这里注意的是生成的内容定位上下左右各为3px，确定了这个生成内容的大小,另外需要注意的是注意before内容的层级，小心覆盖了你里面的内容，你可以设置background为一个颜色，就知道层级了；第三个是使用的是border和outline方法。outline不支持单边设置，也不...
View ArticleClik here to view.
纯css3有序列表
这个前面的数字其实和ol的decimal是没有关系的。其实应用的是:before和counter-increment来生成的。而中间的那个空白的间隔其实是border。其余的一些就是圆角，动画什么的。了解了原理，实践操作下吧。 demodownload 主要css代码： .rounded-list a{ position: relative; display: block; padding:...
View ArticleClik here to view.
纯css3 lavalamp 菜单效果
曾经我们对于jquery实现的lavalamp那是极度热爱啊，现在不用借助jquery，我们用纯css3实现了，过瘾啊。技术的关键在于在菜单的li最后先增加一个空元素来承载那个滑动的东西，再使用css3的兄弟元素选择器~，然后对于不同的li滑过的时候，设置承载滑动的那个元素的left位置。 demodownload css主要代码： #lavalamp { background:...
View ArticleClik here to view.
css3加载动画1
这是第一个纯css3的loading动画。这个demo的技巧在于先通过:before生成一个外围，这样就形成了两个圆圈，还是以前虚线框里面说的通过上下左右定位为-20px来扩大的外围的圆圈，这些都是静止的。正在运用的其实是一个空span标签设计出来的一个三角形，这里设置的颜色与背景色一直，所以看不出来，其实你可以设置为红色方便观察，就明白了。最后就是animation的运用了。...
View ArticleClik here to view.
css3进度条动画
这个进度条是应用css3的渐变背景做出来的，然后应用background-size属性设置大小，然后以这个size为单位平铺。分析的时候你可以先禁用animation这个动画，然后可以用firebug设置background-repeat:no-repeat;来查看它一个单元的渐变背景。得到非动画的原理，我们再来研究动画部分，背景图片的运动，当然是用background-position了。...
View ArticleTransition动画在Chrome中闪动
Chrome在渲染transition时会出现闪动，添加以下css样式既可以： -webkit-backface-visibility: hidden; //或者 -webkit-transform-style: preserve-3d; 1 Vote up! CSS3transition
View ArticleClik here to view.
css3 slideup box
本实例主要是对css3的transition属性的应用，同时应用了rotate旋转和nth-child子元素选择器。原理是先设置容器为一定的高度并overflow为hidden，然后标题的高度为整个高度且opacity为1，而内容为一定的rotate角度且opacity为0。当鼠标滑过的时候标题margin为负的容器高度，opacity为0，而内容的rotate为0，opacity为1。当然最关键的...
View ArticleClik here to view.
css3加载动画2
其实分析每个css3的案例动画，首先做的应该是先把动画停下来，了解下初始是怎么样的。如这个我们一开始看到这么绚的动画加载效果，一般都认为比较难，但是先把animation这个属性通过firebug禁用后，发现原来原理并不是很复杂，只是运用了border，border-radius和box-shadow，然后给就是rotate的animation。第二个和第一个原理一样，只是设置的border-col...
View ArticleClik here to view.
纯css3手风琴效果1
本实例通过对radio按钮的状态判断来实现折叠效果。主要应用的是兄弟元素选择器~，注意这个兄弟元素选择器只选择后面的兄弟元素，对于同级的前面的兄弟元素css3还没有响应的选择器。然后综合应用:before和transition来实现前面图标的切换及高度的伸展动画。这个高度的伸展变化必须设置一个具体的值，如为auto则没有transition动画效果，只是切换而已。 demodownload...
View ArticleClik here to view.
纯css3手风琴效果2
这三个案例实际上就是用了两种技术，一个是radio来控制，一个是checkbox来控制，用radio表示只有一个可以展开（radio的只有一个是选中状态），而checkbox则表示可以同时展开多个（checkbox可以多个选中）。其实道理都是一样的，对radio或者checkbox的选中状态进行判断，然后决定其下面的兄弟元素的高度。 demodownload css主要代码：...
View ArticleClik here to view.
纯css3手风琴效果3
本实例主要是对css3的:target这个选择器的应用，通过:target这个状态来改变需要改变的元素。主要就是在设计html结构的时候得想一下，各个点击的href值对应各自要展开内容的id值。最有可能迷惑的就是:target这个选择器的运用，刚接触的时候还是有些晕的，多看看理解理解就好了。 demodownload css主要代码： .accordion h3 + div { height: 0;...
View ArticleClik here to view.
css3层次堆叠效果
这种实例其实在css3刚出的时候就比较风靡了，也算是入门级的很好实例吧，还是很值得去练练手的。它主要是对css3的:before和:after的应用，当然再加上一些rotate的旋转及box-shadow的阴影，最后配以:hover来达到动画的效果。由于webkit内核不支持:hover之后其他元素的动画效果（如:hover:before；:hover *；:hover +...
View ArticleClik here to view.
css3鼠标滑过动画
本实例共有五个鼠标滑过的动画效果，但其实原理都是差不多。第一个是多加了一个空白的标签，来显示那个遮罩的三角形；第二，三，四都是对却是用border来生成的遮罩，至于第五个效果就比较复杂，不过原理都是一样的，实际应用也不需要那么复杂。所以只需把前面四个简单的学会了，第五个就当做欣赏吧，扩大自己的视野，以后举一反三的机会多的是。说到底，transition的动画变换来变换去，都是那么几个属性，关键在于对...
View ArticleClik here to view.
纯css3滚动效果
看到该实例标题的时候，表示心情十分激动然后再加上一点忑忑，因为以前看过类似的，但是都比较有缺憾，不那么完美。可是这个媲美从前所有的纯css3打造的滚动效果，可以堪称完美了（除了没有导航控制）。只因制作巧妙精美，所以我只表示欣赏而不好加以评论，感兴趣的话大家还是自己手动研究下为好。 demodownload 因css3代码篇幅较长，这里只抽出一部分重要的以供参阅： #slider...
View ArticleClik here to view.
创建一个褶皱带
本实例主要是对:before,:after和rotate的应用。其实神来之笔在于对border的应用，一般来说我们经常会使用宽高为0，然后再运用border来设计一个三角出来，可是这里是应用border三角和一个宽度或高度的结合，设计出来了我们看到的向上折叠的效果。正好:before生成一个同色的向上折叠，:after生成一个阴影色的旋转下的折叠。 demodownload css主要代码：...
View Article