CSS3:过渡动画及关键帧动画-案例二:小球的下落

本文通过一个小球下落的实例介绍了CSS3中关键帧动画的使用方法。通过定义动画序列,实现小球周期性地从起始位置移动到指定位置再返回的效果,并通过调整延迟时间使多个小球依次动画。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

二、关键帧动画
本文大致介绍了CSS3中的技术之一:动画,因为我也是学习者,这只是我自己的观点,如有错误,请指出。废话不多说,开始步入正题:
本文承接上文:上一篇博客仅仅介绍了动画过渡的案例,下面讲解关键帧动画的案例:小球的下落
废话不多说,先上效果:
在这里插入图片描述
在这里插入图片描述

由于视频不好长传,无法给大家展示动态效果,这里我就讲述一下,图中小球会有顺序的往下掉落周而复始,因为里面也会写到其他的小样式,所以如果有看不懂的可以在评论区评论或者私我

<style>
        body {
            background-color: #403830;
        }
        
        ul {
            margin: 300px 500px;
            width: 500px;
            height: 300px;
            border: 1px solid black;
            /*盒子阴影*/
            box-shadow: 0px 0px 17px 8px black;
            float: left;
            list-style: none;
            /*设置弹性容器*/
            display: flex;
            flex-flow: row nowrap;
        }
        
        li {
            width: 50px;
            height: 50px;
            margin: 125px auto;
            line-height: 50px;
            /*设置小圆球*/
            border-radius: 50%;
            text-align: center;
        }
        /*写剧本*/
        @keyframes b {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(120px);
            }
            75% {
                transform: translateY(-120px);
            }
            100% {
                transform: translateY(0px);
            }
        }
        
        li:nth-of-type(1) {
            background-color: red;
            /*调用剧本 名称 运行时间 运行方式(匀速) 运行次数(无限次)*/
            animation: b 3s linear infinite;
        }
        
        li:nth-of-type(2) {
            background-color: #FF7633;
             /*调用剧本*/
            animation: b 3s 0.2s linear infinite;
        }
        
        li:nth-of-type(3) {
            background-color: #FFAB84;
             /*调用剧本*/
            animation: b 3s 0.3s linear infinite;
        }
        
        li:nth-of-type(4) {
            background-color: white;
             /*调用剧本*/
            animation: b 3s 0.4s linear infinite;
        }
        
        li:nth-of-type(5) {
            background-color: #91CBD2;
             /*调用剧本*/
            animation: b 3s 0.5s linear infinite;
        }
        
        li:nth-of-type(6) {
            background-color: #4CB4BF;
             /*调用剧本*/
            animation: b 3s 0.6s linear infinite;
        }
        
        li:nth-of-type(7) {
            background-color: #0694A4;
             /*调用剧本*/
            animation: b 3s 0.7s linear infinite;
        }
    </style>
    
    <body>
    <ul>
        <li>l</li>
        <li>o</li>
        <li>a</li>
        <li>d</li>
        <li>i</li>
        <li>n</li>
        <li>g</li>
    </ul>
</body>

大家对样式或者有疑问的可以提出来,我会及时解答或更正,谢谢大家!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值