使用CSS3各个属性实现小人的动画
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码:
注:chrome浏览器效果最佳,最终效果静态图:
HTML代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8";><title>练习一个小人的动画</title><link rel="stylesheet" href="/CSS3/css/people.css" /> </head><body><div class="music1"><audio src="/CSS3/theme_8.mp3" autoplay loop/></div><!--整体的div布局--><div class="warp"><div class="border_circle" id="one"></div><div class="border_circle" id="two"></div><!--背景圆圈--> <div class="backgroud_circle"><div class="tight-light"></div><span class="shirt-text">I</span><span class="shirt-text">♥</span><span class="shirt-text">Y</span><span class="shirt-text">O</span><span class="shirt-text">U</span><div class="tight-dark"></div><!--身体--><div class="body"></div></div><!--头部--><div class="head"><!--耳朵--><div class="ear" id="left"></div><div class="ear" id="right"></div><!--头发--><div class="hair-main"><div class="sideburn" id="left"></div><div class="sideburn" id="right"></div><div class="hair-top"></div></div><!--脸--><div class="face"><div class="hair-bottom"></div><div class="nose"></div><!--形成鼻子的阴影--><div class="shadow-main"><div class="shadow"></div></div><!--左眼--><div class="eye-shadow" id="left"><div class="eyebrow" id="left"></div><div class="eye"></div></div><!--右眼--><div class="eye-shadow" id="right"><div class="eyebrow" id="right"></div><div class="eye"></div></div><!--嘴巴--><div class="mouse"></div></div></div><!--音符--><span class="music" id="one">♫</span><span class="music" id="two">♪</span></div> </body> </html>
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);} }
转载于:https://www.cnblogs.com/grnBlogs/p/4661231.html
使用CSS3各个属性实现小人的动画相关推荐
- html小人动画效果代码,使用CSS3各个属性实现小人的动画实例代码
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: 练习一个小人的动画 I ♥ Y O U ♫ ♪ CSS代码如下: ...
- html页面添加动态动画小人,使用CSS3各个属性实现小人的动画_html/css_WEB-ITnose
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: 练习一个小人的动画 I ? Y O U ♫ ♪ CSS代码如下: ...
- 悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果 我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
- HTML+CSS教程(十)css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
- html css3风车,【干货!】如何利用CSS3新属性创建一个风车动画
文/亚当斯密 话不多说!如图: 风车转动应是十分流畅的,由于截图软件的限制帧数,所以没办法展示应有的流畅 工具:一个人物图片.一个风车透明图片(ps扣出来放到一个透明背景,以png格式保存下来即可,当 ...
- css中translation,css3 translate属性
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动):translateX(x)仅水平方向移动(X轴移动):translateY(Y)仅垂直方向移动(Y轴移动)默认都是从 ...
- 定义动画名字html,CSS3 animation-name属性怎么用?
css3 animation-name属性是用来检索或设置对象所应用的动画名称,必须与@keyframes配合使用,因为动画名称由@keyframes定义 :如果有多个属性值,可以用逗号进行分隔. c ...
- 前端基础8:HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签 标签名 描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
- 运用css3新属性transform写的盒子嵌套展开动画效果
刚刚进园,第一篇博客,记录一下CSS3 绘制盒子效果的方法. css3允许使用 3D 转换来对元素进行格式化,转换是使元素改变形状.尺寸和位置的一种效果,3D转换可以通过设置transform的属性值 ...
最新文章
- 孩子,来生我们一起走
- Java Web 相关面试题总结
- mysql第四章表单查询样题_查询mysql表单中前10条,然后在li中循环输出。
- 如何root安卓手机_你的手机你做主!免 ROOT 卸载安卓手机预装APP
- C#中二进制和流之间的各种相互转换
- 关于国产科学软件的思考(转)
- Javascript 构造函数模式、原型模式
- 一篇博客读懂设计模式之---委派模式
- String与Date、Timestamp互转
- 阿里腾讯百度们已经占据了全球互联网半壁江山!
- HTML5 Canvas中实现文字链接
- vmware tools 的安装(Read-only file system 的解决)
- 怎么把线稿提取出来_【PS技巧】如何用PS快速提取线稿?
- MYSQL数据库基础概念
- 分布式架构在云计算平台中的应用及优缺点
- Jetson Nano 入坑之路 ----(9)C++调用SYN6288语音播报模块
- 如何在移动硬盘上安装Ubuntu系统(1)
- 【零基础学Python】Day9 Python推导式
- 网络安全技术第四章——身份认证技术(身份认证及方式、身份认证三要素、身份认证协议、KERBEROS协议、SSL协议)
- 基于MATLAB的指纹识别系统【论文,GUI】
热门文章
- 因为你组织的安全策略阻止未经身份验证的来宾(试了很多种办法都不行)
- linux查询关键词上下行_【已解决】Linux下通过关键字模糊查找搜索文件
- 创建数据库是列名无效咋办_怎样解决列名无效 - 技术问答 - .Net源码论坛 .net源码,ASP.net|论坛 - Powered by Discuz!NT...
- 8位数控分频器的设计_eda设计数控分频器(实现2~16)分频
- 接口中可以有静态方法吗?
- 032_使用ArrayDeque模拟栈结构
- 003_SQL语言简介
- 二进制在计算机电路中得到广泛的应用,电子技术与单片机的发展应用2喜欢就下吧(全文完整版)...
- python dataframe groupby_【Python数据分析基础】入坑必备的数据预处理操作
- 生鲜配送小程序源码_生鲜配送小程序开发