css帧动画的使用实例

最新推荐文章于 2025-06-22 16:53:24 发布

包淼淼

最新推荐文章于 2025-06-22 16:53:24 发布

阅读量815

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_32849999/article/details/81063855

css 专栏收录该内容

20 篇文章

订阅专栏

1、demo1

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="2.css">
</head>
<body>
<img src="image/1.jpg" alt="" class="shumen">
</body>
</html>

css代码

.shumen{
    animation: shumen01 1s linear forwards;
}
@keyframes shumen01 {
 0%{
     opacity: 1;
 }
    100%{
        opacity: 0;
    }
}

2、demo2

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="2.css">
</head>
<body>
<div class="shumen"></div>
</body>
</html>

css代码

.shumen{
    width: 640px;
    height: 1200px;
    animation: shumen02 8s linear;
}
@keyframes shumen02 {
    0%{
        background-image: url("image/1.jpg");
    }
    14%{
        background-image: url("image/2.jpg");
    }
    28%{
        background-image: url("image/3.jpg");
    }
    42%{
        background-image: url("image/4.jpg");
    }
    56%{
        background-image: url("image/5.jpg");
    }
    70%{
        background-image: url("image/6.jpg");
    }
    84%{
        background-image: url("image/7.jpg");
    }
    100%{
        background-image: url("image/8.jpg");
    }
}

3、demo3

total.jpg

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="2.css">
</head>
<body>
<div class="shumen"></div>
</body>
</html>

css代码

.shumen{
    width: 640px;
    height: 1136px;
    background-image: url("image/total.jpg");
    animation: shumen03 5s step-start infinite;
}
@keyframes shumen03 {
    0%{

        background-position: 4480px 0;
    }
    14%{
        background-position: 3840px 0;
    }
    28%{
        background-position: 3200px 0;
    }
    42%{
        background-position:  2560px 0;
    }
    56%{
        background-position: 1920px 0;
    }
    70%{
        background-position: 1280px 0;
    }
    84%{
        background-position: 640px 0;
    }
    100%{
        background-position: 0 0;
    }
}