用动画（animation）做弹力球

animation-name:动画的名字(如ball) animation-duration动画的时间 animation-time-function动画的速度曲线 animation-iteration-count动画播放的次数 animation-deretion:设置动画播放顺序，默认为normal,reverse为反向alternate一正一反

alternate-reverse一反一正

animation-fill-mode动画播放模式，forwards(播放停止在100%的地方),给了循环看不见，backwards(忽略原始状态，直接从0%开始，没有原始到0%的过程)

animation-play-state设置动画运动状态是否暂停或继续，一般不在原本属性写，可以用如 ul:hover li这样用，running(默认)paused(暂停)

@keyframes ball{

0%{}

25%{}

50%{}

100%{}

ul{
    width: 600px;
    height: 500px;
    margin: 50px auto;
    border: 1px solid #000;
}
ul li{
    position: relative;
    float: left;
    width: 100px;
    height: 500px;
    margin-right: 100px;
    background-color: #ccc;
}
ul li:before{
    display: block;
    content: "";
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background-color: pink;
    border-radius: 50%;
    animation: ball 1s infinite
}
ul li:nth-child(2):before,ul li:nth-child(2):after{
    animation-delay: .2s;
}
ul li:nth-child(3):beforeul li:nth-child(3):after{
    animation-delay: .5s;
}
ul li:after{
    position: absolute;
    display: block;
    content: "";
    width: 30px;
    height: 10px;
    top: 250px;
    left:0;
    right: 0;
    margin: 0 auto;
    background-color:#000;
    opacity: .5;
    border-radius: 50%;
    animation: box1 1s infinite
}
@keyframes ball{
    0%{
        margin-top: 0;
    }
    50%{
        margin-top: 205px;
    }
    100%{
        margin-top: 0;
    }
}
@keyframes box1{
    50%{
        opacity:1;
        height: 20px;
        width: 50px;
    }
}
</style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

}

用动画（animation）做弹力球

猜你喜欢