首页 >web前端 >css教程 >css动画之小球撞壁反弹效果的实现实例

css动画之小球撞壁反弹效果的实现实例

黄舟
黄舟原创
2017-09-29 10:39:073824浏览

小球碰到一面壁之后一般都会反弹,反射角=入射角;

其实用css3来实现这个效果也非常简单。

首先,分解一下小球的运动:水平运动和垂直运动。

当小球往右下方向运动时,如果碰到了下面的壁,那么由于碰撞,小球受到了垂直于墙壁的力(即向上的力),这样的话水平运动是不会受到影响的,只有垂直运动受到了影响。所以在与上下壁碰撞时只需改变上下运动的方向,左右运动不变;以此类推,当小球与左右壁相碰撞时,只需改变水平运动的方向,垂直方向无需改动。

有了这个思路,就可以开始用css3动画来实现这个小球碰撞时反弹了。

1.html:


1 <p id="box">
2       <p id="ball-box">
3            <p id="ball"></p>
4       </p>
5 </p>

2.css:

#box {
    width: 300px;
    height: 150px;
    border: 1px solid #7aa4c0;
}
#ball-box {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    animation: bouncey linear 3s infinite;
    -webkit-animation: bouncey linear 3s infinite;
}
#ball {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: -webkit-radial-gradient(circle, #ddecee, #0377db);
    background: -o-radial-gradient(circle, #ddecee, #0377db); 
    background: -moz-radial-gradient(circle, #ddecee, #0377db); 
    background: radial-gradient(circle, #ddecee, #0377db); 
    animation: bouncex linear 5s infinite;
    -webkit-animation: bouncex linear 3s infinite;
}
@keyframes bouncey
{
    0%,100% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
        }
    50% {
        transform:translateY(130px);
        -webkit-transform:translateY(130px);
        }
}
@keyframes bouncex
{
    0%,100% {
        transform:translateX(0px);
        -webkit-transform:translateX(0px);
        }
    50% {
        transform:translateX(280px);
        -webkit-transform:translateX(280px);
        }
}

css Code

小球的颜色利用css3里面的径向渐变,使小球看起来更加具有立体视觉感受。

以上是css动画之小球撞壁反弹效果的实现实例的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn