慕课网

H5+JS+CSS3 实现圣诞情缘

最热最新

没人能救你呀吼3302659 01:13

不太懂

查看全部

0 采集收起来源：编程思路
2017-03-17
没人能救你呀吼3302659 00:53

这是啥

查看全部

0 采集收起来源：编程思路
2017-03-17
楚初 01:43

技术点分解

查看全部

0 采集收起来源：编程思路
2017-03-14
楚初 01:12

新增内容

查看全部

0 采集收起来源：编程思路
2017-03-14
楚初 00:54

主要采用

查看全部

0 采集收起来源：编程思路
2017-03-14
小乌龟学习

动画原理：假如，现在有一组由三张图合成的雪碧图，每张图大小是91*71 如果实现3张图帧动画效果，代码如下 animation:bird-slow 400ms steps(3) infinite; @keyframes bird-slow { 0% {background-position-x: -0px} 100% {background-position-x: -273px} } 通过定义一个类，类中定义的动画的一些关键数据，比如动画名，时间，次数，切换的位置通过keyframes定义动画具体执行参数与时间段 steps(3)的意思就是：keyframes设置的0%-100%的段中，background-position的的x坐标会变化3次 steps会平分这些段落值，其变化值就是 background-position-x: -0px background-position-x: -91px background-position-x: -182px

查看全部

0 采集收起来源：关键帧动画
2017-02-22
朝朝暮慕

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

查看全部

0 采集收起来源：关键帧动画
2017-02-20
墨羽angel

.page{ width: 5rem; height: 10rem; background: yellow; font-size: 0.3rem; } <body> <section> <div class="page">rem跟着html:font-size变化</div> </section> </body> <script type="text/javascript"> var docEl = document.documentElement, //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值 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 采集收起来源：自适应rem布局
2018-03-22
antsay0 02:46

看着好难

查看全部

0 采集收起来源：课程简介
2017-01-30
antsay0 02:46

好

查看全部

0 采集收起来源：课程简介
2017-01-30
青春小朋友

浏览器兼容问题：-wobkit：谷歌；-moz：火狐；如果3*3矩阵的图片，只想显示一张的话，需要把backtround-size:300%，300%；想取其他图片的话就通过百分比取图；火狐不支持background-size-x这个属性；所以直接用background-size会比较好；

查看全部

1 采集收起来源：自适应雪碧图
2017-01-12
青春小朋友

1：animation-name:动画名 2：animation-duration：时间 3：animation-delay:延时 4：animation-iteration-count：次数 5：animation-direction：方向 6：animation-play-state:控制 7：animation-fill-mode:状态 8：animation-timing-function：关键帧变化 w3c上面有介绍 1——7；第八个属性：控制时间，用steps()函数处理图片的话。类似setTimeout的处理感觉

查看全部

0 采集收起来源：关键帧动画
2017-01-12
刘健lj

元素动起来：运动 = 关键帧动画 + 坐标变化坐标变化：元素.position定位，修改top,left坐标修改通过css3的transform属性的translate 插件：jquery.transit

查看全部

0 采集收起来源：元素运动实现
2017-01-06
刘健lj

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

查看全部

0 采集收起来源：关键帧动画
2017-01-06
超轶主

为了改成异步编程的流程问题， jQuery 也引入了 Promise 的概念。 Promise 是一种令代码异步行为更加优雅的抽象，有了它，我们就可以像写同步代码一样去写异步代码。这个东东看起来很复杂，实际上我们只要抓住核心的使用就可以

查看全部

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

首页上一页 1 2 3 4 5 6 7 下一页尾页

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