慕课网

H5+JS+CSS3 实现圣诞情缘

最热最新

Plus_Happy2

$(".bird").transition({ 'right': "3rem", }, 10000,'linear',function(){ alert("结束") });

查看全部

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

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

查看全部

0 采集收起来源：关键帧动画
2016-01-02
蛋蛋先生

rem相对于根元素html和font-size进行计算，em相对于父元素font-size进行计算。 16px = 1 rem。

查看全部

0 采集收起来源：自适应rem布局
2016-01-02
EpisodeOne 02:02

技术2

查看全部

0 采集收起来源：编程思路
2016-01-01
EpisodeOne 01:42

技术1

查看全部

0 采集收起来源：编程思路
2016-01-01
EpisodeOne 01:13

设计思路2

查看全部

0 采集收起来源：编程思路
2016-01-01
EpisodeOne 00:53

设计思路1

查看全部

0 采集收起来源：编程思路
2016-01-01
乔峰之巅

$("#spinner") .css({ "transform": "rotateY(-" + angle + "deg)", "transition":"1s" }) .css({ "-moz-transform": "rotateY(-" + angle + "deg)", "-moz-transition":"1s" })

查看全部

0 采集收起来源：3D旋转特效(中)
2018-03-22
乔峰之巅

/** * 开窗 * @return {[type]} [description] */ pageA.prototype.openWindow = function(callback) { var count = 1; var complete = function() { ++count if (count === 2) { callback && callback(); } } var bind = function(data) { data.one("transitionend webkitTransitionEnd", function(event) { data.removeClass("window-transition") complete() }) } bind(this.$leftWin.addClass("window-transition").addClass("hover")) bind(this.$rightWin.addClass("window-transition").addClass("hover")) }

查看全部

1 采集收起来源：3D开窗效果
2018-03-22
乔峰之巅

绘制形状在svg中绘制多边形的标签是polygon，这是SVG中定义的基本形状，可以通过polygon的points绘制出多边形组成的坐标点，points 属性定义多边形每个角的 x 和 y 坐标。多边形至少要有3个边，所以points至少要定义3组坐标才能创建一个三角图形。可以观察下points中是由6组坐标绘制的一个五角星图（当然我是用工具生成的坐标）填充颜色默认svg会用是黑色填充颜色，所以我们需要设置新的颜色。一般可以通过fill填充颜色。同时svg也是dom节点也可以通过style直接用样式属性设计元素的样式。这里填充颜色用到了linearGradient元素。线性渐变使用linearGradient元素即可定义线性渐变，每一个渐变色成分使用stop元素定义 <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#FCF0BC"></stop> <stop offset="0%" stop-color="#FCF0BC"></stop> </linearGradient> 1. 渐变色元素必须要放到defs元素中； 2. 需要给渐变色元素设置id值，否则的话，别的元素无法使用这个渐变色。 3. 渐变色的成员使用stop定义，它的属性也可以使用CSS定义；它支持class，id这种标准HTML都支持的属性。其它常用属性如下： offset属性：这个定义了该成员色的作用范围，该属性取值从0%到100%(或者是0到1)；通常第一种颜色都是设置成0%，最后一种设置成100%。 stop-color属性：这个很简单，定义了该成员色的颜色。 stop-opacity属性：定义了成员色的透明度。 x1,y1,x2,y2属性：这两个点定义了渐变的方向，默认不写的话是水平渐变，上面例子中同时也创建了一个垂直渐变。 4. 渐变色的使用，如例子中所示，直接用url(#id)的形式赋值给fill或者stroke就可以了。

查看全部

2 采集收起来源：SVG星星
2018-03-22
乔峰之巅

窗口自适应 <script type="text/javascript"> //rem设置 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; //宽与高度 document.body.style.height = clientWidth * (900 / 1440) + "px" }; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>

查看全部

0 采集收起来源：圣诞树、月亮与云
2018-03-22
乔峰之巅

/*云*/ .cloudy { background: #60768D; border-radius: 50%; box-shadow: #60768D 1.2rem -0.2rem 0 -0.1rem, #60768D 0.5rem -0.5rem, #60768D 0.8rem 0.2rem,#60768D 1.5rem 0.2rem 0 -0.2rem; height: 1rem; width: 1rem; position: absolute; left: .5rem; top: 1.8rem; z-index: 5; -webkit-animation: cloudy 5s ease-in-out infinite; -moz-animation: cloudy 5s ease-in-out infinite; } @-webkit-keyframes cloudy { 50% { -webkit-transform: translateY(-0.1rem); } }

查看全部

0 采集收起来源：圣诞树、月亮与云
2015-12-31
乔峰之巅

/*月亮*/ .moon { background: #FCF0BC; width: 2rem; height: 2rem; border-radius: 50%; box-shadow: 0 0 1.5rem #FCF0BC; position: absolute; left: 3.3rem; top: .8rem; -webkit-animation: nucleus 2s infinite linear; -moz-animation: nucleus 2s infinite linear; } /** * 光晕效果 */ @-webkit-keyframes nucleus { 0% { box-shadow: 0 0 0 transparent; } 50% { box-shadow: 0 0 1rem #FCF0BC; } 100% { box-shadow: 0 0 0 transparent; } }

查看全部

0 采集收起来源：圣诞树、月亮与云
2015-12-31
乔峰之巅

/** * 圣诞树 * animation: name duration timing-function delay iteration-count direction; */ .tree { width: 2.71rem; height: 4.24rem; z-index: 15; position: absolute; bottom: 0; left: 1rem; background-image: url(http://img1.sycdn.imooc.com//565d07d30001c97605420424.png); background-size: 200% 100%; -webkit-animation: treeAnim 1s steps(1,start) infinite; } @-webkit-keyframes treeAnim { 0% { background-position: 0% 100%; } 100% { background-position: -200% 100%; } } @-moz-keyframes treeAnim { 0% { background-position: 0% 100%; } 100% { background-position: -200% 100%; } }

查看全部

0 采集收起来源：圣诞树、月亮与云
2015-12-31
乔峰之巅

//切换切换 document.querySelector("#page").addEventListener("change", function(e) { //页面名称 var pageName = e.target.value; switch (pageName) { case "page-b": //切换到b页面，所以需要在当前a页面执行动画 //让元素慢慢放大，所以需呀控制a元素 $(".page-a").addClass("effect-out") break; case "page-c": //切换到c页面，所以需要在目标c页面执行动画 //因为让要c页面先放大，然后缩小 $(".page-c").addClass("effect-in") break; } }, false)

查看全部

0 采集收起来源：镜头效果
2018-03-22

首页上一页 13 14 15 16 17 18 19 下一页尾页

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