“白龙马蹄朝西，驮着唐三藏跟着仨徒弟…”。前段时间学了css3的动画，那么我就跟风做一个唐僧四徒取经，也就那回事吧

西游记

这个页面主要用到了css3的动画制作，background-position的使用与steps属性，好了废话不多说，先来看一下效果吧

有兴趣的话可以试一下，具体代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>西游记</title><style>body{width:100%;height:100%;margin:0;padding:270px 0;background-image: url(img/01.webp);background-repeat: repeat-x;//水平铺展开position:relative;animation: bg 10000s linear infinite;//动画bg隔10000s执行一次，//并且是无限循环下去}@keyframes bg{from{background-position: -999999px;}//图片定位从-999999px到0pxto{background-position: 0;}}#bg{position:absolute;left:50%;top:50%;margin-left: -500px;text-align: center;}#bg div{width:180px;height:190px;margin: 0 20px;display: inline-block;}#swk{background-image: url(img/01.png);//动画1.4s执行一次，并且把动画分成八段主要是因为这个图片中有八个动作，//所以我们在这里把图片分成把部分animation:swk 1.4s steps(8) infinite;}@keyframes swk{from{background-position: 0;}to{background-position: -1600px;}}#zbj{background-image: url(img/02.png);animation:swk 1.4s steps(8) infinite;}#ts{background-image: url(img/03.png);animation:ts 1.4s steps(8) infinite ;}@keyframes ts{from{background-position: 0;}to{background-position: -1360px;}}#shs{background-image: url(img/04.png);animation:shs 1.4s steps(8) infinite ;}@keyframes shs{from{background-position: 0;}to{background-position: -1680px;}}</style></head><body>//设置一个div把situsiren师徒四人放在一起<div id="bg"><div id="swk"></div><div id="zbj"></div>  <div id="ts" style="height:220px;"></div><div id="shs"></div></div></body>
</html>

注意：在使用background-position时要把这个距离设置好，不然就会出现以下这种乱位的效果

当你把background-position属性设置不太合适时，可以看到图片就是断片的，让人看起来，感觉不太好，下面就给大家分享一下制作这个动画所使用的图片：

背景

猴哥

八戒

师傅

悟净

如果大家有什么意见或建议希望大家在评论区多多交流，谢谢

一篇文带你使用CSS3做出西游记动画相关推荐

css 科技边框_一篇文章带你学习CSS3图片边框
这篇文章我们来讲一下在网站建设中,一篇文章带你学习CSS3图片边框.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 使用CSS3 border-image 属性,你可以在元素 ...
CSS3: 利用分层动画让元素沿弧形路径运动
原文:Moving along a curved path in CSS with layered animation 翻译:涂鸦码龙译者注:部分代码示例在原文中可以看效果(作者写在博文里面了-), ...
浅谈css3的3D动画效果并制作一个简单的旋转照片墙
各位读者大家好,我是一只小菜鸟.目前正在学习web前端方面的相关知识.,这也是小菜鸟第一次写博客.写的有哪里不对的地方欢迎各位指正. 本篇文章内容就是利用简单的HTML布局再加上CSS3的3D转换和动 ...
css3半空心圆_15个超强悍的CSS3圆盘时钟动画赏析
本文作者html5tricks,转载请注明出处在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个 ...
9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
css3中的动画学习分享
大家好,这里是demo软件园,今天为大家分享的是css3中的动画(animation). css3动画: 使元素从一种样式逐渐变化为另一种样式的效果. 动画原理:通过把人物的表情.动作.变化等分解后画 ...
CSS3 高斯模糊与动画效果
CSS3 高斯模糊与动画效果 1. 概述 2. 高斯模糊说明与语法 2.1 高斯模糊说明 2.2 blur 语法 3. 动画效果 3.1 @keyframes 语法 3.2 animation 语法 ...
html5 渐变动画效果图,html5+css3城市场景动画_觉唯设计
最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现.在上一篇文章<盛开的CSS3梦幻荷花>中提到如何用css3制作丰富动画效果的两个思路,当然除此之外,结合使用javascrip ...
CSS3变形透视动画总结
CSS3变形透视动画总结 1. 总览 2. 移动元素 2.1 平面移动 2.2 Z轴方向移动 2.3 XYZ轴同时控制 3. 缩放元素 3.1 元素变形原点 4. 旋转元素 5. 倾斜元素 6. 透视 ...

一篇文带你使用CSS3做出西游记动画

西游记

背景

猴哥

八戒

师傅

悟净

一篇文带你使用CSS3做出西游记动画相关推荐

最新文章

热门文章