HTML5/CSS3 3D立方体旋转动画经典案例
效果图：知识点：1、perspective ，transform 的复习2、css3 backgroud实现格格背景，即面上的小格格3、 @-webkit-keyframes 实现动画HTML：1234567891011121314151617<body> <p class="stage"> <p class="cube"> <p class="fon
HTML5
HTML5/CSS3 网页加载进度条的实现，下载进度条等经典案例
今天给大家带来一个比较炫的进度条，进度条在一耗时操作上给用户一个比较好的体验，不会让用户觉得在盲目等待，对于没有进度条的长时间等待，用户会任务死机了，毫不犹豫的关掉应用；一般用于下载任务，删除大量任务，网页加载等；如果有使用html5为手机布局的，也可以用于手机中~效果图：1、html结构：12345678<p id="loadBar01" class="loadBar"> &l
H5移动端各种各样的列表的制作方法(一)
H5移动端各种各样的列表的制作方法(一)前言随着移动互联网的发展,大量前端人员从pc端转移动端.而很多PC端的前端经验并不适用于移动端.前几日我撰写的一篇博文《移动端H5的一些基本知识点总结》获得了大量的点击量.因此,FungLeo决定,在接下来的时间里,我将围绕移动端,展开一系列的教程.本系列文章的CSS部分,将全部采用SASS语法撰写.如果您不会SASS,建议阅读相关教程,包括本人的《CSS预编译技术之SASS学习经验小结》教程. 本系列文章将引用reset.scss和mixin.scss两个基础文档
H5移动端各种各样的列表的制作方法(二)
H5移动端各种各样的列表的制作方法(二) 前情回顾在上一篇博文《移动端各种各样的列表的制作方法(一)》中,我们通过两个简单的DEMO,演示了一下在移动端H5中的列表制作.不过,这两个演示还是太简单了.可能大家觉得不过如此嘛.这一章,我们将制作稍微复杂一点点的列表.如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.带右箭头的列表这个示例,其实和上一张的第二个差不多,只是右边多了一个右箭头.我们要实现的效果,如下图所示:如上所示,在列表的右边,有一个右
H5移动端各种各样的列表的制作方法详解(三)
H5移动端各种各样的列表的制作方法(三) 前情回顾在上一篇博文《移动端各种各样的列表的制作方法(二)》中,我们再通过两个DEMO,演示了一下在移动端H5中更多需求的列表制作.不过,看起来,好像还是蛮简单的.这一章,接着深入.如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.带小图标的列表上面两章,我们做了一些普通的列表.而在移动端H5中,我们经常会做一行一个小图标的列表.这个DEMO,我们就来制作这种类型的列表.示例如下图所示.这里我就不使用小图标
H5移动端各种各样的列表的制作方法详解(四)
H5移动端各种各样的列表的制作方法(四)前情回顾《H5移动端各种各样的列表的制作方法(一)》 《H5移动端各种各样的列表的制作方法(二)》 《H5移动端各种各样的列表的制作方法(三)》如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.前面三章,都是说一个普通的列表应该如何去实现.难度由易到难,但总的来说,一看就能掌握.这一章,我们来做图文列表.普通两列图(图为正方形)文列表两列的图文列表是非常常见的.在JD\TB等电商移动端H5更是比比皆是.这里,
H5移动端各种各样的列表的制作方法(五)
H5移动端各种各样的列表的制作方法(五)前情回顾《H5移动端各种各样的列表的制作方法(一)》 《H5移动端各种各样的列表的制作方法(二)》 《H5移动端各种各样的列表的制作方法(三)》 《H5移动端各种各样的列表的制作方法(四)》如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.在第四章中,我们学习了如何来做一个双列的图文列表.但是,这个图文列表是有一定的局限的.局限就是,其中的图片必须为正方形.当然,在实际项目的实践中.这样也是够了的.但是,这个
H5移动端 超实用的css3模拟边框最新研究示例代码
H5移动端 超实用的css3模拟边框最新研究示例代码前言在之前写的一篇博文《移动端H5的一些基本知识点总结 第五节 边框的处理》中,我提到,可以使用 box-shadow:0 0 0 1px #ddd; 这样的方式,来模拟边框.当然,博文中的内容并没有错,但是却有一定的局限性.因此,今天在这里,纠正和完善我之前的博文中的缺陷.为什么要模拟边框,而不是直接写边框? 因为边框要计算盒子模型.而我们在移动端可能使用的是自适应布局的方式.这样计算边框很费劲. 因此,使用模拟边框的方法,就可以不用考虑边框的宽度的问