简单的动画（梦幻西游）

突然想起来前一段时间老师讲的动画特效，于是尝试自己写下
HTML层：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>梦幻西游</title><style>*{margin:0;padding:0;}body{background: url("img/bj.jpg")no-repeat;}.box{width:1000px;height:500px;margin:50px auto;position: relative;}/*.box .queen{width:120px;height:180px;background: url("img/queen.png");background-size: 100%;position: absolute;right:20px;top:50px;z-index: 99;cursor: pointer;}*/.box .xiyouji{width:100%;height:100%;position: absolute;left:0;top:0;padding-top:260px;box-sizing: border-box;}.box .xiyouji .div{float: left;cursor: pointer;transition: transform .8s ease;}.box .xiyouji .div:hover{transform:scale(1.3);}.box .xiyouji .div1{width:200px;height:180px;background: url("img/sunwukong.png");animation:walk1 1.4s steps(8) infinite;margin-top:30px;margin-left:30px;}@keyframes walk1{from{background-position: 0 0;}to{background-position: -1600px 0;}}.box .xiyouji .div2{width:200px;height:180px;background: url("img/zhubajie.png");animation:walk1 1.4s steps(8) infinite;margin-top:30px;}.box .xiyouji .div3{width:170px;height:240px;background: url("img/tangseng.png");animation:walk3 1.4s steps(8) infinite;}@keyframes walk3{from{background-position: 0 0;}to{background-position: -1360px 0;}}.box .xiyouji .div4{width:210px;height:200px;background: url("img/shaheshang.png");animation:walk4 1.4s steps(8) infinite;margin-top:30px;}@keyframes walk4{from{background-position: 0 0;}to{background-position: -1680px 0;}}/*.tips{display: none;z-index: 99;}.tips .tip1{width:180px;height:120px;position: absolute;right:110px;top:30px;background: url(img/tips.png);padding:40px 35px;font-size: 12px;line-height: 20px;box-sizing: border-box;}.tips .tip2{width:180px;height:120px;position: absolute;right:300px;top:180px;background: url(img/tips.png);padding:40px 35px;line-height: 20px;font-size: 12px;box-sizing: border-box;}*//*.queen:hover+.xiyouji .tips{display: block;}.queen:hover+.xiyouji .div1,.queen:hover+.xiyouji .div2,.queen:hover+.xiyouji .div3,.queen:hover+.xiyouji .div4{animation-duration: 0.2s;}*/</style>
</head>
<body><div class="box"><!--<div class="queen"></div>--><div class="xiyouji"><div class="div1 div"></div><div class="div2 div"></div><div class="div3 div"></div><div class="div4 div"></div><!--<div class="tips"><div class="tip1">御弟哥哥，别跑！</div><div class="tip2">徒儿们，快跑啊，救我！！！</div></div>--></div></div>
</body>
</html>

其实也就是简单的应用

简单的动画（梦幻西游）相关推荐

html 语言 gif 动画,动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 ) (一)请自行下载安装Dreamweaver 在Dreamweaver编写代码(如需参考请复制下列代码) (二)HTML CSS代码详解css代码(/*详解*/) ...
iOS开发UI篇—iOS开发中三种简单的动画设置
[在ios开发中,动画是廉价的] 一.首尾式动画代码示例: // beginAnimations表示此后的代码要"参与到"动画中 [UIView beginAnimations: ...
Qt基于QGraphicsObject自定义图元并实现简单的动画
文章目录 Qt基于QGraphicsObject自定义图元并实现简单的动画举例; Qt基于QGraphicsObject自定义图元并实现简单的动画 Qt 图形的绘制可以是QPainter方法直接绘 ...
GUI动画演示java_java – 使用JFrame的简单GUI动画
我覆盖了JFrame中的setVisible()函数.它所做的只是不断增长框架或缩小框架,直到它达到我想要的尺寸.这使得一个简单的动画.我的问题是,它是不稳定的,不平滑的,如果移动框架不能很好地工作. ...
简单的动画函数封装（2）
<div></div><button class="btn1"> ...
简单的动画函数封装（1）
//创建简单的动画函数封装效果(目标对象,目标位置) function animate(obj,target){var id = setInterval(function(){if(obj.offse ...
计算机动画分为关键帧动画和,一个最简单的动画最少有几个关键帧
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 一个最简单的动画至少有两个关键帧,两个关键帧中必须是元件,而且必须是同一个元件.要创建使组合体或文字发生颜色渐变的动画,必须先将它 ...
matlab仿真动画,用matlab制作简单仿真动画
用matlab制作简单仿真动画,并生成.avi格式的电影文件 MATALB知识点2008-05-01 13:17:54 阅读152 评论0 字号:大中小订阅第一种形式:利用for循环,在一定时间内控 ...
python画五角星代码_Python GUI 编程tkinter--画五角星和简单的动画制作
1.利用Python的tkinter画一个五角星: 2.做一个简单的动画分析五角心的五个顶点的坐标: 确立五角星的中心点和半径,再确立五角星的五个角的坐标信息,其中五角星的各个角读书为36度,具体的 ...
3.15 study 简单移动动画js实现
首先老规矩汇报学习进度129/167 为什么这么慢呢是我偷偷停工了好几天有些迷茫(就是在玩去了),然后其实昨天也看了一点但太少了就没写博客,然后看一下今天的效果一个滑块移动的案例想用gif动图好像 ...

简单的动画（梦幻西游）

简单的动画（梦幻西游）相关推荐

最新文章

热门文章