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