慕课网

H5+JS+CSS3 实现圣诞情缘

最热最新

撸啊撸

查看全部

0 采集收起来源：关键帧动画
2016-04-28
学习啊！

查看全部

0 采集收起来源：自适应rem布局
2016-04-28
学习网页制作！

查看全部

0 采集收起来源：自适应rem布局
2016-04-28
学习啊，我的笔记呢？

查看全部

0 采集收起来源：关键帧动画
2016-04-28
gong123

移动端知识点

查看全部

0 采集收起来源：自适应rem布局
2016-04-26
Godloveviyoung

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

查看全部

0 采集收起来源：3D变换的梳理
2016-04-25
yangyuan

缩放2倍，即background-size: 200% 100%;达到平铺的效果，而关键帧也只需要2帧切换，steps(2)，坐标从0%- 负200%切换

查看全部

0 采集收起来源：圣诞树、月亮与云
2016-04-20
yangyuan

循环音乐 var audio1 = HTML5Audio(playURl) audio1.end(function() { Html5Audio(cycleURL, true) })

查看全部

0 采集收起来源：场景音乐
2016-04-20
yangyuan

new pageA(function() { new pageB(function() { new pageC(function() { //执行下一个 }) }) }) 阅场景pageA完成事件 observer.subscribe("completeA", function() { //做一些是 }) 触发场景pageA完成事件 new pageA(function() { observer.publish("completeA"); //触发 })

查看全部

0 采集收起来源：场景切换
2018-03-22
yangyuan

让一个元素放大2倍，注意浏览器兼容加前缀 -webkit-transform: scale(2); -moz-transform: scale(2); 特别注意：transform只是一个静态属性，它并不能让元素进行运动变化一般来说都会通过对元素增加样式的方式来调用css3动画。在css文件中定义2个样式，effect-out与effect-in .effect-out{ animation: effectOut 8s ease-in-out forwards; } @keyframes effectOut{ 0% { opacity:1; } 100% {transform: scale(20); opacity:0; } }

查看全部

0 采集收起来源：镜头效果
2016-04-19
qq_元宵宵lonely_0

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

查看全部

0 采集收起来源：自适应rem布局
2016-04-19
yangyuan

Canvas绘制的总体的步骤创建HTML页面，设置画布标签编写js，获取画布dom对象通过Canvas标签的Dom对象获取上下文设置绘制线样式、颜色绘制矩形，或者填充矩形

查看全部

0 采集收起来源：CANVAS概述
2016-04-19
yangyuan

创建一个观察者对象 var observer = new Observer(); 通过调用subscribe方法，实现一个事件的观察 observer.subscribe("任务名"，处理函数) 通过publish触发观察事件，在任意时刻触发了这个观察的任务名，将会触发这个事件订阅subscribe方法 observer.publish("任务名") 取消事件订阅，意味着就不会执行了 observer.unsubscribe("任务名")

查看全部

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

要想实现3D的效果，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。坐标系统的 z 轴同时与 x 和 y 轴垂直可以呈现3d的属性有，translate3d、scale3d、rotateX、rotateY、rotateZ等等呈现3d效果需要3部分父元素或者当前运动元素上设置透视角perspective，perspective属性的值决定了3D效果的强度 3D视图，设置在父元素上，子元素都可以相对与父元素的平面进行3d变形操作 3D变形函数，translate3d、scale3d、rotateX、rotateY、rotateZ等等写法： transform:rotateY(70deg);

查看全部

0 采集收起来源：3D变换的梳理
2016-04-19
yangyuan

因此在实现上，让元素动起来：运动 = 关键帧动画 + 坐标变化关键帧动画我们已经实现了，那坐标的变化就很简单了，一般来说前端能用到的手段元素.position定位，修改top,left坐标修改通过css3的transform属性的translate $("button").on("click",function(){ /** * 通过transition的方式改变运动 */ $(".bird").transition({ 'right': "3rem", }, 10000,'linear',function(){ alert("结束") }); })

查看全部

0 采集收起来源：元素运动实现
2018-03-22

首页上一页 7 8 9 10 11 12 13 下一页尾页

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