Html--动画--西游记

最新推荐文章于 2024-02-15 09:15:57 发布
最新推荐文章于 2024-02-15 09:15:57 发布
阅读量781 收藏 4
点赞数 3
分类专栏： —— 前台--Html--动画 文章标签： 动画 Html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41293896/article/details/86513484
版权

效果：
在这里插入图片描述
素材：
百度云链接：链接：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>

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

zzzzzzzzzzzw___
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
西游记.txt-数据集
04-02
西游记.txt-数据集
CSS3西游记西天取经场景动画特效.zip
07-04
CSS3西游记西天取经场景动画特效是一款css3 animation动画属性制作的梦幻西游师徒四人取经场景动画特效。
用HTML5实现动画
最新发布
cnds123的专栏
02-15 3611
要在HTML5中实现动画，可以使用以下几种方法：CSS动画、使用元素和JavaScript来实现动画、使用JavaScript动画库。
web前端动画_西游记-附件资源
03-05
web前端动画_西游记-附件资源
Html--动画--西游记-附件资源
03-05
Html--动画--西游记-附件资源
制作一个简单HTML个人网页网页（HTML+CSS）大话西游之大圣娶亲电影网页设计
专注于dreamweaver网页设计制作
08-07 241
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
HTML中的动画效果
热门推荐
SuwanH的博客
08-17 3万+
一、HTML中的动画 在HTML中也可根据个人要求添加动画，有过渡动画transition和生动的动画效果animation以及线上的动画库 二、过渡动画transition transition是一种提供了在更改CSS属性时控制动画速度的方法，其可以让属性变化成为一个持续一段时间的过程 为页面创建一个div，为其设置背景颜色等属性 页面预览： 当鼠标悬停时，改变大小，之后在加上过渡动画效果 页面预览：当鼠标放在div上时，div向右移动，宽度改变，颜色改变 属性： tr.
html-动画效果
m0_73890636的博客
09-25 1327
可以通过修改translateX来改变旋转的方向 translateY则绕着Y轴旋转。鼠标点到对于按钮会改变颜色（字体和背景）以及按钮的形状，鼠标的样式。修改一部分代码即可（去掉title函数里面的方框）不同的百分号比例对旋转速度所占比有影响。能在设置的框内运动且会随着运动切换颜色。infinite无限循环。
前端学习（167）:定位美化上传
歌谣的博客
12-21 272
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
用html和css制作师徒四人西天取经动画（提供源码+素材）点赞加关注，经典案例持续更新~
小十七的个人分享博客
11-01 339
用html和css制作师徒四人西天取经动画，提供源码和素材
HTML中的过渡和动画
l12345666777的博客
11-01 1547
animation-iteration-count 设置动画迭代次数 number infinite(无限循环)需要告诉系统哪一个元素需要动画 动画持续时间。transition-timing-function 设置过渡速度曲线。animation-timing-function 设置动画速度曲线。animation-duration 设置动画持续时间。transition-duration 设置过渡持续时间。animation-delay 设置动画等待时长。animation-name 设置动画名称。
用css的动画制作——西游记人物运动起来
木落
08-02 558
1、效果图 2、部分源代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <!-- <link type="text/css" rel="stylesheet" href="https://www.cnblogs.com/a-cat/custom.css?v=9bZGlGHQBwod7ANb++Ag1WzrOc0="> --> <style type="text/css"> bo
web前端网页制作课作业：用DIV+CSS技术设计的静态网站【四大名著】中国传统文化主题题材设计
专注于dreamweaver网页设计制作
01-09 262
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒
用CSS写动画--西游记案例
渣渣的成长之路
03-31 1481
我感觉这是我听过最好的前端课了，真是爱上了这个老师。 不BB了，下边我要用css来实现动画，敲了俩遍代码算是搞得清楚了，有注释，大家有不懂得地儿可以评论。 先给大家看一下效果图（PS：其实是动图的） 首先，看一下项目的结构： 用到的一些图片如下： html代码如下： <!DOCTYPE html> <html> &lt...
一篇文带你使用CSS3做出西游记动画
?sonder* 的博客
12-22 982
  “白龙马蹄朝西，驮着唐三藏跟着仨徒弟…”，这首歌肯定可多人都听过，毕竟之前这首歌被一个小男孩唱火过一段时间。前一段时间学了css3的动画，那么我就跟风做一个唐僧四徒取经那回事吧！！！（其实是学了css之后，学姐给我发的实例，然后我就模仿着做了一个 ） 西游记   这个页面主要用到了css3的动画制作，background-position的使用与steps属性，好了废话不多说，先来看一下效果吧...
HTML动画
qq_42765662的博客
07-14 4044
css动画相关的实现
html 简单动画效果,HTML-简单动画
weixin_35356909的博客
06-03 2237
简单动画(1)简单动画通常称之为“过渡transition”transition-property：需要过渡的属性，但是并非所有的属性都支持过渡。transition-duration：过渡的时间；简写：transition：all 时间；(2)渐变时间函数transition-timing-function——css属性以何种速度进行渐变贝塞尔曲线的预设值：ease：渐快，匀速，减慢(cubic...
html里面的好看的动画效果
xcLeigh
05-14 7194
html里面的好看的动画效果动画介绍动画效果1 - 平移动画效果2 - 抖动 动画介绍 html里面的好看的动画效果，包括基本的平移，旋转，抖动，变色等动画效果，可以直接嵌入代码使用； 元素属性介绍 1.位置 ：位移 translate（x，y）； 2.大小 ：缩放 scale（xx px）； 3.状态：旋转 rotate（xx deg）； 4.形态：skew（xx deg）； 转化属性 css转化属性 transform : none 不转换/ transform-function;转化函数 如 tra
使用v-for 展示四大名著
05-25
books: ['《红楼梦》', '《西游记》', '《水浒传》', '《三国演义》'] } }) ``` 在上面的代码中，我们使用了 v-for 指令来循环遍历 books 数组，并将每个元素的值赋给变量 book。然后在模板中使用 {{ book }} 将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值