<!–PC端我们现在也使用这些新增加的语义化标签来实现我们的布局,但是在IE6~8中不兼容:引入HTML5.js实现兼容处理–>
#div1:hover {
/*top: -200px;*/
/*-webkit-transform: translate(0, -200px);
transform: translate(0, -200px);*/
/*我们对于这些变换的效果最好使用-webkit-transform，因为这个属性开启了浏览器的硬件加速效果，实现的动画性能比使用具体的样式流畅一些*/
/*-webkit-transform: scale(2) rotate(45deg) skew(45deg);
transform: scale(2) rotate(45deg) skew(45deg);*/
/*-webkit-transform不是动画，它只是一个变形效果，不设置动画，立马变形到指定的样式，加上动画后才能有对应的过渡效果*/
}
/*使用媒体查询触发动画*/
@media screen and (min-width: 320px) {
}
@media all and (orientation: landscape) {
#div1 {
background: #FFCC66;
}
}