梦幻西游动画制作

最新推荐文章于 2020-09-29 20:15:50 发布
最新推荐文章于 2020-09-29 20:15:50 发布
阅读量313 收藏
点赞数
分类专栏： 实习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45044528/article/details/107393088
版权

梦幻西游动画制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梦幻西游</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    html,body,.contanier {
        height: 100%;
    }
    body {
        overflow: hidden;
    }
    .contanier {
        background-image: url('https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/2.jpg');
        width: 3920px;
        margin-left: -1920px;
        animation: bj 20s linear infinite;
    }
    .view {
        height: 200px;
        width: 1000px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin:  auto;
    }
    .view div {
        float: left;
        margin-right: 30px;
        overflow: hidden;
    }
    .wk, .bj {
        height: 180px;
        width: 200px;
    }
    .wk img,
    .bj img {
        animation: wk 1s steps(8) infinite;
    }
    .ts img {
        animation: ts 1s steps(8) infinite;
    }
    .ts {
        height: 240px;
        width: 170px;
        margin-top: -40px;
    }
    .ss {
        height: 200px;
        width: 210px;
        float: left;
    }
    .ss img {
        animation: ss 1s steps(8) infinite;
    }
    @keyframes wk {
        form {
            margin-left: 0;
        }
        to {
            margin-left: -1600px;
        }
    }
    @keyframes bj {
        from {
            margin-left: -1920px;
        }
        to {
            margin-left: 0;
        }
    }
    @keyframes ts {
        from {
            margin-left: 0;
        }
        to {
            margin-left: -1360px;
        }
    }
    @keyframes ss {
        from {
            margin-left:0 ;
        }
        to {
            margin-left: -1680px;
        }
    }
</style>
<body>
    <!-- 背景图片 -->
    <div class="contanier"></div>
    <!-- 视口 -->
    <div class="view">
        <div class="wk">
            <img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_01_3ca39fe.png" alt="">
        </div>
        <div class="bj">
            <img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_02_47bad19.png" alt="">
        </div>
        <div class="ts">
            <img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_03_f962447.png" alt="">
        </div>
        <div class="ss">
            <img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_04_6516d80.png" alt="">
        </div>
    </div>
</body>
</html>

示列网页
注意：本文章依据17素材网所提供素材进行编写！

公冶笑笑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单的动画（梦幻西游）
Bescheidenheit的博客
12-24 268
突然想起来前一段时间老师讲的动画特效，于是尝试自己写下 HTML层： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>梦幻西游</title> <style> *{ ...
利用CSS制作一个梦幻西游小动画
CCCXXXW的博客
04-01 220
如何利用CSS制作一个梦幻西游小动画 代码如下 梦幻西游 /* 背景图的动画 */ @keyframes back_move { from { margin-left: -1920px; } to { margin-left: 0; } } /* 容器样式 */ .wrap { height: 300px; width: 900px; position: absolute; top: 45%; left: 50%; margin-left: -450px; } .wrap &g
day2
weixin_45044528的博客
07-08 117
Day2 1、html 超文本标记语言 浏览器从上往下解析html文件 后缀.html后者.html 2、http协议 请求/响应模式 请求报文 请求头、请求行、请求数据 响应头、响应行、响应体 状态码 200、404、401 3、开发流程 1）本地测试 2）部署 4、html语法结构 1）注释 html中 <!--注释内容--> css中 /*注释内容*/ 2)实体 空格 &nbsp； 3)块级元素
水平 垂直 flex 和 计算方法
weixin_45044528的博客
09-29 126
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /* #out {
jQuery仿梦幻西游鼠标指针光标移动特效.zip
09-22
首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作和Ajax交互。在本实例中，jQuery被用来创建一种与游戏“梦幻西游”类似的鼠标指针移动特效，使用户在浏览网页时感受到更丰富的视觉...
css3仿梦幻西游场景动画特效
06-28
在"css3仿梦幻西游场景动画特效"中，CSS3的核心知识点主要包括： 1. **选择器增强**：CSS3引入了更强大的选择器，如类选择器、ID选择器、属性选择器等，允许更精确地定位元素。例如，我们可以使用`:nth-child()`...
css3仿梦幻西游场景动画特效源码.zip
10-31
《CSS3实现梦幻西游场景动画特效解析》 在当今的网页设计领域，CSS3（Cascading Style Sheets Level 3）已经成为了不可或缺的一部分，它提供了丰富的样式控制和动画效果，使得网页更具交互性和视觉吸引力。本篇将...
用html和css制作师徒四人西天取经动画（提供源码+素材）
11-01
4. **动画与过渡**：`@keyframes`规则定义动画的各个关键帧，`animation`属性应用动画效果。例如，可以创建一个动画让角色沿着特定路径移动，或者变化状态（如孙悟空变金箍棒）。`transition`属性则用于元素在不同...
h5制作个人简历
weixin_45044528的博客
07-08 3103
day2 课后作业 <!-- 个人简历设计 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人简历</title> </head> &l
html table制作课程表
weixin_45044528的博客
07-08 1494
课后作业 table 制作课程表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课程表</title> </head> <body> &
es6中let var const 块级作用域
weixin_45044528的博客
08-18 162
1.let 1.let用来声明变量，与var用法类似，但是用let声明的变量只在所在代码块内有效。 1).let声明变量在for里面最常用，for循环的条件中一般用let声明，不用var声明 原因： var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); };
es6变量的解构赋值
weixin_45044528的博客
08-19 159
变量的解构赋值 解构:es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为结构。 1.数组的解构赋值`` 1)在es5中，为变量赋值: let a = 1 let b = 2 let c = 3 在es6中，可以写成这样: let [a,b,c] = [1,2,3] 模式匹配!等号左边和右边的结构完全一致时，按照先后顺序一一匹配 let [foo,[[bar],baz]] = [1,[[2],3]]; foo //1 ba
day1 杂谈html
weixin_45044528的博客
07-07 106
** 实习day1 ** 1.http协议 http 协议采用了请求/响应模型 请求 请求体、请求头、请求数据 请求数据 let obj = {name:‘tom’,age:23} 请求头 content-type:‘application/json’ 响应 响应体、响应头、响应内容 响应内容 ajac res.data ajios res.data.data 接口所需要的数据格式不同时 json字符串 “{‘name’:‘tom’ , ‘age’ : 23}” 查询字符串 name=tom&age
Day 5 css
weixin_45044528的博客
07-13 103
1、css选择器 1)标签选择器 div {} 2)类名选择器 .one {} 3)id选择器 #one {} 4)通配选择器 * {} 样式初始化 5)逗号选择器 div, .one {} 6)组合选择器 div.one {} 7)子代选择器 div > .one {} 8)后代选择器 div .one {} 9)兄弟选择器 通用兄弟选择器 div ~ .one {} 相邻兄弟选择器
非常领先的分布式数据库Oceanbase OBCP 3.0培训教材
09-05
非常领先的分布式数据库Oceanbase OBCP 3.0培训教材
GCN海面目标检测.zip
09-05
目标检测（Object Detection）是计算机视觉领域的一个核心问题，其主要任务是找出图像中所有感兴趣的目标（物体），并确定它们的类别和位置。以下是对目标检测的详细阐述： 一、基本概念 目标检测的任务是解决“在哪里？是什么？”的问题，即定位出图像中目标的位置并识别出目标的类别。由于各类物体具有不同的外观、形状和姿态，加上成像时光照、遮挡等因素的干扰，目标检测一直是计算机视觉领域最具挑战性的任务之一。 二、核心问题 目标检测涉及以下几个核心问题： 分类问题：判断图像中的目标属于哪个类别。 定位问题：确定目标在图像中的具体位置。 大小问题：目标可能具有不同的大小。 形状问题：目标可能具有不同的形状。 三、算法分类 基于深度学习的目标检测算法主要分为两大类： Two-stage算法：先进行区域生成（Region Proposal），生成有可能包含待检物体的预选框（Region Proposal），再通过卷积神经网络进行样本分类。常见的Two-stage算法包括R-CNN、Fast R-CNN、Faster R-CNN等。 One-stage算法：不用生成区域提议，直接在网络中提取特征来预测物体分类和位置。常见的One-stage算法包括YOLO系列（YOLOv1、YOLOv2、YOLOv3、YOLOv4、YOLOv5等）、SSD和RetinaNet等。 四、算法原理 以YOLO系列为例，YOLO将目标检测视为回归问题，将输入图像一次性划分为多个区域，直接在输出层预测边界框和类别概率。YOLO采用卷积网络来提取特征，使用全连接层来得到预测值。其网络结构通常包含多个卷积层和全连接层，通过卷积层提取图像特征，通过全连接层输出预测结果。 五、应用领域 目标检测技术已经广泛应用于各个领域，为人们的生活带来了极大的便利。以下是一些主要的应用领域： 安全监控：在商场、银行
算法模板，最科学的刷题方式，最快速的刷题路径，你值得拥有~.zip
最新发布
09-05
算法模板，最科学的刷题方式，最快速的刷题路径，你值得拥有~.zip 算法模板，最科学的刷题方式，最快速的刷题路径，一个月从入门到 offer，你值得拥有 算法模板顾名思义就是刷题的套路模板，掌握了刷题模板之后，刷题也变得好玩起来了~
梦幻西游花果山施法动画
08-29
梦幻西游是一款著名的大型多人在线角色扮演游戏，其角色设计和场景丰富多样，其中花果山作为孙悟空的故乡，拥有独特的文化元素。在游戏中的施法动画往往充满了中国古典神话色彩，例如玩家扮演的角色孙悟空施展法术时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值