2014年Android学习资料之使用 HTML 5 开发新的可视化 UI 特性61821820.pptVIP

Android学习资料之使用 HTML 5 开发新的可视化 UI 特性（2） 清单 4. 使用 CSS 的 JavaScript rotate 函数 清单 5. 图 2 的下半部分代码 新语义 清单 6. HTML 5 中的新语义元素 清单 7. 代码形式的 HTML 5 表单元素 清单 8. HTML 5 验证 APIs 的应用 结束语 1 AJFJDSHFDHGKHFKLGHSKHGLKDHGJHLKSHDGJLSHLGDHSLHG function rotate(){ $(formSection).style[-webkit-transform] = rotateZ(-5deg); $(formSection).style[-webkit-transition] = -webkit-transform 2s ease-in-out; $(rtBtn).innerHTML = Undo; $(rtBtn).onclick = function() { $(formSection).style[-webkit-transform] = ; $(rtBtn).innerHTML = Rotate; $(rtBtn).setAttribute(onclick, rotate()); } } 清单 4. Android学习资料之使用 CSS 的 JavaScript rotate 函数 2 这个 rotate 函数使用 JavaScript 来更改应用到名为 formSection 的 div 的 CSS。（注意：您正在将 $() 用作 document.getElementById() 的一个别名。）要旋转这个 div，将它的 -webkit-transform 样式设置为 rotateZ(-5deg)，将其逆时针旋转 5 度。接下来，将 -webkit-transform 样式设置为 -webkit-transform 2s ease-in-out。这使旋转耗时两秒钟，缓慢启动，加速，然后在最后再次减速。在 图 3 中，左边显示 Whats your name? 字段旋转之前的初始位置；右边显示该字段部分旋转后的视觉效果及其 Undo 按钮。 Android学习资料 3 图 3. 旋转 HTML 元素 Android学习资料 4 参见 参考资料 中的链接查看这个效果在 Chrome、Safari 4 和 Opera 等兼容 HTML 5 的浏览器上的实际运行情况。 现在我们转到 图 2 中的页面的下半部分。这里您看到几个有趣的图像、文本效果以及布局示例。清单 5 显示了相关代码。 Android学习资料 5 !DOCTYPE html html head style type=text/css h2 { -webkit-text-fill-color: blue; -webkit-text-stroke-color: yellow; -webkit-text-stroke-width: 1.5px; background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000)); -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left 清单 5. Android学习资料之图 2 的下半部分代码 6 bottom, from(transparent), color-stop(0.5, transparent), to(white)); } h3{ color: rgba(0,0,255,0.75); background: rgba(255,255,0,0.5); } .xyz{ text-shadow: #6374AB 4px -4px 2px; white-space: nowrap; width: 14em; height: 2em; overflow: hidden; text-overflow: ellipsis; bo