为了账号安全,请及时绑定邮箱和手机立即绑定

HTML5+CSS3实现春节贺卡

难度中级
时长 1小时51分
学习人数
综合评分9.67
211人评价 查看评价
9.9 内容实用
9.5 简洁易懂
9.6 逻辑清晰
  • demo网址:http://www.imooc.com/activity/project1 移动端观看 PC端观看需调为手机浏览模式
    查看全部
    5 采集 收起 来源:课程介绍

    2017-08-23

  • 背景音乐http://www.imooc.com/activity/project/project1/audio/happynewyear.mp3
    查看全部
  • <meta name="format-detection" content="telephone=no"> //禁止iphone6数字超链接 <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> //强制浏览器使用IE最高版本或是webkit内核
    查看全部
  • 老师讲漏的内容: 1.第二张图片的淡出,样式文件加入如下代码: #page2.fadeOut { opacity: .3; -webkit-transform: translate(0,-100%); transform:translate(0,-100%); } 最后一张淡入代码: #page3.fadeIn { -webkit-transform: translate(0 -100%); transform: translate(0, -100%); } js文件获取page1,page2,page3 var page1 = document.getElementById("page1"); var page2 = document.getElementById("page2"); var page3 = document.getElementById("page3"); 对page1加入监听事件: //点击屏幕开始好运2016 page1.addEventListener("touchstart", function(event) { page1.style.display = "none"; page2.style.display = "block"; page3.style.display = "block"; page3.style.top = "100%"; setTimeout(function() { page2.setAttribute("class", "page fadeOut"); page3.setAttribute("class", "page fadeIn"); },5500); }, false);
    查看全部
  • 结构层 代码: <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>结构层</title> </head> <body> <div class="music"> <img src="images/music_pointer.png" > <img src="images/music_disc.png"> </div> <div class="page" id="page1"> <div class="bg"></div> <div class="p1_lantern">点击屏幕<br>开启好运2016</div> <div class="p1_imooc"></div> <div class="p1_words">2016年慕课网新年特献</div> </div> <div class="page" id="page2"> <div class="bg"></div> <div class="p2_circle"></div> <div class="p2_2016"></div> </div> <div class="page" id="page3"> <div class="bg"></div> <div class="p3_log"></div> <div class="p3_title"></div> <div class="p3_second"></div> <div class="p3_first"></div> <div class="p3_blessing"></div> </div> </body> </html>
    查看全部
  • 如果两个页面之间需要切换,可以加入具有p2_bg_loading bg两个类的div ,使第二页出现淡入的效果,代码如下 #page2 > .p2_bg_loading { z-index: 4; background: #ef1639; -webkit-animation: p2_bg_loading 1s linear forwards; animation: p2_bg_loading 1s linear forwards; } @keyframes p2_bg_loading { 0% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes p2_bg_loading { 0% {opacity: 1;} 100% {opacity: 0;} }
    查看全部
  • html5 中meta标签可以配置很多选项 可参考 http://blog.csdn.net/kongjiea/article/details/17092413
    查看全部
  • 各种宽高内容笔记
    查看全部
  • 让第二页和第三页同时显示,并且向下偏移100%,就是正好向下偏移出整个屏幕,又因为body的高度为屏幕的高度,overflow: hidden; 所以偏移出屏幕的内容,也就是第三页就直接消失,并且不会影响当前页面的内容。
    查看全部
  • page3.setAttribute('class','page fadeIn'); 这里为什么是'page fadein' 不是 'fadein'呢?因为page3本身就有一个page的class,如果直接写fadeIn的话,那page3就只有fadeIn的样式,page的class就没有了,所以要一起加上。当然这里也可以用其他的方法,page3.classList.add('fadeIn'); 这样写的话就类似于JQUERY的addClass,不需要考虑之前的class,当然这个也就兼容性问题。 兼容性可以参考 http://sentsin.com/web/190.html
    查看全部
  • transform: translate(0,-100%); 这是让内容从下面往上出现
    查看全部
  • 这时是0.5S,老师一时口快说成了5S
    查看全部
  • audio 的事件可参考 http://www.w3school.com.cn/tags/html_ref_eventattributes.asp
    查看全部
  • top:-3.4% 为什么,可能是因为让图片上移一点,不然会出现下移的现象,(可是我觉得这个好像没有必要,老师的这个width: 45vw;和height: 71.2vh;量的有不太对,我对老师切好的图量了一下width: 45.15625vw ; height: 68.838028vh;值是多少并不是太重要,主要是宽高比对应不上,所以背景图上并不能完全铺满,所以上面会有一点是没有背景图的,就会出现下移的情况),font-size: 3.506rem; 又是怎么来的呢,老师说是量的,其实是量后计算的。值应该是35.06pt(为什么是pt,psd上我见到的字体单位一般都是pt,我又经常认为pt和px近使相等,这是我个人理解,大家可以去查下资料),然后换算成rem 前面说过是除以10,就得到了3.506rem;rem 相关知识可参考 http://www.w3cplus.com/css3/define-font-size-with-css3-rem 。box-sizing: border-box;box-sizing又是个什么东西,可参考http://www.w3school.com.cn/cssref/pr_box-sizing.asp
    查看全部
  • 这个 top为什么会是 3vh呢?我们量音乐图标顶部到页面最上面的距离是35px , 而页面的高度是1136px (测量psd宽度为640*1136);(35/1136) * 100 大概就是3 ;right为什么是4呢,量音乐图标右部到页面最右面的距离是26px,页面的宽度是640px,所以 (26/640)*100 大概就是4 ;为什么有时除1136 有时除 640,如果是水平距离,比喻宽、left、right 就需要相对于页面的宽来计算,就是除以640,单位是vm; 如果是垂直距离,比喻高、top、bottom 就需要相对于页面的高来计算,就是除以1136,单位是vh; 为什么我前面都说大概呢?因为我没有设计图,就是基于做好的页面来量的,可能会有一点误差。
    查看全部
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
本课程是前端中级课程 1.HTML 和 CSS基础知识 2.HTML5 伪类和 CSS3动画基本知识 3.JavaScript基本语法知识
老师告诉你能学到什么?
1.学会手机端简单展示型网页的布局与分析 2.学会使用CSS3的transition和animation动画 3.学会使用HTML5的Audio API完成音乐交互 4.学会利用JavaScript和伪类制作出绚丽的交互效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!