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

HTML5+CSS3实现春节贺卡

难度中级
时长 1小时51分
学习人数
综合评分9.67
209人评价 查看评价
9.9 内容实用
9.5 简洁易懂
9.6 逻辑清晰

最新回答 / FeliceFeng
可以发实现效果截图,具体分析一个,执行index.html页面,快捷键f12可以调试

最新回答 / AR414
认真听课好嘛?不用插件,用css就可以实现background: url("../images/p1_lantern.png") no-repeat center center;background-size: 100%;可参考:https://github.com/ar414-com/web/blob/master/html5cards/css/style.css

最新回答 / AR414
可以参考下我的作品,在老师的基础上我做了优化:1、音乐停止与播放时图标指针变化2、第二页倒计时显示3、展示到第三页的时候绑定上拉下滑翻页。github:https://github.com/ar414-com/html5cards效果链接:https://ar414-com.github.io/html5cards/(觉得有帮助可以start一下呗)
可以参考下我的作品,在老师的基础上我做了优化:
1、音乐停止与播放时图标指针变化
2、第二页倒计时显示
3、展示到第三页的时候绑定上拉下滑翻页。
github:https://github.com/ar414-com/html5cards
效果链接:https://ar414-com.github.io/html5cards/(觉得有帮助可以start一下呗)

最新回答 / AR414
https://github.com/ar414-com/web/tree/master/html5cards
还以为老师是妹子,果断关注,直到这节课。。。。

最赞回答 / AR414
可以参考一下我的作品,在老师的基础上我做了优化:1、音乐停止与播放时图标指针变化 2、第二页倒计时显示 3、展示到第三页的时候绑定上拉下滑翻页。github:https://github.com/ar414-com/html5cards 效果链接:https://ar414-com.github.io/html5cards/(觉得有帮助可以start一下呗)

最新回答 / Erinnn
有三级 border padding content我理解的是图片在border内部 而文字在content内部71.2vh如果不加border-box指的是content的大小,加了以后就变成了border大小;所以图片还是和原来一样,而文字因为padding处于灯笼内部。还有一种方法是不加border-box直接把高度改为40.2vh(71.2-31);
老师讲得很不错呢!!
我的学习成品:http://1t.click/b44G
(按F12,选择手机页面查看)
讲的很好!!!!

最新回答 / AR414
官网:http://www.wampserver.com/en/可以参考下我的作品,在老师的基础上我做了优化:1、音乐停止与播放时图标指针变化 2、第二页倒计时显示 3、展示到第三页的时候绑定上拉下滑翻页。github:https://github.com/ar414-com/html5cards 效果链接:https://ar414-com.github.io/html5cards/(觉得有帮助可以start一下呗)
灯笼CS设置:
#page3 > .p3_first {_first 1s infinite alternate;-webkit-animation: first 1s infinite alternate;}
@keyframes first {0% {opacity: .7;-webkit-transform: scale(.9,.9);transform: scale(.9,.9);}100% {opacity: 1;} }
#page3 > .p3_second {//同first}
首页上一页1234567下一页尾页
课程须知
本课程是前端中级课程 1.HTML 和 CSS基础知识 2.HTML5 伪类和 CSS3动画基本知识 3.JavaScript基本语法知识
老师告诉你能学到什么?
1.学会手机端简单展示型网页的布局与分析 2.学会使用CSS3的transition和animation动画 3.学会使用HTML5的Audio API完成音乐交互 4.学会利用JavaScript和伪类制作出绚丽的交互效果

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消