HTML+CSS大话西游动画、过渡作业

最新推荐文章于 2023-11-13 17:08:55 发布

纷纷为我

最新推荐文章于 2023-11-13 17:08:55 发布

阅读量596

点赞数

分类专栏： html+css 文章标签： css html

本文链接：https://blog.csdn.net/qq_42553140/article/details/108582629

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML+CSS大话西游动画、过渡

首先，我是为了拿到我博客地址才发的，哈哈哈！！！
这个用html和css做的动画效果肯定没这么好
先说一下动画的实现核心，其实就是四张图片，每张图片里面的人物都有四个不一样的动作，利用css样式使用图片，展示成四组动作不一的图片，意思就是一张800px×200px的图片，我切割成四组200px×200px的图片。
剩下的就是讨论该如何完成这些事情了
首先就是在body里面放5个div分别用来存放
背景图、悟空图片、八戒图片、唐僧图片、沙僧图片，由于我最讨厌起名字，就只能给他们class类名起一些通俗易懂的名字，如下图：

<body>
    <div class="one"></div>
    <div class="wk"></div>
    <div class="bj"></div>
    <div class="ts"></div>
    <div class="ss"></div>
</body>

接下来就说一下css的核心样式：

用@keyframes wkbj{}写动画，wkbj是动画的名字，我的悟空和八戒人物都用的这个动画，所以随便起了一个名字，from{}动画初始的状态，我里面写了两个transform: scaleX(1);就是大小是原来一倍的意思，transform: rotateZ(0deg);Z轴从0°开始，接下来10% 20%…的意思就是动画执行的时间百分占比，这里也用到一些过渡，我后来觉得好玩添加上去的，剩下的其他几个动画，应该也差不多，四个人物用不同动画的原因是因为，他们四张图片有一点差别，所以有些不能够一起用，就多写了两个动画，分别对应不同图片大小比例来使用。
to{}结束时候里面都有一个属性就是background-position: 1600px;意思就是结束的时候，跟一个图片的总长度，为了后面使用动画的时候切割使用。

@keyframes wkbj {
            from {
                transform: scaleX(1);
                transform: rotateZ(0deg);


            }

            10% {
                transform: scale(1.1);
                transform: rotateZ(20deg);


            }

            20% {
                transform: scale(1.2);
                transform: rotateZ(40deg);


            }

            30% {
                transform: scale(1.3);
                transform: rotateZ(60deg);


            }

            40% {
                transform: scale(1.4);

            }

            50% {
                transform: scale(1.5);

            }

            60% {
                transform: scale(1.4);

            }

            70% {
                transform: scale(1.3);

            }

            80% {
                transform: scale(1.2);

            }

            90% {
                transform: scale(1.1);

            }


            to {
                background-position: 1600px;
                transform: scale(1);
                transform: rotateZ(180deg);


            }
        }

        @keyframes ts {

            to {
                background-position: 1360px;
            }
        }

        @keyframes ss {
            from {
                transform: rotateZ(0deg);

            }

            to {
                background-position: 1680px;
                transform: rotateZ(360deg);

            }
        }

        @keyframes tp {

            to {
                background-position: 1920px;
            }
        }

后面就说一下css样式了
主要说一下动画
就拿wkbj的动画来说把
设置什么宽高背景图片什么的就不说了，
这里有一个 animation的属性
一个速写动画的属性

/* 速写动画，动画名称 执行时间 把图片分成8帧 执行次数（无限次） */
animation: wkbj 1s steps(8) infinite;

infinite就是动画执行无限次，而steps(8)就是之前说的动画执行的核心了，将一张图片分成八份，然后使用过渡动画执行依次切换，然后使这个动画无限执行看上去就像是一个人物再走动啦。背景图片也使用这个就能看上去像是在动，其实背景图片两头是由对称衔接关系的。
后面是我使用的背景图片以及个个人物的图片
设置背景图片的时候注意图片位置。
请添加图片描述

