慕课网

H5+JS+CSS3 实现圣诞情缘

最热最新

魏奔奔

polygon、defs、linearGradient 绘制形状：polygon，这是SVG中定义的基本形状，可以通过polygon的points绘制出多边形组成的坐标点，points属性定义多边形每个角的x和y坐标。多边形至少要3个边，所一points至少要定义3组坐标才能创建一个三角图形填充颜色：默认svg会用黑色填充,一般可以通过fill填充颜色，同时svg也是dom节点也可以通过style直接用样式属性设计元素的样式。 linearGradient元素即可定义线性渐变，每一个渐变色成分使用stop元素定义 <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#FCF0BC"></stop> <stop offset="100%" stop-color="#FCF0BC"></stop> </linearGradient> 1、渐变元素必须放到defs元素中； 2、需要给渐变色元素设置id值，否则的话，别的元素无法使用这个渐变色 3、渐变色的成员使用stop定义，他的属性也可以使用css定义；他支持class、id这种标准HTML都支持的属性。其他常用属性如下：offset属性（这个定义了该成员色的作用范围，该属性取值从0%到100%；通常第一种颜色都是设置为0%，最后一种设置为100%） 4、渐变色的使用，直接使用url(#id)的形式复制给fill或者stroke就可以了

查看全部

1 采集收起来源：SVG星星
2018-03-22
魏奔奔

var audio = new Audio(url);//创建一个音频对象并传入地址 audio.loop = loop || false;//是否循环 audio.play();//开始播放 var audio1 = HTML5Audio(playURL); audio1.end(function(){ Html5Audio(cycleURL.true); })

查看全部

0 采集收起来源：场景音乐
2016-12-15
魏奔奔

var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); //画一条直线 ctx.moveTo(50,50); ctx.lineTo(200,200); ctx.stroke();

查看全部

0 采集收起来源：CANVAS概述
2016-12-14
魏奔奔

创建一个观察者对象： var observer = new Obserber(); 通过subscribe方法，实现一个事件的观察 observer.subscribe("任务名"，处理函数) 通过publish触发观察时间，在任意时刻触发了这个观察的任务名，将会触发这个事件订阅subscribe方法 observer.publish("任务名") 取消事件订阅，意味着不会执行 observer.unsubscribe("任务名") 观察者使用场合就是：当以个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式。光差者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化。

查看全部

0 采集收起来源：观察者模式的理解
2018-03-22
魏奔奔

var dtd=$.Deferred();//创建 dtd.resolve()//成功 dtd.then()//执行回调 dtd.then(function(){ //操作1 }).then(function(){ //操作2 }).then(function(){ //操作3 })

查看全部

0 采集收起来源：异步编程梳理
2016-12-14
魏奔奔

animation: name duration timing-function delay iteration-count direction fill-mode;

查看全部

0 采集收起来源：关键帧动画
2016-12-14
魏奔奔

CSS3的Animation有八个属性 animation-name ：动画名 animation-duration：时间 animation-delay：延时 animation-iteration-count：次数 animation-direction：方向 animation-play-state：控制 animation-fill-mode：状态 animation-timing-function：关键帧变化

查看全部

0 采集收起来源：关键帧动画
2016-12-14
慕粉Dream不重复

//绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false);

查看全部

0 采集收起来源：自适应rem布局
2016-12-05
慕粉4396508

Animation -name Animation duration

查看全部

0 采集收起来源：关键帧动画
2016-12-04
慕粉4164715

//绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false);

查看全部

0 采集收起来源：自适应雪碧图
2016-12-01
慕丝0918456

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

查看全部

0 采集收起来源：自适应rem布局
2016-11-28
慕丝0918456 01:40

一.技术分解

查看全部

0 采集收起来源：编程思路
2016-11-23
慕丝0918456 00:52

编程思路： 1.rem的布局 2.帧动画的原理 3.面向对象的编程 4..设计模式和异步代码梳理 5.canvas绘图、svg绘图 6.精灵动画的实现及如何营造3d效果

查看全部

0 采集收起来源：编程思路
2016-11-23
林辛兮_Shimme_0

perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。

查看全部

0 采集收起来源：3D变换的梳理
2016-11-23
林辛兮_Shimme_0

总结：呈现3d效果需要3部分父元素或者当前运动元素上设置透视角perspective，perspective属性的值决定了3D效果的强度 3D视图，设置在父元素上，子元素都可以相对与父元素的平面进行3d变形操作 3D变形函数，translate3d、scale3d、rotateX、rotateY、rotateZ等等

查看全部

0 采集收起来源：3D变换的梳理
2016-11-23

首页上一页 3 4 5 6 7 8 9 下一页尾页

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画图