h5案例(h5作品展示)
一、什么是h5页面
首先h5不是一项技术,而是一个标准,一个技术的集合.
其次就要知道什么是HTML语言,
它是一种描述性语言,全名“HyperTextMarkupLanguage(超文本标记语言)”,我们所使用的页面就是用html语言语言制作的。而h5就是HTML的第5个版本,而在这个版本中自增了许多特性,
例如:
1.拖拽释放,自定义属性,语义化更好的内容标签,音频,视频(audio,video),画布Canvas,地理(Geolocation)API,本地离线存储.
然而h5也有广义的说法,其中包含新增的c3特性,例如:1.颜色:新增RGBA,HSLA模式
2.文字阴影(text-shadow)
3.边框:圆角(border-radius)边框阴影:box-shadow
4.盒子模型:box-sizing
5.背景:background-sizebackground-originbackground-clip
6.渐变:linear-gradient,radial-gradient
7.过渡:transition可实现动画
8.自定义动画animate@keyfrom
9.媒体查询多栏布局@mediascreenand(width:800px){…}
10.border-image
11.2D转换;transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
12.3D转换
13.字体图标font-face
14.弹性布局flex
更多知识请关注黑马程序员哦~
二、含羞草实验成功案例
将含羞草从高处抛落到地面,反复很多次之后她发现,在开始抛的时候,含羞草还会将叶子闭合,等到几次之后它的叶子就不再闭合。
莫妮卡推测,含羞草叶子数次之后不闭合的原因可能是,它认为这种抛落不会对自身造成损伤,所以不再表现出自我保护的形态。
为了排除含羞草不是因为疲劳才不闭合,莫妮卡将又将同一株含羞草放到了不断抖动的机器上,这次含羞草很快闭上了它的叶子。这个实验得到的结论其实和巴克斯特实验得到的结论类似,即植物可能也拥有独立的意识,在面对危险的时候它会和人一样有应激反应。
三、有什么好的微信H5活动案例
所有惊艳到我们的H5都是对创意、技术、人性的深刻解读,比如网易哒哒《测试你的哲学气质》、《深夜,男同事问我睡了吗……》、《睡姿大比拼》、《入职第一天,网易爸爸教我学做人》、《军装照》……
当然,其实这些案例属于极少数,不容易实现,但是我们可以通过专业的H5工具Epub360,利用一些技术组件来小小的“惊艳”一把,下面请大家来欣赏这几支媒体融合案例,为媒体人在后续创作中积累经验,寻找灵感。
01.2019年进博会开幕倒计时
创意融合形式:一镜到底
Epub360案例赏析:采用一镜到底效果,呈现进博会数字倒计时效果、场馆、产品、文案等元素,带来连续的视觉冲击。通过手势滑动初始速度,控制云层、建筑等亮点的快慢呈现,整体的交互节奏更加自由可控,可读性强。
02.上海一年,期待正变为现实
创意融合形式:横屏长页面
Epub360案例赏析:整个H5回顾了2019年一年,国家对上海的关注与期待。所有新闻内容以时间轴方式展开,通过长页面呈现。配合手势滑动长页面到指定位置,用锚点触发微交互动画,进而呈现更多信息。
03.进博上官小狮子提前探营进博会
创意融合形式:长页面+2.5D插画
Epub360案例赏析:竖屏长页面+2.5D简约插画风格,空间感十足。滑动长页面,由上观新闻IP形象小狮子带入情境,在各个建筑中穿梭,结尾到达本次进博会的四叶草展馆,十分有趣。
04.测测你是进博会哪类买手
创意融合形式:模拟群聊+测试题
Epub360案例赏析:进入H5后,以模拟群聊形式邀请用户参与测试,答完6道测试题,分析用户的进博会买手类型,最终推荐适合当前用户浏览的展区,结合雷达图展示测试结果,最终可将测试结果长按保存到手机。