使用纯CSS代码模拟实现小球自由落体效果:
html代码如下:
CSS样式代码:
/*ball样式*/
#ballDiv{ height:400px; background-color:#333333;}
#ball{ width:100px; height:100px; border-radius:50%; background:-webkit-radial-gradient(center center,circle,#fff,blue); box-shadow:3px 7px 8px #ccc; -webkit-animation:ball 5s cubic-bezier(0.0,0.25,0.50,1.0); -webkit-transform:translate(250px, 300px);}
@-webkit-keyframes ball
{
0%{-webkit-transform:translate(0, 0);}
10%{-webkit-transform:translate(0, 330px); height:70px;}
20%{-webkit-transform:translate(50px, 50px); height:100px;}
30%{-webkit-transform:translate(50px, 330px); height:70px;}
40%{-webkit-transform:translate(100px, 100px); height:100px;}
50%{-webkit-transform:translate(100px, 320px); height:80px;}
60%{-webkit-transform:translate(150px, 150px); height:100px;}
70%{-webkit-transform:translate(150px, 320px); height:80px;}
80%{-webkit-transform:translate(200px, 200px); height:100px;}
90%{-webkit-transform:translate(200px, 300px); height:100px;}
100%{-webkit-transform:translate(250px, 300px); height:100px;}
}
jQuery插件css3动画模拟confirm弹窗
相比浏览器自带的alert.confirm,能力所及,我更喜欢所有的东西都是自定义:首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js.