摘要:
前言:这是国外的一个教程,我也很喜欢这个网页里面的教程,主要技术是CSS3和JQuery以及一些JQuery的插件的应用,当然从这些教程我也学到了他们制作时的一些思路,就好像做数学题那样,只要思路把握了,就可以做出千变万化的题目。教程地址:http://tympanus.net/codrops/2012/08/01/photo-booth-strips-with-lightbox/demo地址:http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/作品的截图:作品的亮点:1. 当鼠标hover图片的时候,图片变得明亮和清晰。 2. 当鼠标 阅读全文
摘要:
上一篇文章,我从教程中学到了使用css3中transition的页面切换,而这次呢,我就稍微使用这个方法稍做一些少少改动,我的想法是将所有层都叠在一起,一个一个从下往上翻。然后接着这个思路我又想到如果翻完的话怎么办?我就弄多了一个可以重新来过的按钮。最后总觉得美中不足,只有向下一页的翻动,如果想返回上一页的话,还要重新来过,为此我又新增加多一个按钮,按钮的动画我还是选择了Javascript来控制。 首先看看效果图 demo地址:http://zhuyingyan.github.com/myfavourite/update.html这里我还弄的比较简单,还没有加上内容。首先是html,< 阅读全文
摘要:
前言: 这里所讲的方法均来自:http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/ demo查看: http://tympanus.net/Tutorials/CSS3PageTransitions/index.html#home 这个网站是一个很好的教程网,里面主要使用CSS3和JQuery,比较简单易懂,但是做出来的作品却是清新和有趣。主题: 转回主题这次我学到的是使用CSS3的transition做页面切换,这里主要使用到的技术有两个: 1.transition 2.:target(这是个伪类)效果图: 简. 阅读全文
摘要:
主要记录我在调试IE6时遇到的一些问题:1.floatright换行bug产生原因:块里面有几个行内元素,最后一个需要在右边。结构例如:左边中间右边IE6中的显示是:右边的跳到下一行里面。解决方法:把float的模块放到非float的前面即可2.IE6的png半透明问题产生原因:IE6不支持png24的Alpha透明背景,但是它支持png8格式的全透明背景是索引透明背景。解决方法大全:http://www.cnblogs.com/wanghun/archive/2012/03/29/2423024.html使用过后的疑惑:2.1方法一的直接使用滤镜效果,图片是成功了,但是文字消失了。2.2方法 阅读全文
摘要:
demo地址:http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/1.首先图片的数目n,每张图片显示的时间t2.主要使用CSS3的animation方法3.设置每张图片的animation-duration(即动画的持续时间)为nt。但是animation-timing-function中的0到t/nt中实现图片的显示动作,后面的百分比都是消失4.设置每张图片的animation-delay为t的倍数,例如第一个不用设置,第二个为t,第三个为2t这样下去。5.这样的设置是为了实现各个图片的交替出现,还有后面的再出现。再出现还要设置anim 阅读全文
摘要:
tooltip的样子是:制作的主要思路:1.理解上图的意思(我觉得是最重要的)2.使用伪类before和after,使用绝对定位3.三角形的制作使用border来完成,理解border的构成方式。(http://coolshell.cn/articles/6913.html这里详细说了三角形的形成)4.增加一些css3的属性,渐变,阴影,圆角等等具体例子:http://www.w3cplus.com/css3/create-tips-with-css3 阅读全文
摘要:
如果页面中有iframe元素,而你想用当前页面的一些元素的事件,获取iframe里面的元素,再加上一点动作的话可以这样:window.frames["iframe_ID"].document.getElementById("element_ID")获取到iframe里面的具有一定ID的元素。 如果使用jQuery的话可以这样:$("#iframe_ID").contents().find("#element_ID")然而如果反过来呢,子窗口想获取父窗口的元素。可以这样:window.parent.document. 阅读全文