后面就是整个代码了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大话西游</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .one {
            width: 1920px;
            /* height: 965px; */
            height: 100vh;
            background-size: 100% 100%;
            /* background-size: cover; */
            background-image: url(../../images/background.jpg);
            float: left;
            z-index: 1;
            animation: tp 35s steps(1000) infinite;
            /* transition: all 2s; */
        }

        .wk {
            /* 脱离文档定位优先级 */
            z-index: 10;
            width: 200px;
            height: 180px;
            background-image: url(../../images/wk.png);
            position: fixed;
            float: left;
            top: 470px;
            left: 460px;
            /* 速写动画，动画名称 执行时间 把图片分成8帧 执行次数（无限次） */
            animation: wkbj 1s steps(8) infinite;
            /* 反转执行动画 */
            animation-direction: reverse;

        }

        .bj {
            z-index: 10;
            width: 200px;
            height: 180px;
            background-image: url(../../images/bj.png);
            position: fixed;
            float: left;
            top: 470px;
            left: 680px;
            /* 速写动画，动画名称 执行时间 把图片分成8帧 执行次数（无限次） */
            animation: wkbj 1s steps(8) infinite;
            animation-direction: reverse;


        }

        .ts {
            z-index: 10;
            width: 170px;
            height: 240px;
            background-image: url(../../images/ts.png);
            position: fixed;
            float: left;
            top: 435px;
            left: 880px;
            /* 速写动画，动画名称 执行时间 把图片分成8帧 执行次数（无限次） */
            animation: ts 1s steps(8) infinite;
            animation-direction: reverse;
        }

        .ss {
            z-index: 10;
            width: 210px;
            height: 200px;
            background-image: url(../../images/ss.png);
            position: fixed;
            float: left;
            top: 470px;
            left: 1100px;
            /* 速写动画，动画名称 执行时间 把图片分成8帧 执行次数（无限次） */
            animation: ss 1s steps(8) infinite;
            animation-direction: reverse;
            /* transition: wkbj 10s linear 10s; */

        }

        @keyframes wkbj {
            from {
                transform: scaleX(1);
                transform: rotateZ(0deg);


            }

            10% {
                transform: scale(1.1);
                transform: rotateZ(20deg);


            }

            20% {
                transform: scale(1.2);
                transform: rotateZ(40deg);


            }

            30% {
                transform: scale(1.3);
                transform: rotateZ(60deg);


            }

            40% {
                transform: scale(1.4);

            }

            50% {
                transform: scale(1.5);

            }

            60% {
                transform: scale(1.4);

            }

            70% {
                transform: scale(1.3);

            }

            80% {
                transform: scale(1.2);

            }

            90% {
                transform: scale(1.1);

            }


            to {
                background-position: 1600px;
                transform: scale(1);
                transform: rotateZ(180deg);


            }
        }

        @keyframes ts {

            to {
                background-position: 1360px;
            }
        }

        @keyframes ss {
            from {
                transform: rotateZ(0deg);

            }

            to {
                background-position: 1680px;
                transform: rotateZ(360deg);

            }
        }

        @keyframes tp {

            to {
                background-position: 1920px;
            }
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="wk"></div>
    <div class="bj"></div>
    <div class="ts"></div>
    <div class="ss"></div>
</body>

</html>

大概效果是这样，有点傻傻的！把变大和旋转的属性删掉就跟和唐僧差不多了。这里图片展示不了动画效果，有兴趣可以直接用一下试试效果，更多动画效果，百度有很多。
在这里插入图片描述

纷纷为我

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS大话西游动画、过渡作业

HTML+CSS大话西游动画、过渡首先，我是为了拿到我博客地址才发的，哈哈哈！！！这个用html和css做的动画效果肯定没这么好先说一下动画的实现核心，其实就是四张图片，每张图片里面的人物都有四个不一样的动作，利用css样式使用图片，展示成四组动作不一的图片，意思就是一张800px×200px的图片，我切割成四组200px×200px的图片。剩下的就是讨论该如何完成这些事情了首先就是在body里面放5个div分别用来存放背景图、悟空图片、八戒图片、唐僧图片、沙僧图片，由于我最讨厌起名字，就只能给
复制链接

扫一扫