使用CSS3各个属性实现带有音乐小人的动画，完全不使用JS代码：

注：chrome浏览器效果最佳，最终效果静态图：

HTML代码如下：

练习一个小人的动画

I

♥

Y

O

U

♫

♪

CSS代码如下：

/* CSS Document */body,html{

width:100%;

height:100%;

margin:0;

display:table;

text-align:center;

}.music1{

display:none;

}.warp{

margin-top:100px;

vertical-align:middle;

position:relative;

}.backgroud_circle{

width:400px;

height:400px;

border-radius:100%;

background:#6699FF;

margin:0 auto;

overflow:hidden;

-webkit-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);

-moz-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);

-o-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);

-ms-mask-image: -webkit-radial-gradient(#BADA55, #BADA55); /*执行动画*/

animation:grow 0.7s ease;

-webkit-animation:grow 0.7s ease;

transform-origin:center;

}/*身体body*/.body{

width:285px;

height:400px;

margin:0 auto;

background:#333333;

position:relative;

top:100px;

border-radius:100px; /*执行动画*/

-webkit-animation:body-enter 0.7s 0.2s 1 ease;

animation:body-enter 0.7s 0.2s 1 ease; /*-webkit-animation-fill-mode:forwards;

animation-fill-mode:forwards;*/}/*头部head*/.head{

width:196px;

height:260px;

border-radius:50px;

background:#ffe4be;

position:absolute;

top:50%;

left:50%;

margin-top:-210px;

margin-left:-98px; /*动画执行*/

animation:grow 0.7s 0.5s ease;

-webkit-animation:grow 0.7s 0.5s ease;

transform-origin:bottom;

}/*头发*/.hair-main{

width:220px;

height:0px;

background:#FF9966;

border-radius:54px 54px 0px 0px;

animation:hair-main 0.7s 0.9s ease;

-webkit-animation:hair-main 0.7s 0.9s ease;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

position:relative;

margin-left:-12px;

margin-top:-10px;

z-index:2;

}/*鬓角*/.sideburn{

width:8px;

height:25px;

background:#FF9966;

opacity:0;

bottom:-25px;

position:absolute;

animation:sideburn-main 0.7s 1s ease;

-webkit-animation:sideburn-main 0.7s 1s ease;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

}.sideburn#left{

left:12px;

}.sideburn#right{

right:12px;

}/*耳朵*/.ear{

width:24px;

height:35px;

position:absolute;

background:#ffe4be;

top:116px;

border-radius:12px;

animation:grow 0.7s 1.3s ease;

-webkit-animation:grow 0.7s 1.3s ease;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

transform:scale(0);

-webkit-transform:scale(0);

}.ear#left{

left:-12px;

}.ear#right{

right:-12px;

}/*脸部*/.face{

width:180px;

height:0px;

border-radius:48px;

background:#ffe4be;

position:absolute;

top:40px;

left:8px;

animation:hair-main 0.7s 0.5s linear;

-webkit-animation:hair-main 0.7s 0.5s linear;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

z-index:3;

}/*鼻子*/.nose{

width:20px;

height:45px;

opacity:1;

border-top-left-radius:20px;

background:#ffe4be;

position:absolute;

top:80px;

left:50%;

margin-left:-20px;

animation:shadow-main 0.7s 3s ease;

animation-fill-mode: forwards;

-webkit-animation:shadow-main 0.7s 3s ease;

-webkit-animation-fill-mode: forwards;

opacity:0;

z-index:5;

}/*形成鼻子的阴影*/.shadow-main{

width:98px;

height:260px;

position:absolute;

bottom:-84px;

left:-8px;

z-index:4;

overflow:hidden;

}.shadow{

width:98px;

height:260px;

border-radius:50px;

background:rgba(149,36,0,0.1);

position:absolute;

opacity:0;

z-index:4;

animation:shadow-main 1s 2.8s ease;

-webkit-animation:shadow-main 1s 2.8s ease;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

}/*眼睛阴影*/.eye-shadow{

width:30px;

height:15px;

border-radius:0 0 15px 15px;

background:rgba(149,36,0,0.1);

position:absolute;

top:70px;

animation:grow 0.7s 2s ease;

-webkit-animation:grow 0.7s 2s ease;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

transform:scale(0);

-webkit-transform:scale(0);

}.eye-shadow#left{

left:35px;

z-index:5;

}.eye-shadow#right{

