Html--动画--西游记

效果：

素材：
百度云链接：链接：https://pan.baidu.com/s/1O523Ul9VmsoLEWOz0eEqfA
提取码：l47o
代码展示：
`

<html><head><EMBED src="C:\Users\Administrator\Desktop\6.mp3" autostart="true" loop="true" width="0" height="0"><meta charset='UTF-8'><title>西游记</title><meta name='Keywords' content=''><meta name='Description' content=''><style type="text/css">body{margin: 0px;background-image: url('images/bg.jpg');animation: body 1200s infinite;}.list{width: 800px;height: 150px;margin: auto;margin-top: 400px;}.list div{float :left;width: 190px;height: 150px;}.list .list-1{/* 后代选择器 */background-image: url('images/1.png');animation: run 1s steps(8) infinite;z-index: 1;}.list .list-2{/* 后代选择器 */background-image: url('images/2.png');animation: run 1s steps(8) infinite;z-index: 1;}.list .list-3{/* 后代选择器 */background-image: url('images/3.png');animation: list-3 1s steps(8) infinite;z-index: 1;}.list .list-4{/* 后代选择器 */background-image: url('images/4.png');animation: list-4 1s steps(8) infinite;z-index: 1;}@keyframes body{from{background-position: 0 0;}to{background-position: 108000px 0;}}@keyframes list-3{from{background-position: 0 0;}to{background-position: -1360px 0;}}@keyframes list-4{from{background-position: 0 0;}to{background-position: -1680px 0;}}@keyframes run{from{background-position: 0 0;}to{background-position: -1600px 0;}}</style></head>
<body><div class='list'><div class='list-1'></div><div class='list-2'></div><div class='list-3'></div><div class='list-4'></div></div></body>
</html>

需要把下载的都放到桌面上，然后把音乐路径改了。

Html--动画--西游记相关推荐

css动画西游记行走
animationName:表示动画的名称: from:定义动画的开头,相当于 0%: percentage:定义动画的各个阶段,为百分比值,可以添加多个: to:定义动画的结尾,相当于 100%: ...
用CSS写动画--西游记案例
我感觉这是我听过最好的前端课了,真是爱上了这个老师. 不BB了,下边我要用css来实现动画,敲了俩遍代码算是搞得清楚了,有注释,大家有不懂得地儿可以评论. 先给大家看一下效果图(PS:其实是动图的) ...
一篇文带你使用CSS3做出西游记动画
"白龙马蹄朝西,驮着唐三藏跟着仨徒弟-".前段时间学了css3的动画,那么我就跟风做一个唐僧四徒取经,也就那回事吧西游记这个页面主要用到了css3的动画制作,backg ...
CSS3西游记师徒取经场景动画
介绍西游记师徒取经场景动画,师徒四人西天取经行走动画代码. 下载链接 http://www.bytepan.com/vPEC680YYXq 图片
西游记西天取经场景小动画
西游记西天取经场景 img提取提取码:xyqj css样式 * {padding: 0;margin: 0;list-style: none;}html,body {height: 100%;}.m ...
CSS的动画案例——西游记动画
1.思路: (1)先制作出背景图,并且给背景图设置向后运动的动画. (2)在分别将师徒四个的图片放在相应的位置,并且给图片设置相应的宽高. (3)在给师徒四个的图片设置动画.让他们走动起来. 2.制作 ...
HTML动画部分——项目西游记动画
一. 项目需求一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡. 动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小.数量.百分比和颜色. 二.代码部分 <!DOCTY ...
动画的应用，西游记动画效果
实现背景向后移动以及人物走路的动画效果. 实现代码如下: <!DOCTYPE html> <html lang="en"> <head>< ...
web前端动画_西游记
本文问web前端基础知识点,重点是动画模块代码,感谢潭州课堂免费公开课. 使用语言:html.css 使用软件:editplus3 ,(txt文本也可以,改后缀 txt 为 html) 素材提取:(包 ...
用css制作西游记师徒四人小动画
师徒四人小动画看看效果我们的目标是让师徒四人做出走路的动作,并让背景从左往右移动. 让画面看起来是师徒四人向前走的效果. 前期准备我们先把背景,还有师徒四人走路的每一帧图片添加到工作区中并给背 ...

Html--动画--西游记

Html--动画--西游记相关推荐

最新文章

热门文章