实战：利用CSS动画制作一个梦幻西游动态页面

梦幻西游动态页面

之前讲了CSS的动画，我们看到了利用好了CSS动画能够大大加强页面的渲染效果，完成一些比较高级的页面制作，我们这次就制作一个梦幻西游动态页面(就是一个简单的动态效果的页面，并不是大家想象中的游戏页面)

打开游览器的效果图如下：

由于动态图片太大了上传不了，可以复制完整代码自行的查看效果

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>梦幻西游</title>
</head>
<style>* {margin: 0px;padding: 0px;}html,body {height: 100%;overflow: hidden;}.back {height:100%;background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/2.jpg);width: 3920px;animation: back_move 30s infinite linear;}/* 背景图的动画 */@keyframes back_move {from {margin-left: -1920px;}to {margin-left: 0px;}}.wrap {height: 300px;width: 1200px;position: absolute;        top: 45%;left: 50%;margin-left: -500px;    }.warp > div {float: left;}/* 孙悟空的窗口 */.wk{width: 200px;height: 180px;overflow: hidden;float: left;}/* 孙悟空的背景图 */.wk div {background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_01_3ca39fe.png);height: 180px;width: 1600px; animation: wk_move 1s infinite steps(8);}@keyframes wk_move {from {margin-left: 0px;}to {margin-left: -1600px;}}/* 八戒的窗口 */.bj{width: 200px;height: 180px;overflow: hidden;float: left;}/* 八戒的背景图 */.bj div {background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_02_47bad19.png);height: 180px;width: 1600px; animation: bj_move 1s infinite steps(8);}@keyframes bj_move {from {margin-left: 0px;}to {margin-left: -1600px;}}/* 唐僧的窗口 */.ts {width: 170px;height: 240px;margin-top: -30px;overflow: hidden;float: left;}.ts div {background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_03_f962447.png);width: 1360px;height: 240px;animation: ts_move 1s infinite steps(8);}@keyframes ts_move {from {margin-left: 0px;}to {margin-left: -1360px;}}/* 沙僧的窗口 */.sc {width: 210px;height: 200px;margin-top: -5px;overflow: hidden;float: left;}.sc div {background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_04_6516d80.png);width: 1680px;height: 200px;animation: cs_move 1s infinite steps(8);}@keyframes cs_move {from {margin-left: 0px;}to {margin-left: -1680px;}}
</style>
<body><!-- 背景图 --><div class="back"></div><!-- 人的容器 --><div class="wrap"><!-- 悟空的窗口 --><div class="wk"><div></div></div><!-- 八戒的窗口 --><div class="bj"><div></div></div><!-- 唐僧的窗口 --><div class="ts"><div></div></div><!-- 沙僧的窗口 --><div class="sc"><div></div></div></div>
</body>
</html>

最后
明天就是五一小长假了，很多学习和公司在这周和五一之后都还得补假期的工作日。所以希望小伙伴们都能又有个愉快的五一长假,玩的开心！(这段期间我应该也不会写博客了，也好好享受一次，嘻嘻）

实战：利用CSS动画制作一个梦幻西游动态页面相关推荐

html登录页面用idea,利用IDEA怎么制作一个登录注册页面
利用IDEA怎么制作一个登录注册页面发布时间:2020-12-19 14:02:09 来源:亿速云阅读:186 作者:Leah 利用IDEA怎么制作一个登录注册页面?很多新手对此不是很清楚,为了帮 ...
利用CSS浮动制作一个简易导航栏
初学CSS,利用CSS浮动和无序列表制作一个简易导航栏: <!DOCTYPE html> <html lang="en"> <head>< ...
利用CSS动画制作 Html 表格数据滚动显示
直接上图看最终实现效果: DataV里有这个效果,看起来高大上,实际自己开发也不难实现.实现的方法很多,下面是本人的一种实现方案,分享给大家. 这个效果需要解决2个问题: 1:首尾的数据衔接: 2:c ...
mysql设计高考倒计时_HTML/CSS+JS制作一个高考倒计时页面
2020-07-09更新修复倒计时归零后出现负数的bug 自动切换至下一年日期效果展示前言在B站上找视频学习的,勉强搞出来了,写下此篇文章作为笔记,也希望有更多感兴趣的人能够有所收获. (萌新 ...
html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
dreamweaver php 动态教程,利用DreamweaverCS5制作一个含有动态标题的教程
做一个网页就先要做一个标题,一个好标题会让网页让人印象深刻,有动态的标题会让网页更生动,下面我就介绍一下怎么制作一个含有动态的标题. 1.双击DreamweaverCS5软件快捷键,打开Dreamwe ...
利用css 动画实现节流
节流指的避免过于频繁的执行一个函数,例如:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,不然会频繁的请求接口,之前基本上是通过js去控制节流问题,其实css也能做到节流 ...
动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...
html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...
利用51单片机制作一个秒表的详细过程
利用51单片机制作一个秒表的详细过程前面的话: 和很多朋友一样,在学51单片机的过程中我们肯定会涉及到制作一个秒表,牵涉到把单片机的多个部分组合起来使用,这对于我们初学者来说可能显得有些困难,我同大 ...

实战：利用CSS动画制作一个梦幻西游动态页面

梦幻西游动态页面

实战：利用CSS动画制作一个梦幻西游动态页面相关推荐

最新文章

热门文章