right:35px;

}/*眼眉*/.eyebrow{

width:40px;

height:10px;

background:#FF9966;

position:absolute;

top:-35px;

left:50%;

opacity:0;

margin-left:-20px;

-webkit-backface-visibility:hidden;/*设定元素的背面是否可见*/}.eyebrow#left{

animation:eyebrow-left 0.7s 2.2s ease;

-webkit-animation:eyebrow-left 0.7s 2.2s ease;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

}.eyebrow#right{

animation:eyebrow-right 0.7s 2.2s ease, eyebrow-right-raise 2s 6.6s infinite alternate ease-in-out;

-webkit-animation:eyebrow-right 0.7s 2.2s ease, eyebrow-right-raise 2s 6.6s infinite alternate ease-in-out;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

}/*两只蓝色眼睛*/.eye{

width:20px;

height:28px;

border-radius:10px;

background:#334C68;

position:absolute;

top:-18px;

left:50%;

margin-left:-10px;

animation:grow 0.7s 2.2s ease;

-webkit-animation:grow 0.7s 2.2s ease;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

transform:scale(0);

-webkit-transform:scale(0);

transform-origin:bottom;

-webkit-transform-origin:bottom;

}/*嘴巴*/.mouse{

width:66px;

height:33px;

background:#FFFFFF;

border-radius:0 0 33px 33px;

position:absolute;

left:50%;

top:150px;

margin-left:-33px;

animation:grow 0.7s 2.6s ease;

-webkit-animation:grow 0.7s 2.6s ease;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

transform:scale(0);

-webkit-transform:scale(0);

}/*背景高亮light阴影*/.tight-light{

width:400px;

height:600px;

background:#ffffff;

opacity:0;

position:absolute;

right:15%;

animation:tight-light 1s 2.8s ease;

-webkit-animation:tight-light 1s 2.8s ease;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

transform:translate(200px,0px);

-webkit-transform:translate(200px,0px);

}/*背景高亮dark阴影*/.tight-dark{

width:400px;

height:600px;

background:#000000;

opacity:0;

position:absolute;

left:10%;

top:35px;

animation:tight-dark 1s 2.8s ease;

-webkit-animation:tight-dark 1s 2.8s ease;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

transform:translate(-200px,0px);

-webkit-transform:translate(-200px,0px);

z-index:6;

}/*外边黄色圈*/.border_circle{

width:399px;

height:399px;

border-radius:50%;

border:10px solid #ff8345;

position:absolute;

top:50%;

left:50%;

margin-left:-220px;

margin-top:-220px;

transform:scale(0);

-webkit-transform:scale(0);

transform-origin:center;

-webkit-transform-origin:center;

}/*外边黄色圈one*/.border_circle#one{

animation:border_circle 1s 3.1s ease;

-webkit-animation:border_circle 1s 3.1s ease;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

}/*外边黄色圈two*/.border_circle#two{

animation:border_circle 1s 3.3s ease;

-webkit-animation:border_circle 1s 3.3s ease;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

}/*I YOU*/.backgroud_circle .shirt-text{

font-family:"微软雅黑",sans-serif;

font-size:50px;

font-weight:700;

color:#FFFFFF;

position:relative;

top:180px;

display:inline-block;

-webkit-text-stroke:2px;

text-stroke:2px;

opacity:0;

-webkit-transform:translate(0px,100px);

transform:translate(0px,100px);

animation-fill-mode:forwards !important;

-webkit-animation-fill-mode:forwards !important;

z-index:5;

}.backgroud_circle .shirt-text:nth-of-type(1){

animation:shirt-text 0.7s 3.3s ease;

-webkit-animation:shirt-text 0.7s 3.3s ease;

}.backgroud_circle .shirt-text:nth-of-type(2){

color:#FF0000;

animation:shirt-text 0.7s 3.4s ease, heart 2s 4s infinite ease-in-out;

-webkit-animation:shirt-text 0.7s 3.4s ease, heart 2s 4s infinite ease-in-out;

}.backgroud_circle .shirt-text:nth-of-type(3){

animation:shirt-text 0.7s 3.5s ease;

-webkit-animation:shirt-text 0.7s 3.5s ease;

}.backgroud_circle .shirt-text:nth-of-type(4){

animation:shirt-text 0.7s 3.6s ease;

-webkit-animation:shirt-text 0.7s 3.6s ease;

}.backgroud_circle .shirt-text:nth-of-type(5){

animation:shirt-text 0.7s 3.7s ease;

-webkit-animation:shirt-text 0.7s 3.7s ease;

}/*音符*/.music{

position: absolute;

font-size: 150px;

color: #FCB040;

width: 1px;

left: 50%;

opacity: 0;

}.music#one{

