h5案例(h5作品展示)

编程之家2024-05-20124次浏览

首先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工具Epub360，利用一些技术组件来小小的“惊艳”一把，下面请大家来欣赏这几支媒体融合案例，为媒体人在后续创作中积累经验，寻找灵感。

01.2019年进博会开幕倒计时

创意融合形式：一镜到底

Epub360案例赏析：采用一镜到底效果，呈现进博会数字倒计时效果、场馆、产品、文案等元素，带来连续的视觉冲击。通过手势滑动初始速度，控制云层、建筑等亮点的快慢呈现，整体的交互节奏更加自由可控，可读性强。

02.上海一年，期待正变为现实

创意融合形式：横屏长页面

Epub360案例赏析：整个H5回顾了2019年一年，国家对上海的关注与期待。所有新闻内容以时间轴方式展开，通过长页面呈现。配合手势滑动长页面到指定位置，用锚点触发微交互动画，进而呈现更多信息。

03.进博上官小狮子提前探营进博会

创意融合形式：长页面+2.5D插画

Epub360案例赏析：竖屏长页面+2.5D简约插画风格，空间感十足。滑动长页面，由上观新闻IP形象小狮子带入情境，在各个建筑中穿梭，结尾到达本次进博会的四叶草展馆，十分有趣。

04.测测你是进博会哪类买手

创意融合形式：模拟群聊+测试题

Epub360案例赏析：进入H5后，以模拟群聊形式邀请用户参与测试，答完6道测试题，分析用户的进博会买手类型，最终推荐适合当前用户浏览的展区，结合雷达图展示测试结果，最终可将测试结果长按保存到手机。