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>
大概效果是這樣，有點傻傻的！把變大和旋轉的屬性删掉就跟和唐僧差不多了。這裡圖檔展示不了動畫效果，有興趣可以直接用一下試試效果，更多動畫效果，百度有很多。