margin-left:-250px;

top:50%;

animation: note 2s 3.5s infinite ease;

animation-fill-mode: forwards;

-webkit-animation: note 2s 3.5s infinite ease;

-webkit-animation-fill-mode: forwards;

}.music#two{

margin-left: 150px;

top: 30%;

animation: note 2s 4.3s infinite ease;

animation-fill-mode: forwards;

-webkit-animation: note 2s 4.3s infinite ease;

-webkit-animation-fill-mode: forwards;

}/*背景圆圈的动画事件：由中心向外扩张*/@-webkit-keyframes grow{

0%{ -webkit-transform:scale(0); transform:scale(0);}

60%{ -webkit-transform:scale(1.15); transform:scale(1.15);}

80%{ -webkit-transform:scale(0.95); transform:scale(0.95);}

100%{ -webkit-transform:scale(1); transform:scale(1);}}

@keyframes grow{

0%{ -webkit-transform:scale(0); transform:scale(0);}

60%{ -webkit-transform:scale(1.15); transform:scale(1.15);}

80%{ -webkit-transform:scale(0.95); transform:scale(0.95);}

100%{ -webkit-transform:scale(1); transform:scale(1);}}/*身体进入样式：由底部向上先变大再恢复正常*/@-webkit-keyframes body-enter{

0%{-webkit-transform:translateY(200px);}

60%{-webkit-transform:translateY(-20px);}

80%{-webkit-transform:translateY(30px);}

100%{-webkit-transform:translateY(0);}}

@keyframes body-enter{

0%{-webkit-transform:translateY(200px);}

60%{-webkit-transform:translateY(-20px);}

80%{-webkit-transform:translateY(30px);}

100%{-webkit-transform:translateY(0);}}/*头发动画：*/@-webkit-keyframes hair-main{

0%{height:0px; -webkit-transform:translateY(137px); transform:translateY(137px);}

100%{height:137px; -webkit-transform:translateY(0); transform:translateY(0);}}

@keyframes hair-main{

0%{height:0px; -webkit-transform:translateY(137px); transform:translateY(137px);}

100%{height:137px; -webkit-transform:translateY(0); transform:translateY(0);}}/*鬓角动画*/@-webkit-keyframes sideburn-main{

0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);}

100%{opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}}

@keyframes sideburn-main{

0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);}

100%{opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}}/*鼻子阴影动画：*/@-webkit-keyframes shadow-main{

0%{ opacity:0; -webkit-transform:translate(98px,0px); transform:translate(98px,0px);}

50%{ opacity:0;}

100%{ opacity:1; -webkit-transform:translate(0px,0px); transform:translate(0px,0px);}}

@keyframes shadow-main{

0%{ opacity:0; -webkit-transform:translate(98px,0px); transform:translate(98px,0px);}

50%{ opacity:0;}

100%{ opacity:1; -webkit-transform:translate(0px,0px); transform:translate(0px,0px);}}/*左眼眉动画*/@-webkit-keyframes eyebrow-left{

0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);}

70%{opacity:1; -webkit-transform:translateY(5px); transform:translateY(5px);}

100%{opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}}

@keyframes eyebrow-left{

0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);}

70%{opacity:1; -webkit-transform:translateY(5px); transform:translateY(5px);}

100%{opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}}/*右眼眉动画*/@-webkit-keyframes eyebrow-right{

0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);}

70%{opacity:1; -webkit-transform:translateY(5px); transform:translateY(5px);}

100%{opacity:1; -webkit-transform:rotate(9deg) translateY(0); transform:rotate(9deg) translateY(0);}}

@keyframes eyebrow-right{

0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);}

70%{opacity:1; -webkit-transform:translateY(5px); transform:translateY(5px);}

100%{opacity:1; -webkit-transform:rotate(9deg) translateY(0); transform:rotate(9deg) translateY(0);}}/*眉毛上升动画*/@-webkit-keyframes eyebrow-right-raise{

0%{top:-35px;}

70%{top:-35px;}

100%{top:-45px;}}

