#test:hover #tri{-webkit-animation:name 1s}//name随便取 时间随便 前边要加上浏览器引擎
-webkit- google 等
-o-opera 等
-moz-firefox 等
-ms- IE 等 ie>=10
动画如下:也要加上对应的浏览器引擎例:
@-webkit-keyframes name{ from { perspective(800px) rotateX(0deg)} to { perspective(800px) rotateX(180deg)} }
//加上 perspective 才具有3D效果
Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持（IE11又支持，不过很好的一点是在ie中给a加disabled 点击事件自动无效。），Opera在SVG中支持。 但是 该属性HTML中 不支持
1、提交页面，提交按钮点击后，添加这个样式属性（style="pointer-events"），来防止重复提交
2、让链接不能点击
3、让鼠标点击穿透上方的 div
像这种效果，你要想知道，
已经下载下来，你拆开看一下就知道了。
说说原理，这里并不是纯css3，，只是用css3定义好动画，
@-moz-keyframes tips {
0% {box-shadow: 0px 0px 0px #f00}
25% {box-shadow: 0px 0px 8px #f00}
50% {box-shadow: 0px 0px 0px #f00}
100% {box-shadow: 0px 0px 8px #f00}
}
然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。
.tips {
-webkit-animation:tips 1s
-moz-animation:tips 1s
}
当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。
