html 动画

博客主要介绍了CSS3动画的相关属性,包括动画名称、时间、方式、延迟时间、次数、方向等,还给出了动画属性在样式中的使用示例,最后提到了热气球例子。

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

/*

        name duration timing-function delay iteration-count direction fill-mode;

        name:动画名称

        duration:动画时间

        timing-function:动画方式

        ● linear:动画从头到尾的速度是相同的。

        ● ease:默认。动画以低速开始,然后加快,在结束前变慢

        ● ease-in:动画以低速开始。

        ● ease-out:动画以低速结束。

        ● ease-in-out:动画以低速开始和结束。

        delay:延迟时间

        iteration-count:次数

        direction:方向



 

        */

        .box{

            width: 100px;

            height: 100px;

            background-color: blue;

            animation: name duration timing-function delay iteration-count direction fill-mode;

        }

        /*定义动画*/

        @keyframes identifier {

            0% {

            }

        }

       热气球例子

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .outer {
            width: 100%;
            height: 300px;
            background-color: skyblue;
            position: relative;
        }

        .outer img {    
            position: absolute; 

            left: 200px;
            top: 50px;

            animation: ball 15s infinite linear alternate;
        }

        
        @keyframes ball {

            0% {
                left: 20%;
                top: 10px;
                transform: rotate(0deg);
            }

            55% {
                left: 65%;
                top: 100px;
                transform: rotate(-30deg);
            }

            100% {
                left: 88%;
                top: 10px;
                transform: rotate(0deg);
            }
        }
    </style>
</head>

<body>
    <div class="outer">
        <img src="./images/ball.png" alt="">
    </div>
</body>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值