西游记西天取经场景小动画

西游记西天取经场景

img提取
提取码：xyqj

css样式

* {padding: 0;margin: 0;list-style: none;}html,body {height: 100%;}.main {height: 100%;width: 100%;-webkit-background-size: cover;background-size: cover;overflow: hidden;position: relative;}.main ul {height: 100%;width: 3920px;position: absolute;top: 0;left: 0;animation: dong 50s linear infinite;}@keyframes dong {0% {left: 0;}100% {left: 1920px;}}.main ul li {height: 100%;width: 100%;background: url(imgs/2.jpg);float: left;margin-left: -2000px;}.wk {z-index: 999;width: 200px;height: 180px;background: url(imgs/west_01_3ca39fe.png) 0 0 no-repeat;/*margin: 400px auto;*/position: absolute;top: 55%;left: 20%;animation: wkzou 1s steps(8) infinite;}@keyframes wkzou {to {background-position: -1600px 0;}}.bj {z-index: 999;width: 200px;height: 180px;background: url(imgs/west_02_47bad19.png) 0 0 no-repeat;/*margin: 400px auto;*/position: absolute;top: 55%;left: 35%;animation: bjzou 1s steps(8) infinite;}@keyframes bjzou {to {background-position: -1600px 0;}}.ts {z-index: 999;width: 170px;height: 240px;background: url(imgs/west_03_f962447.png) 0 0 no-repeat;/*margin: 400px auto;*/position: absolute;top: 50%;left: 50%;animation: tszou 1s steps(8) infinite;}@keyframes tszou {to {background-position: -1360px 0;}}.ss {z-index: 999;width: 210px;height: 200px;background: url(imgs/west_04_6516d80.png) 0 0 no-repeat;/*margin: 400px auto;*/position: absolute;top: 57%;left: 62%;animation: sszou 1s steps(8) infinite;}@keyframes sszou {to {background-position: -1680px 0;}}

html页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3小动画西天取经场景</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body><div class="wk"></div>
<div class="bj"></div>
<div class="ts"></div>
<div class="ss"></div>
<div class="main"><ul><li></li><li></li></ul>
</div>
</div>
</body>
</html>

西游记西天取经场景小动画相关推荐

用css制作西游记师徒四人小动画
师徒四人小动画看看效果我们的目标是让师徒四人做出走路的动作,并让背景从左往右移动. 让画面看起来是师徒四人向前走的效果. 前期准备我们先把背景,还有师徒四人走路的每一帧图片添加到工作区中并给背 ...
Premiere室内背景场景MG动画PR素材MOGRT Vol.2
Premiere室内背景场景MG动画PR素材Mogrt,20个室内背景场景 Vol.2 | Premiere Pro 模板多用途Premiere模板,适用于视频解说.演示.信息图表.登录页面.网络动 ...
cocos2d-x 学习笔记（3）cocos2d-x 创建基本控件及小动画
1.创建精灵 //获取屏幕宽高 CCSize size = CCDirector::sharedDirector()->getWinSize(); //创建场景 CCSprite * pSpri ...
纯CSS3制作卡通场景汽车动画效果
前言今天分享一下我昨晚做的CSS3动画效果--卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
用p5.js实现一个小动画——故宫橘猫赏秋图
用p5.js实现一个小动画--故宫橘猫赏秋图互动媒体第二次作业要求我们手绘一幅动画,再用代码实现出动画.由于时间原因,手绘并没有画动画,而是以插画的形式画了一张,然后p5实现了动画. 这里先放效果图 ...
贝塞尔结合CAShapeLayer绘制路线,CABasicAnimation实现的小动画
最近项目需求,做的一个标识正在直播的小动画,代码如下: #import "YGIsOnLiveAnmationView.h" @interface YGIsOnLiveAnmati ...
利用jQuery实现用户名片小动画
我爱撸码,撸码使我感到快乐! 大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮 ...
CSS3-实现单选框radio的小动画
在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...
css 语音,用css完成语音助手小动画
用css完成语音助手小动画 2020年08月10日 | 萬仟网IT编程 | 我要评论震惊!用css完成语音助手小动画不要太简单!语音助手动画定位布局添加动画语音助手动画hello大家好,我是Aaro ...

西游记西天取经场景小动画

西游记西天取经场景

css样式

html页面

西游记西天取经场景小动画相关推荐

最新文章

热门文章