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

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>

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

HTML+CSS大话西游动画、过渡作业相关推荐

html 动画过度转换的用法,css（动画，过渡，转换）
@keyframes 规定动画,必须定义动画的名称,动画时长的百分比,一个或多个css样式属性以百分比来规定改变发生的时间,或者通过关键词"from"和"to" ...
1.CSS3 教程-＞多列布局＞ image模块＞ cssTransition 过渡＞ CSS Animations 动画＞ Transform二维
CSS3 教程多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维介绍 CSS3 是层叠样式表(Cascading Style S ...
html+css+动画过渡做遮罩层
html+css+动画过渡做的遮罩层这个最重要的是css样式,首先先看看html架构吧: 两个div不用多讲,上就对了: <div id="mask_layer">天 ...
【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位
目标了解掌握CSS值和单位了解掌握CSS文字排版了解掌握CSS变换,过渡,动画了解掌握CSS定位 CSS的值和单位 https://developer.mozilla.org/zh-CN/do ...
css 悬停动画_CSS3缩放图像动画效果悬停
css 悬停动画 Today we will look into CSS3 Zoom Image animation effect with mouse on hover. With images b ...
玩转Bootstrap（JS插件篇）-第1章模态弹出框 :1-2 动画过渡
动画过渡(Transitions) 这一小节我们先来讲"动画过渡(Transitions)"这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件 ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
CSS3的transform:scale()可以实现按比例放大或者缩小功能. CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对 ...
DIV布局——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业静态网页
HTML5期末大作业:化妆品商城网站设计--化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业静态网页文章目录 HTML5期末大作业:化妆品商城网站设计--化妆品 ...

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

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

HTML+CSS大话西游动画、过渡作业相关推荐

最新文章

热门文章