@keyframes eyebrow-right-raise{

0%{top:-35px;}

70%{top:-35px;}

100%{top:-45px;}}/*背景高亮light动画*/@-webkit-keyframes tight-light{

0%{opacity:0; -webkit-transform:translate(200px,0px); transform:translate(200px,0px);}

100%{opacity:0.2; -webkit-transform:rotate(45deg) translate(0px,0px); transform:rotate(45deg) translate(0px,0px);}}

@keyframes tight-light{

0%{opacity:0; -webkit-transform:translate(200px,0px); transform:translate(200px,0px);}

100%{opacity:0.2; -webkit-transform:rotate(45deg) translate(0px,0px); transform:rotate(45deg) translate(0px,0px);}}/*背景高亮dark动画*/@-webkit-keyframes tight-dark{

0%{opacity:0; -webkit-transform:translate(-200px,0px); transform:translate(-200px,0px);}

100%{opacity:0.2; -webkit-transform:rotate(-45deg) translate(0px,0px); transform:rotate(-45deg) translate(0px,0px);}}

@keyframes tight-dark{

0%{opacity:0; -webkit-transform:translate(-200px,0px); transform:translate(-200px,0px);}

100%{opacity:0.2; -webkit-transform:rotate(-45deg) translate(0px,0px); transform:rotate(-45deg) translate(0px,0px);}}/*外面黄色圈动画*/@-webkit-keyframes border_circle{

0%{ border-width:20px; transform:scale(0); -webkit-transform:scale(0);}

40%{ border-width:20px; transform:scale(1); -webkit-transform:scale(1); margin-left:-220px; margin-top:-220px;}

100%{ border-width:0px; transform:scale(1.5); -webkit-transform:scale(1.5); border-style:double; margin-left:-200px; margin-top:-200px;}}

@keyframes border_circle{

0%{ border-width:20px; transform:scale(0); -webkit-transform:scale(0);}

40%{ border-width:20px; transform:scale(1); -webkit-transform:scale(1); margin-left:-220px; margin-top:-220px;}

100%{ border-width:0px; transform:scale(1.5); -webkit-transform:scale(1.5); border-style:double; margin-left:-200px; margin-top:-200px;}}/*文字*/@-webkit-keyframes shirt-text{

0%{opacity:0; -webkit-transform:translate(0px, 80px); transform:translate(0px, 80px);}

60%{opacity:1; -webkit-transform:translate(0px, -50px); transform:translate(0px, -50px);}

80%{opacity:1; -webkit-transform:translate(0px, 140px); transform:translate(0px, 140px);}

100%{opacity:1; -webkit-transform:translate(0px, 100px); transform:translate(0px, 100px);}}

@keyframes shirt-text{

0%{opacity:0; -webkit-transform:translate(0px, 80px); transform:translate(0px, 80px);}

60%{opacity:1; -webkit-transform:translate(0px, -50px); transform:translate(0px, -50px);}

80%{opacity:1; -webkit-transform:translate(0px, 140px); transform:translate(0px, 140px);}

100%{opacity:1; -webkit-transform:translate(0px, 100px); transform:translate(0px, 100px);}}

