慕课网

H5+JS+CSS3 实现圣诞情缘

最热最新

NoLimits

具体我来归纳下改良的技术方案与涉及到的知识点： 1.为了处理自适应的问题，采用了新的rem布局代替百分比布局方案 2.采用了简单的面相对象编程，采用类的形式对每一个页面场景元素都做了一定的封装 3.引入了Observer观察者模式的处理机制 4.适当的引入svg概念，通过svg绘制矢量图 5.精灵动画部分依旧大量采用了css3 animation动画的steps关键帧，但是不同的是，解决了自适应雪碧图的问题 6.元素运动部分优化了css3 transform transition的使用 7.新增了video视频元素的运用 8.新增了3d旋转木马的效果实现 9.新增了canvas版的雪花实现 10.等等.............

查看全部

1 采集收起来源：最终效果与总结
2016-01-09
weibo_晓雷娜娜_0

1、animation-name:动画名 2、animation-duration:时间 3、animation-delay:延时 4、animation-iteration-count:次数 5、animation-play-state:控制 6、animation-direction:方向 7、animation-fill-mode:状态 8、animation-timing-function:关键帧变化

查看全部

0 采集收起来源：关键帧动画
2016-01-09
weibo_晓雷娜娜_0

1、1rem=16px 2、var docEl = document.documentElement, //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //设置根字体大小 docEl.style.fontSize = ? }; //绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false);

查看全部

0 采集收起来源：自适应rem布局
2016-01-09
NoLimits

SVG是基于xml标记语言可缩放矢量图形，支持无损缩放的同时也因为是dom节点，所以也支持事件，但是弊端也很明显，dom的数量非常大，复杂度高，渲染就比较慢了，也不适合游戏的开发，一般会用canvas之后会介绍 SVG有什么优势？ •文件体积小，能够被大量的压缩 •图片可无限放大而不失真(矢量图的基本特征) •在视网膜显示屏上效果极佳 •能够实现互动和滤镜效果

查看全部

0 采集收起来源：SVG概述
2016-01-07
菜青虫菜菜

分页布局，三个场景类通过接口去调用，创建一个中介对象，接口分配任务

查看全部

0 采集收起来源：代码封装
2016-01-07
菜青虫菜菜

布局分页

查看全部

0 采集收起来源：布局结构
2016-01-07
zccfly

animation step

查看全部

0 采集收起来源：圣诞树、月亮与云
2016-01-07
NoLimits

<script type="text/javascript"> var docEl = document.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //设置根字体大小 docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; }; //绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> 字体自适应大小

查看全部

0 采集收起来源：关键帧动画
2018-03-22
菜青虫菜菜

timing-function 作用于每两个关键帧之间，而不是整个动画

查看全部

0 采集收起来源：课程简介
2016-01-07
菜青虫菜菜

rem是什么？ rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem

查看全部

0 采集收起来源：自适应rem布局
2016-01-07
菜青虫菜菜

【布局视口的尺寸】document.documentElement.clientWidth/Height（不包括滚动条）【视觉视口的尺寸】window.innerWidth/Height（包括滚动条）

查看全部

0 采集收起来源：自适应rem布局
2016-01-07
代码娟

.cloudy { background: #60768D; border-radius: 50%; box-shadow: #60768D 1.2rem -0.2rem 0 -0.1rem, #60768D 0.5rem -0.5rem, #60768D 0.8rem 0.2rem,#60768D 1.5rem 0.2rem 0 -0.2rem; height: 1rem; width: 1rem; position: absolute; left: .5rem; top: 1.8rem; z-index: 5; -webkit-animation: cloudy 5s ease-in-out infinite; -moz-animation: cloudy 5s ease-in-out infinite; }

查看全部

0 采集收起来源：圣诞树、月亮与云
2016-01-06
朵朵熙熙丶 00:17

挺咯你

查看全部

0 采集收起来源：编程思路
2016-01-05
zccfly

$("button:last").on("click", function() { // $.Deferred改造 function C() { var dtd = $.Deferred(); //创建 setTimeout(function() { dtd.resolve(3) }, 500) return dtd; } //模拟异步D function D(value) { var dtd = $.Deferred(); //创建 setTimeout(function() { dtd.resolve(value + 4) }, 500) return dtd; } //模拟E function E(value) { var dtd = $.Deferred(); //创建 setTimeout(function() { dtd.resolve(value + 5) }, 1000) return dtd; } C() .then(function(data) { return D(data) }) .then(function(data) { return E(data) }) .then(function(data) { $(".container").html("Deferred异步处理:" + data) }) })

查看全部

0 采集收起来源：异步编程梳理
2018-03-22
Plus_Happy2

ctx.fillStyle = "blue"; ctx.fillRect(10, 10, 190, 100);

查看全部

0 采集收起来源：CANVAS概述
2018-03-22

首页上一页 12 13 14 15 16 17 18 下一页尾页

0/150

提交

取消

开始学习

课程须知: 本课程为高级案例课程，其中所用的大部分知识点不做深入剖析，只讲解如何使用，部分代码需要由你自己填充。需要具备如下知识： 1、HTML4、HTML5 2、CSS2、CSS3 3、JavaScript、jQuery 4、面向对象思想 5、SVG基础知识 6、Canvas基础知识

老师告诉你能学到什么？: 1、rem式布局 2、转场特效 3、异步编程处理 4、CSS3动画过渡 5、JS动画实现 6、H5的音乐效果 7、H5的视频效果 8、SVG画图 9、canvas画图