慕课网

H5+JS+CSS3 实现圣诞情缘

最热最新

雾林湘竹

谷歌浏览器（以下两种写法都可以） .birdFly { /*写法1*/ animation: bird-slow 400ms steps(3,start) infinite; /*写法2*/ -webkit-animation-name: bird-slow; -webkit-animation-duration: 400ms; -webkit-animation-timing-function: steps(3); -webkit-animation-iteration-count: infinite; } /*???*/ @keyframes bird-slow { 0% {background-position-x: -0px} 100% {background-position-x: -273px} }

查看全部

0 采集收起来源：关键帧动画
2016-11-17
ISpringWang

自适应

查看全部

0 采集收起来源：自适应rem布局
2016-11-13
qq_我们一样的心_03765901

过去,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发. domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的; document.addeventListener('DOMContentLoaded',function(){...},false); 值得注意的是,这个网站的行为层可以被更快速地启动,这意味着用户可以更快开始浏览网站,这对于连接速度慢的网络或者包含大量图片并需要一些时间加载图片的网页来说特别重要,如果只想在所有资源都完成加载之后运行脚本, 那么仍然可以使用load.

查看全部

0 采集收起来源：关键帧动画
2016-11-08
hao_sx

雪花圣诞

查看全部

0 采集收起来源：最终效果与总结
2016-11-07
静中动

<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
静中动

docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';

查看全部

0 采集收起来源：自适应rem布局
2016-11-05
静中动

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

查看全部

0 采集收起来源：自适应rem布局
2016-11-05
慕仔1661316

$("button:last").click(function() { var audio = new Audio('http://www.imooc.com/activity/project/project1/audio/happynewyear.mp3'); audio.play(); audio.addEventListener('ended', function() { audio.play(); }, false); })

查看全部

0 采集收起来源：场景音乐
2018-03-22
arieslx

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

查看全部

0 采集收起来源：自适应rem布局
2016-11-03
懂許哆0 00:23

？

查看全部

0 采集收起来源：课程简介
2016-11-02
伊芙1

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

查看全部

0 采集收起来源：自适应rem布局
2016-10-31
张佳宁

技术分解点如何做rem布局帧动画的原理如何营造3d效果设计模式和异步代码梳理 canvas绘图 svg绘图

查看全部

0 采集收起来源：编程思路
2016-10-28
慕运维1425252

记录了

查看全部

0 采集收起来源：关键帧动画
2016-10-07
Snail_pop

关键帧动画原理：假如，现在有一组由三张图合成的雪碧图，每张图大小是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 采集收起来源：关键帧动画
2016-09-30
慕粉3962077

自适应rem布局 rem是个低调的css单位，手淘在移动端的布局是基于rem处理的，当然还要基于viewport的处理，这里暂且不表。在我的上个七夕主题中采用的是流式布局( 使用 % 百分比定义宽度，高度大都是用px来固定住)。如果使用 em 或 rem 单位进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。因为em是相对父级元素的原因没有得到推广，圣诞主题采用rem布局单位 rem是什么？ rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem 自适应处理：使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果参考右边代码区域，一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; 给html设置fontSize大小，其实就是在DOMContentLoaded或者resize变化后调整fontSize的大小，从而调整rem的比值关系。慕课的布局是右边区域展示，所以按照移动端的320宽度为标准去做适配的，当然基于这个缩放都是没关系的总结：根据实际情况通过设计稿与当前可视区的大小做一个比例关系，通过这个比例进行缩放处理

查看全部

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