@-webkit-keyframes heart{

0%{ }

30%{color:#00FF99;}

70%{color:#FFFF00;}

100%{}}

@keyframes heart{

0%{ }

30%{color:#00FF99;}

70%{color:#FFFF00;}

100%{}}/*音符*/@-webkit-keyframes note{

0% {

opacity: 0;

-webkit-transform: translate(0px,50px);

transform: translate(0px,50px);

}

30% {

-webkit-transform:rotate(12deg) translate(-30px,0px);

transform:rotate(12deg) translate(-30px,0px);

}

45% {

opacity: 1;

}

60% {

-webkit-transform: rotate(-12deg) translate(30px,-100px);

transform:rotate(-12deg) translate(30px,-100px);

}

100% {

opacity: 0;

-webkit-transform:rotate(0deg) translate(0px,-200px);

transform:rotate(0deg) translate(0px,-200px);

}}

@keyframes note{

0% {

opacity: 0;

-webkit-transform: translate(0px,50px);

transform: translate(0px,50px);

}

30% {

-webkit-transform:rotate(12deg) translate(-30px,0px);

transform:rotate(12deg) translate(-30px,0px);

}

45% {

opacity: 1;

}

60% {

-webkit-transform: rotate(-12deg) translate(30px,-100px);

transform:rotate(-12deg) translate(30px,-100px);

}

100% {

opacity: 0;

-webkit-transform:rotate(0deg) translate(0px,-200px);

transform:rotate(0deg) translate(0px,-200px);

}}

html小人动画效果代码,使用CSS3各个属性实现小人的动画实例代码相关推荐

  1. html如何设置图片循环旋转动画效果,如何使用css3实现图片自动旋转的特效(完整代码)...

    在介绍如何使用css3实现旋转图片特效的基础上,重点介绍了具体的步骤.这篇论文内容紧凑,希望大家能有所收获. 在浏览网页的过程中,你会遇到一种特殊的效果,叫做图片旋转:不同的图片会根据时间的变化在同一 ...

  2. 悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果

    CSS3 transition属性实现hover渐变动画效果 我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...

  3. 使用CSS3各个属性实现小人的动画

    使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...

  4. html页面添加动态动画小人,使用CSS3各个属性实现小人的动画_html/css_WEB-ITnose

    使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: 练习一个小人的动画 I ? Y O U ♫ ♪ CSS代码如下: ...

  5. html css动画自动旋转,使用CSS3 backface-visibility属性制作翻转动画效果

    使用CSS3 backface-visibility属性我们可以制作出许多有趣的动画效果.当你翻转一个元素的时候,你看到的是什么?通常情况下,我们应该看到的是元素的背面,这是正常的情况,但是有时候我们 ...

  6. html动画效果放大,一个CSS+jQuery实现的放大缩小动画效果

    今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. 都是定死了的.因为需求就只有4个元素.如果是要用CSS的class来处理,那就需要用到CSS3动画了. 功能 : 在 ...

  7. android麦克风监听动画效果,微信小程序实现录音时的麦克风动画效果实例

    前言 这个简单的麦克风demo的创意是来源于"包你说"中的录音效果,实现的方式其实也并不难,但对于小程序中的简易动画的使用的确很实用. 效果 先来看个demo,gif帧数比较低,实 ...

  8. android 自定义view 动画效果,Android自定义view实现阻尼效果的加载动画

    效果: 需要知识: 1. 二次贝塞尔曲线 2. 动画知识 3. 基础自定义view知识 先来解释下什么叫阻尼运动 阻尼振动是指,由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减的振动,又 ...

  9. html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效

    原标题:7款超华丽的HTML5 Canvas文字动画特效 文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...

最新文章

  1. java菜单动态加载功能_Javascript实现动态菜单添加
  2. wpf窗口向左向上_PaperWM：GNOME 下的平铺窗口管理
  3. C++中的Socket编程使用协议发送图片
  4. 基准分类模型、分类应用（多分类数字识别、疾病预测、欺诈检测）、监督学习总结
  5. C#模拟MSN窗体抖动
  6. CNN结构：用于检测的CNN结构进化-分离式方法
  7. 英特尔携手百度全方位深化合作 共筑智能生态
  8. 判断两个学生类对象是否一致使用equals方法重写时判断条件使用“==”、“String自带的equals”不同所带来的问题
  9. python线程池原理_Python3线程池ThreadPoolExecutor总结
  10. 英伟达发布迁移学习工具包，现在可以申请早期试用
  11. matlab2c使用c++实现matlab函数系列教程-log10函数
  12. Tomcat服务器解析“GET /JavaWebDemo1/1.jsp HTTP/1.1”
  13. 我的飞信发展方案（一）
  14. Mac上如何修改itunes的默认备份地址
  15. 板载天线设计相关资料
  16. spring cloud 复杂类型 FeignClient 避免linkedHashMap
  17. reactos操作系统实现 1
  18. 原腾讯QQ技术总监、T13专家，黄希彤被裁，原因竟是不愿意被 PUA ？
  19. PHP 7系列版本(7.0、7.1、7.2、7.3、7.4)新特性
  20. 仿视频字幕弹幕网站Miko二次元动漫视频网站源码

热门文章

  1. mac os 秒开 word doc 文档
  2. 服务器被入侵如何排查？如何防止服务器被入侵？
  3. WAP建站WML语言语法基础教程
  4. 麒麟系统下安装mysql_Ubuntu麒麟下安装MySQL+Django+Python（一）
  5. html5笔试题dw,网页制作笔试选择题
  6. MySQL数据库程序设计套题⑤【真题截图+原理解析】
  7. 利用淘宝IP查询接口，免费查询IP归属地
  8. Windows系统diskpart删除U盘分区
  9. 简单文件备份工具（C#）
  10. 自律给你自由——设计布局的新姿势