CSS3实现小黄人动画

转载请注明出处,谢谢!

每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,突然开窍,于是拿他提供的demo试了一下,感觉很棒!下图为demo提供的动画帧设计稿。

charector

自己也想说搞一个DIY的动画出来,可是,会PS不一定会设计啊,我搞不出一套动画设计稿出来啊【抓狂】….于是乎,去了站酷网找找素材,我果然还是太天真了,最后从心只找到了一张图:

1

联想到我要做CSS3动画,呵呵……怎么办 ? ——没办法,抠呗!(此处勿喷,着实无素材)

……最后效果变成这样子,这是移动端的例子!(gif图有卡顿现象,请凑合看吧,非喜勿喷…):

h

OK,其实主要目的还是知识点的学习吧:

这个demo涉及的知识点有:

perspective

perspective-origin

transform-style

transform-origin

animation

@keyframes

translate3d,translateX,rotateY….

这些知识点有些涉及css3d动画,各个知识点的具体详解我就不解释了,有兴趣可以到这里了解一下:http://isux.tencent.com/css3/index.html

回到这个案例,话说这么挫的动画是怎么具体实现的呢? 我将分享代码给大家练习:

html结构:

<body><div class="title"><p>小黄人</p></div><div class="wrapper"><div class="littleH"><div class="light"><div class="light_left"><p>欢迎欢迎,热烈欢迎</p></div><div class="light_right"><p>欢迎欢迎,热烈欢迎</p></div><div class="load"></div></div><div class="littleH_body"><div class="leftHair"></div><div class="rightHair"></div><div class="leftBlackeye"></div><div class="leftWhiteeye"></div><div class="rightBlackeye"></div><div class="rightWhiteeye"></div><div class="mouse"></div><div class="leftFoot"></div><div class="rightFoot"></div></div></div></div>
</body>

css代码:

body{margin: 0;padding: 0;width: 100%;height: 100%;}.title p{text-align: center;font-size: 100px;font-weight: bolder;color:#333;}.wrapper{margin: 400px auto;}.littleH{position: relative;-webkit-perspective: 800;-webkit-perspective-origin: 50% 50%;}.light{-webkit-transform-style: preserve-3d;}.light .light_left,.light .light_right{position: absolute;width: 100%;height: 300px;background: lightblue;-webkit-transform: rotateY(90deg) translate3d(0,300px,-200px);-webkit-animation: changeBgColor 2s linear infinite;}.light .light_right{-webkit-transform: rotateY(-90deg) translate3d(0,300px,-215px);-webkit-animation-delay: 1s;}@-webkit-keyframes changeBgColor{0%,100%{background: lightblue;}50%{background: lightgreen;}}.light .light_left p,.light .light_right p{color:#fff;font-size: 80px;font-weight: bold;margin-left: 100px;}.light .light_right p{float: right;margin-right: 100px;}.light .load{position: absolute;width: 500px;height: 1500px;background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#aadbdc), color-stop(52%,#ffffff));background: -webkit-linear-gradient(top, #aadbdc 51%,#ffffff 52%);background: linear-gradient(to bottom, #aadbdc 51%,#ffffff 52%); background-size: 350px 80px;-webkit-animation: move_load 5s linear infinite;}@-webkit-keyframes move_load{0%{-webkit-transform:rotateX(90deg) translate3d(250px,0,0);}100%{-webkit-transform:rotateX(90deg) translate3d(250px,-320px,0);}}.littleH_body{position: absolute;left:50%;margin-left: -157px;width: 314px;height: 425px;background: url(1.png);-webkit-transform-style: preserve-3d;}.leftHair{position: absolute;right: 58px;top:-5px;width: 100px;height: 17px;background: url(lefthair.png);-webkit-transform-origin: left bottom;-webkit-animation: lefthair 1s .3s ease-in-out infinite;}@-webkit-keyframes lefthair{0%,10%,40%,100%{-webkit-transform: rotate(0deg) translateY(1px);}30%{-webkit-transform: rotate(-3deg) translateY(1px);}}.rightHair{position: absolute;left: 58px;top:-8px;width: 100px;height: 16px;background: url(righthair.png);-webkit-transform-origin: right bottom;-webkit-animation: righthair 1s ease-in-out infinite;}@-webkit-keyframes righthair{0%,10%,40%,100%{-webkit-transform: rotate(0deg) translateY(1px);}30%{-webkit-transform: rotate(4deg) translateY(1px);}}.leftBlackeye{position: absolute;right: 87px;top:102px;width: 43px;height: 43px;background: url(eyeblack.png);-webkit-animation: leftblackeye 5s ease-in infinite;}@-webkit-keyframes leftblackeye{0%,20%,50%,70%,100%{-webkit-transform: translateX(0px);}30%,40%{-webkit-transform: translateX(15px);}80%,90%{-webkit-transform: translateX(-15px);}}.leftWhiteeye{position: absolute;right: 92px;top:110px;width: 20px;height: 21px;background: url(whiteeye.png);background-size: 95% 95%;background-repeat: no-repeat;-webkit-animation: leftwhiteeye 5s ease-in infinite;}@-webkit-keyframes leftwhiteeye{0%,20%,50%,70%,100%{-webkit-transform: translateX(0px);}30%,40%{-webkit-transform: translate3d(15px,3px,0);}80%,90%{-webkit-transform: translate3d(-30px,3px,0);}}.rightBlackeye{position: absolute;left: 84px;top:102px;width: 43px;height: 43px;background: url(eyeblack.png);-webkit-animation: rightblackeye 5s ease-in infinite;}@-webkit-keyframes rightblackeye{0%,20%,50%,70%,100%{-webkit-transform: translateX(0px);}30%,40%{-webkit-transform: translateX(15px);}80%,90%{-webkit-transform: translateX(-15px);}}.rightWhiteeye{position: absolute;left: 102px;top:112px;width: 20px;height: 21px;background: url(whiteeye.png);background-size: 95% 95%;background-repeat: no-repeat;-webkit-animation: rightwhiteeye 5s ease-in infinite;}@-webkit-keyframes rightwhiteeye{0%,20%,50%,70%,100%{-webkit-transform: translateX(0px);}30%,40%{-webkit-transform: translate3d(15px,3px,0);}80%,90%{-webkit-transform: translate3d(-30px,3px,0);}}.mouse{position: absolute;left: 126px;top:210px;width: 71px;height: 30px;background: url(mouse.png);-webkit-transform-origin: center top;-webkit-animation: mouse 5s ease-in-out infinite;}@-webkit-keyframes mouse{40%{-webkit-transform: rotate(-15deg) translateX(22px);}0%,20%,60%,100%{-webkit-transform: rotate(0deg);}}.leftFoot{position: absolute;right: 85px;top:424px;width: 68px;height: 43px;background: url(leftfoot.png);-webkit-transform-origin: left top;-webkit-animation: leftfoot .6s ease-in-out infinite;}@-webkit-keyframes leftfoot{0%,50%,100%{-webkit-transform: rotate(0deg);}80%{-webkit-transform: rotate(-10deg);}}.rightFoot{position: absolute;left: 85px;top:424px;width: 68px;height: 43px;background: url(rightfoot.png);margin-bottom: 100px;-webkit-transform-origin: right top;-webkit-animation: rightfoot .6s ease-in-out infinite;}@-webkit-keyframes rightfoot{0%,50%,100%{-webkit-transform: rotate(0deg);}30%{-webkit-transform: rotate(10deg);}}

代码应该还是很简单就能看懂的,不足之处在于图片没有合并,就凑合吧,主要目的还是对CSS3动画(特别是3d)知识点的学习及实践。多练习,才能记得更牢,用得更顺,这只是开始……

PS:附上我抠的图片

1 1.png

righthairrighthair.png

lefthairlefthair.png

eyeblackeyeblack.png

whiteeyewhiteeye.png

mousemouse.png

rightfootrightfoot.png

leftfootleftfoot.png

转载于:https://www.cnblogs.com/jr1993/p/4654622.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574454.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

editview只输入英文_搜狗输入法Mac版更新:适配苹果M1处理器

12月24日消息 据搜狗输入法官方&#xff0c;近日Mac版应用程序已完成更新&#xff0c;新版本引入苹果M1桌面处理器原生支持&#xff0c;体验更优、速度更快&#xff0c;兼容搭载MacBook Pro、MacBook Air和Mac mini等机型&#xff0c;令使用苹果M1系列产品的用户们获得更加高效…

angular div 滚动条事件_DOM事件

事件是在编程时系统内发生的动作或发生的事情&#xff08;单击、鼠标移动、滚动页面等&#xff09;。HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。JS与HTML之间的交互是通过事件实现的&#xff0c;DOM支持大量的事件。事件的本质是程序各个组成部分之间的一种通信方式…

android byte[] 转string 好多问号_Android 仿抖音实现动态壁纸

code小生,一个专注 Android 领域的技术平台公众号回复 Android 加入我的安卓技术群作者&#xff1a;7_px链接&#xff1a;https://www.jianshu.com/p/fc5cf284abbb声明&#xff1a;本文已获7_px授权发表&#xff0c;转发等请联系原作者授权一、概述&#xff1a; 壁纸运行在一个…

升序排序中国_干货满满!6行python代码挑战展示2020下半年中国最娱乐的人气男明星人气排行榜top10!...

本回答主要以2020下半年中国最娱乐的人气男明星top10变化动态条形图为例来展示如何用python生成动态条形图。知乎视频​www.zhihu.com一、 python生成动态条形图&#xff1a;以2020下半年中国最娱乐的人气男明星top10变化动态条形图为例。1. 安装第三方库1.1 下载第三方库的网址…

YII2 实现后台操作记录日志

一、连接linux服务器&#xff0c;创建数据文件 php yii migrate/create user_log 二、修改数据文件 console/migrations/m150721_032220_admin_log.php <?phpuse yii\db\Schema; use yii\db\Migration;class m150721_032220_admin_log extends Migration {public function…

cmd批量修改文件名 增加文字_Dynamo自动批量化修改文件名称

今天我们说一下如何批量化的修改文件名称&#xff0c;都9102年了总不能一个一个手动去修改吧。比如我们要对现有的族修改为带有我们企业缩写的族库,于是乎我把朋友的族就借过来了可以是下面这样&#xff1a;当然也不仅仅是修改族文件名称&#xff0c;我们可以修改任意文件夹下的…

CSS入门学习(转)

一、基础学习 1、何为CSS CSS是Cascading Style Sheets(层叠样式表)的简称&#xff0c;是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语 言). CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀&#xff0c; 可以通…

在电脑上显示未知发布者怎么办_电脑开机后显示器黑屏只有鼠标能动,怎么办呢?...

开机黑屏进不了系统是很常见的电脑故障&#xff0c;导致该现象的原因也有很多种&#xff0c;有些用户是电脑开机后显示器黑屏只有鼠标能动&#xff0c;如果是这种情况该怎么办呢&#xff1f;出现电脑开机后显示器黑屏只有鼠标很有可能是资源管理器的问题&#xff0c;下面由维度…

ios图文详情加载html_前端项目009 Vue 信息分享系统 商品列表、详情

頔言頔语&#xff1a;进步&#xff0c;一定要进步&#xff0c;进步是跟收入持平的本钱。01 商品列表0101 路由配置和数据请求0102 上拉加载更多02 商品详情0201 详情数据请求和展示0202 轮播图组件提取0203 商品详情&#xff08;路由的本质理解&#xff09;01 商品列表0101 路由…

zemax设置 像方远心_ZEMAX相机标定非常不完全指南

ZEMAX是广为使用的一款光学仿真软件&#xff0c;是进行光路设计和分析的利器&#xff1b;而相机标定&#xff0c;则是进行机器视觉任务时&#xff0c;拿到一款相机&#xff0c;对其实际参数进行确定的过程。因此看起来&#xff0c;二者其实主要是针对不同的侧重点。前者主要面向…

activiti 生命周期_一文让你读懂什么是Activiti工作流

Activiti工作流学习经验总结(一)什么是工作流&#xff1f;工作流指通过计算机对业务流程进行自动化管理&#xff0c;实现多个参与者按照预定义的流程去自动执行业务流程。什么是Activiti&#xff1f;Activiti 是一个开源架构的工作流引擎&#xff0c;基于bpmn2.0 标准进行流程定…

关于hkcmd.exe造成的和Eclipse之间热键冲突

可能是自己新买的笔记本比较强大,显卡也比较牛叉.当使用一些常用的Eclipse快捷键的时候Eclipse本身没有反应,反而显示器有了反应. 经常用的Eclispse中的快捷键CtrlAlt↑ 和CtrlAlt↓ 造成显示器内容的上翻转和下翻转 解决方式: 下载Windows Hot Key Explore 软件 在安装启动后…

中对曲线进行斜率提取_Au中的EQ处理方法——图形均衡器和参数均衡器

之前的文章详细讲过使用Cubase进行EQ处理&#xff0c;其实如果只是要对录音进行混音修音的话&#xff0c;使用Au也可以&#xff0c;Adobe Audition作为音乐录制及后期软件&#xff0c;具有很强大的后期功能&#xff0c;而且也可以添加插件&#xff0c;是修音混音非常好的工具。…

2 数据源配置_Spring, MyBatis 多数据源的配置和管理

作者&#xff1a;digdeep出处&#xff1a;https://www.cnblogs.com/digdeep/p/4512368.html热门推荐vuewebsocketSpringboot实现的即时通信开源项目springboot炸翔版CMS开源系统同一个项目有时会涉及到多个数据库&#xff0c;也就是多数据源。多数据源又可以分为两种情况&#…

(九十)使用多个storyboard+代码实现控制器的分开管理

使用单个storyboard会使得项目难与管理&#xff0c;使用纯代码又会过于麻烦&#xff0c;因此如果能将二者结合起来&#xff0c;并且使用多个storyboard&#xff0c;会使得项目简单简单、方便许多。 下面以一个简单的视图关系为例&#xff0c;介绍多个storyboard的用法。 ①有pa…

吗 支持windows_M1能否原生支持Windows 苹果把问题抛给了微软

关于苹果M1处理器近期已经有了非常多的报道&#xff0c;人们对其出色的性能表现以及较低的功耗还是充满了期待。那么最后一个也是最重要的一个问题&#xff0c;基于苹果M1处理器的电脑能原生支持微软Windows吗&#xff1f;毕竟很多人买回苹果MacBook第一件事就是安装Windows 10…

4怎么放大字体_win8.1系统如何放大所有字体?

电脑安装上[color#070c0 !important]win8.1正式版系统&#xff0c;发现桌面的字体和网页的字体比较小&#xff0c;看起来比较吃力&#xff0c;从而影响操作。一般win8.1系统字体都默认设置好的&#xff0c;不过用户可以进行放大&#xff0c;那么win8.1系统怎么放大所有字体&…

进程 zabbix_Zabbix监控在windows的进程(非进程数)

场景介绍&#xff1a;小Z同学最近遇到个项目需求&#xff0c;需求是用zabbix监控运行在windows的进程。然鹅&#xff0c;当小Z同学在网上搜了一大堆&#xff0c;发现基本上都是使用官方的proc.num(***.exe)键值拿到进程数量&#xff0c;很显然&#xff0c;这并不符合客户实际的…

phpcms文件所需权限

转载于:https://www.cnblogs.com/zhongheng/p/4684087.html

python mysql 时间比较大小_python时间函数与mysql时间函数转换

时间相关操作&#xff0c;时间有三种表示方式&#xff1a;时间戳 1970年1月1日之后的秒&#xff0c;即&#xff1a;time.time()格式化的字符串 2014-11-11 11:11&#xff0c; 即&#xff1a;time.strftime(%Y-%m-%d)结构化时间 元组包含了&#x…