html 动画

最新推荐文章于 2023-07-18 08:54:09 发布

原创最新推荐文章于 2023-07-18 08:54:09 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #动画 #css3

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

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>