CSS动画：梦幻西游

已于 2022-03-15 17:16:13 修改
阅读量658 收藏 2
点赞数
分类专栏： CSS 文章标签： 动画 css3
于 2022-03-15 17:11:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sonichty/article/details/123507208
版权

我在抖音[亿以网络]的第二节网课！

梦幻西游官网改了，素材没有了，搬运：css3仿梦幻西游场景动画特效

<html>
<head>
<title>梦幻西游</title>
<style>
body {
	background: url("bg.jpg");
	animation: bg 50s linear infinite;	
}

@keyframes bg {
	  0% { background-position-x: 0px; }
	100% { background-position-x: 1920px; }
}

.footer {
	width: 760px;
	height: 240px;
	margin: 300px auto;
}

.role {
	float: left;
	width: 190px;
	height: 240px;	
	background-repeat: no-repeat;
	background-position-y: center;
}

.role1 {
	background-image: url("west_01.png");
	animation: role1 1.4s steps(8) infinite;
}

@keyframes role1 {
	  0% { background-position-x: 0px; }
	100% { background-position-x: -1600px; }
}

.role2 {
	background-image: url("west_02.png");
	animation: role1 1.4s steps(8) infinite;
}

@keyframes role2 {
	  0% { background-position-x: 0px; }
	100% { background-position-x: -1600px; }
}

.role3 {
	background-image: url("west_03.png");
	animation: role3 1.4s steps(8) infinite;
}

@keyframes role3 {
	  0% { background-position-x: 0px; }
	100% { background-position-x: -1360px; }
}

.role4 {
	background-image: url("west_04.png");
	animation: role4 1.4s steps(8) infinite;
}

@keyframes role4 {
	  0% { background-position-x: 0px; }
	100% { background-position-x: -1680px; }
}
</style>
</head>
<body>
<div class="footer">
	<div class="role role1"></div>
	<div class="role role2"></div>
	<div class="role role3"></div>
	<div class="role role4"></div>
</div>
</body>
</html>

海天鹰
关注
专栏目录
css3仿梦幻西游场景动画特效
06-28
本资源为全动画西游记页面 师徒四人一直走路 背景随之变换 欢迎下载
css梦幻西游动画
桃桃雾的博客
11-11 226
总结:通过css中的animation把背景图片进行过渡一下,在将每一个演员进行animation过渡一下即可!写的不太好 有什么不会的可以私信哦。
css动画animation--梦幻西游
刘鹏的个人博客
08-07 751
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html, body, .main { height: 100%; ...
实战：利用CSS动画制作一个梦幻西游动态页面
hualidezhen的博客
04-30 469
梦幻西游动态页面 之前讲了CSS的动画，我们看到了利用好了CSS动画能够大大加强页面的渲染效果，完成一些比较高级的页面制作，我们这次就制作一个梦幻西游动态页面(就是一个简单的动态效果的页面，并不是大家想象中的游戏页面) 打开游览器的效果图如下： ...
animate.css 梦幻西游动画
qq_43606728的博客
11-06 313
#技术栈 ps、html5、css3、animate.css #源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>梦幻西游</title> <link rel="stylesheet" href="../common....
css3仿梦幻西游场景动画特效源码.zip
10-31
《CSS3实现梦幻西游场景动画特效解析》 在当今的网页设计领域，CSS3（Cascading Style Sheets Level 3）已经成为了不可或缺的一部分，它提供了丰富的样式控制和动画效果，使得网页更具交互性和视觉吸引力。本篇将...
用html和css制作师徒四人西天取经动画（提供源码+素材）
最新发布
11-01
这个项目不仅涵盖了基础的HTML布局和CSS样式设置，还涉及到CSS动画和过渡效果，使得网页元素能够按照预设路径动起来，为用户提供更为生动的视觉体验。 首先，HTML（HyperText Markup Language）是网页的基础结构...
CSS3西游记西天取经场景动画特效
06-24
在这款“CSS3西游记西天取经场景动画特效”中，开发者利用CSS3的animation属性，精心打造了一个梦幻般的西游记故事场景，让网页元素动态呈现师徒四人西天取经的精彩过程。 首先，让我们了解一下CSS3的animation属性...
jQuery仿梦幻西游鼠标指针光标移动特效.zip
09-22
总结来说，这个“仿梦幻西游鼠标指针光标移动特效”通过jQuery的事件处理和动画功能，结合CSS自定义光标，实现了独特的用户体验。开发者可以根据自己的需求进行二次修改，比如调整光标的形状、动画速度或者添加更...
css梦幻西游
m0_47489304的博客
08-09 204
Document ...
CSS3西游记西天取经场景动画特效特效代码
03-20
CSS3西游记西天取经场景动画特效是一款css3 animation动画属性制作的梦幻西游师徒四人取经场景动画特效。
css轻松写出梦幻西游动画效果
weixin_42372852的博客
08-10 717
css轻松写出梦幻西游动画效果 1. 首先准备需要用到的素材 2. 书写HTML结构 <body> <div class="houzi"></div> <div class="bajie"></div> <div class="tanshen"></div> <div class="shashen"></div> </body> 3.添加背景图片 <sty
HTML+CSS梦幻西游动画
qq_51625706的博客
01-03 285
HTML+CSS动画制作
梦幻西游动画效果展示
Y1916326465的博客
08-07 607
展示如下图动画效果： 实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>梦幻西游</title> <style type="text/css"> ...
用css做一个梦幻西游动画特效
lsxlyy的博客
04-01 166
代码如下所示，具体尺寸可参考 https://www.17sucai.com/pins/29693.html 梦幻西游 <!-- 人的容器 --> <div class="wrap"> <!-- 悟空的容器 --> <div class="wk"> <div> </div> </div>
css和html实现梦幻西游页面特效
Deng872347348的博客
02-21 862
css和html实现梦幻西游页面特效 如下： 我们要准备开发环境,viscode ,图片。 准备好了后面，我们就要开始了： 先在body里面写上我们要的结构主体： <div class="footer"> <div class="west west1">1</div> <div class="west west2">2</div> <div class="west west3">3
CSS实例——梦幻西游
shbk_的博客
01-30 163
animation动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
html5+css 西游动画
Ricardo的博客
04-14 3064
效果图 过程中使用到的图片 css3动画: 会动的画 从什么状态到什么状态的过程 需要动画序列规定这个动画->@keyframes from起始位置 to结束位置 /*动画序列 自定义名称*/ @keyframes swk{ from{ background-position-x:0px; } to{ background-posi...
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5805
再看代码： JS部分。
CSS动画入门：原理与实战详解
CSS动画指南：原理和实战（一） 该文章深入探讨了CSS动画的核心原理和实践应用，强调了动画作为一种普遍的技术手段，不论传统手绘还是数字生成，不论是Flash还是现代的CSS3技术，其基础的动画设计原则始终如一。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值