慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了

从设计到实现到录制与编写用了快1个月的时间，说真的这个案例是慕课定制的，我之前也没有系统的做过这样的一个效果，在实现的时候自己也重新复习了下CSS3动画的知识点

下面是一个简单的预览

这个是一个比较综合的效果了，这个案例把前端做动画的一些精髓已经讲透了

运用的技术基本就是H5+JS+CSS3，但是每个部分的实现都会有很多知识点的涉及

这里大体的总结下

  • 自适应分辨率的问题可以采用的是JS+百分比布局处理
  • 通过合成"雪碧图"解决图片加载与资源占用的问题
  • "雪碧图"自适应的问题
  • 通过CSS3的animation实现帧动画，并且可以控制状态
  • 布局除了left.top布局外，还可以使用最新的css3的transform处理
  • 元素的变化，可以通过设置translate3d启动GPU加速
  • 可以用CSS3的transition做渐变动画
  • HTML5音频的使用
  • 采用promise可以解决异步编程的逻辑嵌套问题
  • 代码组织的一些思路

整个案例涉及的东西都是我们日常开发能够使用到的一些手段，希望可以通过这个案例把前端的一些方面的知识点给融合贯穿起来，从而得到系统透彻的理解，并且能有举一反三，融汇贯通的效果！

教程链接 http://www.imooc.com/learn/453

H5+JS+CSS3 综合应用的更多相关文章

  1. 从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏

    项目体验地址 免费视频教程 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后 ...

  2. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  3. iOS原生APP与H5+JS交互////////////////////zzzz

    原生代码中直接加载页面 1.    具体案例 加载本地/网络HTML5作为功能介绍页 2.    代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView ...

  4. tiltShift.js - CSS3 滤镜实现移轴镜头效果

    tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...

  5. 假如 Micromedia 没被收购，会不会早于 Apple 推动 H5、CSS3 的发展

    看着如今大行其道的 H5.CSS3,想想当年的“网页三剑客”,不禁感慨:假如 Micromedia 没被收购,会不会早于 Apple 推动 H5.CSS3 的发展? 当时 Apple 先是询问 Ado ...

  6. 用Js+css3实现图片旋转，缩放，裁剪，滤镜

    还是前端图片的老话题,花了半天时间,东拼西凑,凑出个demo,优点在于代码少,核心代码就6行,目前刚做了旋转,缩放,裁剪,滤镜要js做,网络上也有现成的代码, 但是想做到自定义的滤镜咋办呢?这还要从底 ...

  7. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net

    Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net 1. 提升单例有能力的1 2. 减少工作数量2 2.1. 减少距 ...

  9. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

随机推荐

  1. ASP.NET Core 之 Identity 入门（三）

    前言 在上一篇文章中,我们学习了 CookieAuthentication 中间件,本篇的话主要看一下 Identity 本身. 最早2005年 ASP.NET 2.0 的时候开始, Web 应用程序 ...

  2. 使用C#处理基于比特流的数据

    使用C#处理基于比特流的数据 0x00 起因 最近需要处理一些基于比特流的数据,计算机处理数据一般都是以byte(8bit)为单位的,使用BinaryReader读取的数据也是如此,即使读取bool型 ...

  3. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统（71）-微信公众平台开发-公众号管理

    系列目录 思维导图 下面我们来看一个思维导图,这样就可以更快了解所需要的功能: 上一节我们利用了一个简单的代码例子,完成了与微信公众号的对话(给公众号发一条信息,并得到回复) 这一节将讲解公众号如何设 ...

  5. 基于AOP的MVC拦截异常让代码更优美

    与asp.net 打交道很多年,如今天微软的优秀框架越来越多,其中微软在基于mvc的思想架构,也推出了自己的一套asp.net mvc 框架,如果你亲身体验过它,会情不自禁的说‘漂亮’.回过头来,‘漂 ...

  6. CSS 3 学习——transform 3D转换渲染

    以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...

  7. spring无法读取properties文件数据

    只讲述异常点,关于怎么配置文件,这里不做说明.   1. controller中无法读取config.properties文件 controller中注入的@Value配置是从servlet-cont ...

  8. 使用Microsoft的IoC框架：Unity来对.NET应用进行解耦

    1.IoC/DI简介 IoC 即 Inversion of Control,DI 即 Dependency Injection,前一个中文含义为控制反转,后一个译为依赖注入,可以理解成一种编程模式,详 ...

  9. 【干货分享】流程DEMO-制度发文和干部任免

    流程名: 制度发文和干部任免  业务描述: 当员工在该出勤的工作日出勤但漏打卡时,于一周内填写补打卡申请.  流程相关文件: 流程包.xml  流程说明: 直接导入流程包文件,即可使用本流程  表单: ...

  10. Android开发学习—— shape标签的使用

    参考这片文章http://www.cnblogs.com/armyfai/p/5912414.html