慕课网

H5+JS+CSS3 实现圣诞情缘

最热最新

海绵宝宝的微笑啊

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

查看全部

0 采集收起来源：自适应rem布局
2016-04-10
海绵宝宝的微笑啊

的负担复旦反对反对法地方

查看全部

0 采集收起来源：自适应rem布局
2016-04-10
嗜睡剪刀手_爱德华

对于background-position-x: x;和background-position-y: y;而言，在Firefox和IE中是不支持的，需使用标准书写方式：background-position: x y; 对于steps(counts,end/start)函数，此函数作用于animation-name中动画函数的相邻两个状态之间，将两个状态之前拆分成counts个帧，因此使用steps()是和animation-name中的对应为：如果animation-name函数中的状态为始末两种，则使用counts>1,将始末两个状态拆分成需要的个数；如果animation-name函数中的状态为多于始末两个状态时，则counts=1，不进行拆分；

查看全部

1 采集收起来源：关键帧动画
2018-03-22
lynnlty

背景用%

查看全部

0 采集收起来源：自适应雪碧图
2016-03-31
php熊

rem跟着屏幕增缩变化： <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣诞主题</title> <style type="text/css"> section { width: 100%; height: 100%; background: red; } .page{ width: 5rem; height: 10rem; background: yellow; font-size: 0.3rem; } </style> </head> <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 = ? }; //绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> </html>

查看全部

0 采集收起来源：自适应rem布局
2018-03-22
夏末_清

技术分解

查看全部

0 采集收起来源：编程思路
2016-03-24
莫忘_初心 00:36

参考右边代码区域，一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';

查看全部

0 采集收起来源：编程思路
2016-03-21
梧桐人生

参考右边代码区域，一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-size

查看全部

0 采集收起来源：自适应rem布局
2016-03-20
小飞碟

h5

查看全部

0 采集收起来源：最终效果与总结
2016-03-07
陈mou

设置3d效果需要在父元素上设置transform-style:preserve-3d;这样子元素才拥有了3d效果，如果孙元素也要有那么需要在子元素上也设置此属性。父元素设置perspective:length属性之后子元素才可以看到三维视觉最后需要在子元素上设置x/y/z轴上的旋转角度 transform:rotatex/y/z(number deg)

查看全部

1 采集收起来源：3D变换的梳理
2016-03-06
陈mou

当需要填充整个元素做背景动态图的时候，使用background-size:100%会让整个背景图片填充，例如课程中的8个海盗船，但是如果将背景的大小按照比例百分比缩放background-size:xxx% xxx%那么就可以用background-size:100%来填充元素

查看全部

0 采集收起来源：自适应雪碧图
2016-03-06
陈mou

理解steps(x)函数的意义，它是把每段变化过程分为x段执行。例如课程中的0%-100%分为了三段，就可以正确的将雪碧图中三个图片展示出来

查看全部

0 采集收起来源：关键帧动画
2016-03-06
星空幻影 00:09

看看学习学习

查看全部

0 采集收起来源：整体介绍
2016-03-04
思如海

.container { position: relative; -webkit-perspective: 700px; -webkit-transform-style: preserve-3d; -moz-perspective: 700px; -moz-transform-style: preserve-3d; } #card { width: 100%; height: 100%; position: absolute; background-color: red; transform: rotateY(70deg); transform-style:preserve-3d; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(70deg); -webkit-transform-style: preserve-3d; }

查看全部

0 采集收起来源：3D变换的梳理
2016-03-03
思如海

背景图等比缩放，那么背景定位也要等比去写

查看全部

0 采集收起来源：自适应雪碧图
2016-03-02

首页上一页 9 10 11 12 13 14 15 下一页尾页

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