51工具盒子
昨天下午接到一个需求，需要做一个数字显示消失的效果，对于某一些童鞋来说，可能首选插件。的确，类似的插件的确很多，但这不是我本次想分享的，废话不多说，一起先来看下设计师的效果图（局部）：
设计师要求输入猜收盈价的时候数字加些显示特效，如果删除的时候加上消失的效果。实现这个交互，我们需要掌握两个基本点：
1、CSS3 Animation数字的动画
2、表单输入框基本JS操作方法
我们今天主要分享的是第一点，因为第二点比较容易，后面会简单介绍。
当然，如果你要做这个动画，还是需要了解下animation动画的基础知识，我们一起来普及下。
定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
-
animation-name
-
animation-duration
-
animation-timing-function
-
animation-delay
-
animation-iteration-count
-
animation-direction
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
| 默认值： | none 0 ease 0 1 normal | | 继承性： | no | | 版本： | CSS3 | | JavaScript 语法： | object.style.animation="mymove 5s infinite" | |----------------|-----------------------------------------------|
基本语法
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 | |-----------------------------|---------------------------| | animation-name | 规定需要绑定到选择器的 keyframe 名称。。 | | animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 | | animation-timing-function | 规定动画的速度曲线。 | | animation-delay | 规定在动画开始之前的延迟。 | | animation-iteration-count | 规定动画应该播放的次数。 | | animation-direction | 规定是否应该轮流反向播放动画。 |
了解完基础知识，我们进入动画制作。现在我们分别以DEMO形式来介绍文本7种动画效果：
案例解析
我们先定义一个动画：
/* Animation One */
@keyframes revolveScale {
60% {
transform: translate(20px, 20px) rotate(30deg) scale(.3);
}
100% {
transform: translate(0) rotate(0) scale(1);
opacity: 1;
}
}
@-webkit-keyframes revolveScale {
60% {
-webkit-transform: translate(20px, 20px) rotate(30deg) scale(.3);
}
100% {
-webkit-transform: translate(0) rotate(0) scale(1);
opacity: 1;
}
}
然后调用动画。如下代码：
.one span {
color: #24a8e6;
opacity: 0;
transform: translate(-150px, -50px) rotate(-180deg) scale(3);
animation: revolveScale .4s forwards;
-webkit-transform: translate(-150px, -50px) rotate(-180deg) scale(3);
-webkit-animation: revolveScale .4s forwards;
}
因为文本需要逐个出现，我们需要把每个元素分隔开来，以CSS3 Animation为例来看下HTML：
<div class="animate one">
<span>c</span><span>s</span><span>s</span><span>3</span>
<span>a</span><span>n</span><span>i</span><span>m</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span><span>s</span>
</div>
然后我们通过CSS3动画延时方法来控制每个字母的出场顺序，一起来看下CSS代码：
.animate span:nth-of-type(2) {
animation-delay: .05s;
}
.animate span:nth-of-type(3) {
animation-delay: .1s;
}
.animate span:nth-of-type(4) {
animation-delay: .15s;
}
.animate span:nth-of-type(5) {
animation-delay: .2s;
}
.animate span:nth-of-type(6) {
animation-delay: .25s;
}
.animate span:nth-of-type(7) {
animation-delay: .3s;
}
.animate span:nth-of-type(8) {
animation-delay: .35s;
}
.animate span:nth-of-type(9) {
animation-delay: .4s;
}
.animate span:nth-of-type(10) {
animation-delay: .45s;
}
.animate span:nth-of-type(11) {
animation-delay: .5s;
}
.animate span:nth-of-type(12) {
animation-delay: .55s;
}
.animate span:nth-of-type(13) {
animation-delay: .6s;
}
.animate span:nth-of-type(14) {
animation-delay: .65s;
}
说明：动画中的细节效果有时候不一定跟设计师的想法吻合，需要小调，比如文字动画的显示幅度，我们可以调整其中的数值（比如旋转rotate、缩放scale、延时delay等），达到预期效果。
OK，我们一起来看下最终DEMO效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Animation文字动画特效</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #999999;
word-wrap: break-word;
}
p {
margin: 0 0 10px;
}
ul {
list-style: none;
}
.container {
width: 100%;
margin: auto;
font-weight: 900;
text-transform: uppercase;
text-align: center;
padding: 0 0 200px;
}
a,
a:link,
a:visited {
text-decoration: none;
padding: 9px 15px;
border: 1px solid #ececec;
border-radius: 5px;
color: gray;
}
.animate {
font-size: 50px;
margin: 100px 0 0;
border-bottom: 2px solid #ccc;
}
.animate span {
display: inline-block;
}
.animate span:nth-of-type(2) {
animation-delay: .05s;
}
.animate span:nth-of-type(3) {
animation-delay: .1s;
}
.animate span:nth-of-type(4) {
animation-delay: .15s;
}
.animate span:nth-of-type(5) {
animation-delay: .2s;
}
.animate span:nth-of-type(6) {
animation-delay: .25s;
}
.animate span:nth-of-type(7) {
animation-delay: .3s;
}
.animate span:nth-of-type(8) {
animation-delay: .35s;
}
.animate span:nth-of-type(9) {
animation-delay: .4s;
}
.animate span:nth-of-type(10) {
animation-delay: .45s;
}
.animate span:nth-of-type(11) {
animation-delay: .5s;
}
.animate span:nth-of-type(12) {
animation-delay: .55s;
}
.animate span:nth-of-type(13) {
animation-delay: .6s;
}
.animate span:nth-of-type(14) {
animation-delay: .65s;
}
/* Animation One */
.one span {
color: #24a8e6;
opacity: 0;
transform: translate(-150px, -50px) rotate(-180deg) scale(3);
animation: revolveScale .4s forwards;
-webkit-transform: translate(-150px, -50px) rotate(-180deg) scale(3);
-webkit-animation: revolveScale .4s forwards;
}
@keyframes revolveScale {
60% {
transform: translate(20px, 20px) rotate(30deg) scale(.3);
}
100% {
transform: translate(0) rotate(0) scale(1);
opacity: 1;
}
}
@-webkit-keyframes revolveScale {
60% {
-webkit-transform: translate(20px, 20px) rotate(30deg) scale(.3);
}
100% {
-webkit-transform: translate(0) rotate(0) scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="animate one">
<span>c</span><span>s</span><span>s</span><span>3</span>
<span>a</span><span>n</span><span>i</span><span>m</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span><span>s</span>
</div>
</body>
</html>
大家看到demo效果只是显示出来的效果：
如果要用同样的方法消失，其实很简单，把动画的设置反过来即可，这里就不啰嗦了，不会弄的，可以加入群：295431592。
后面还有6个demo，跟上面的比较相似，不一一讲解了，这里就直接贴出DEMO代码，大家学习下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 Animation文字动画特效 - Web前端之家</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #999999;
word-wrap: break-word;
}
p {
margin: 0 0 10px;
}
ul {
list-style: none;
}
.container {
width: 100%;
margin: auto;
font-weight: 900;
text-transform: uppercase;
text-align: center;
padding: 0 0 200px;
}
/*.take-input {
margin: 50px 0 0;
}
.take-input input {
width: 400px;
height: 35px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #ececec;
margin: 0 15px 0 0;
font-size: 15px;
}*/
a,
a:link,
a:visited {
text-decoration: none;
padding: 9px 15px;
border: 1px solid #ececec;
border-radius: 5px;
color: gray;
}
.animate {
font-size: 50px;
margin: 100px 0 0;
border-bottom: 2px solid #ccc;
}
.animate span {
display: inline-block;
}
a.repeat {
display: inline-block;
font-size: 12px;
text-transform: none;
text-decoration: none;
color: orange;
padding: 5px 12px;
border: 1px solid #cecece;
font-weight: normal;
margin: 0 0 0 50px;
border-radius: 5px;
position: relative;
bottom: 15px;
}
.animate span:nth-of-type(2) {
animation-delay: .05s;
}
.animate span:nth-of-type(3) {
animation-delay: .1s;
}
.animate span:nth-of-type(4) {
animation-delay: .15s;
}
.animate span:nth-of-type(5) {
animation-delay: .2s;
}
.animate span:nth-of-type(6) {
animation-delay: .25s;
}
.animate span:nth-of-type(7) {
animation-delay: .3s;
}
.animate span:nth-of-type(8) {
animation-delay: .35s;
}
.animate span:nth-of-type(9) {
animation-delay: .4s;
}
.animate span:nth-of-type(10) {
animation-delay: .45s;
}
.animate span:nth-of-type(11) {
animation-delay: .5s;
}
.animate span:nth-of-type(12) {
animation-delay: .55s;
}
.animate span:nth-of-type(13) {
animation-delay: .6s;
}
.animate span:nth-of-type(14) {
animation-delay: .65s;
}
/* Animation One */
.one span {
color: #24a8e6;
opacity: 0;
transform: translate(-150px, -50px) rotate(-180deg) scale(3);
animation: revolveScale .4s forwards;
}
@keyframes revolveScale {
60% {
transform: translate(20px, 20px) rotate(30deg) scale(.3);
}
100% {
transform: translate(0) rotate(0) scale(1);
opacity: 1;
}
}
/* Animation Two */
.two span {
color: #a5cb21;
opacity: 0;
transform: translate(200px, -100px) scale(2);
animation: ballDrop .3s forwards;
}
@keyframes ballDrop {
60% {
transform: translate(0, 20px) rotate(-180deg) scale(.5);
}
100% {
transform: translate(0) rotate(0deg) scale(1);
opacity: 1;
}
}
/* Animation Three */
.three span {
color: #b10e81;
opacity: 0;
transform: translate(-300px, 0) scale(0);
animation: sideSlide .5s forwards;
}
@keyframes sideSlide {
60% {
transform: translate(20px, 0) scale(1);
color: #b10e81;
}
80% {
transform: translate(20px, 0) scale(1);
color: #b10e81;
}
99% {
transform: translate(0) scale(1.2);
color: #00f0ff;
}
100% {
transform: translate(0) scale(1);
opacity: 1;
color: #b10e81;
}
}
/* Animation Four */
.four span {
color: #8d6a00;
opacity: 0;
transform: translate(0, -100px) rotate(360deg) scale(0);
animation: revolveDrop .3s forwards;
}
@keyframes revolveDrop {
30% {
transform: translate(0, -50px) rotate(180deg) scale(1);
}
60% {
transform: translate(0, 20px) scale(.8) rotate(0deg);
}
100% {
transform: translate(0) scale(1) rotate(0deg);
opacity: 1;
}
}
/* Animation Five */
.five span {
color: #dd3f0f;
opacity: 0;
transform: translate(0, -100px) rotate(360deg) scale(0);
animation: dropVanish .5s forwards;
}
@keyframes dropVanish {
30% {
transform: translate(0, -50px) rotate(180deg) scale(1);
}
50% {
transform: translate(0, 20px) scale(.8) rotate(0deg);
opacity: 1;
}
80% {
transform: translate(-100px, -100px) scale(1.5) rotate(-180deg);
opacity: 0;
}
100% {
transform: translate(0) scale(1) rotate(0deg);
opacity: 1;
}
}
/* Animation Six */
.six span {
color: #ddb40f;
opacity: 0;
transform: rotate(-180deg) translate(150px, 0);
animation: twister .5s forwards;
}
@keyframes twister {
10% {
opacity: 1;
}
100% {
transform: rotate(0deg) translate(0);
opacity: 1;
}
}
/* Animation Seven */
.seven span {
color: #348c04;
opacity: 0;
transform: translate(-150px, 0) scale(.3);
animation: leftRight .5s forwards;
}
@keyframes leftRight {
40% {
transform: translate(50px, 0) scale(.7);
opacity: 1;
color: #348c04;
}
60% {
color: #0f40ba;
}
80% {
transform: translate(0) scale(2);
opacity: 0;
}
100% {
transform: translate(0) scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="container">
<div class="animate one">
<span>c</span><span>s</span><span>s</span><span>3</span>
<span>a</span><span>n</span><span>i</span><span>m</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span><span>s</span>
</div>
<div class="animate two">
<span>c</span><span>s</span><span>s</span><span>3</span>
<span>a</span><span>n</span><span>i</span><span>m</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span><span>s</span>
</div>
<div class="animate three">
<span>c</span><span>s</span><span>s</span><span>3</span>
<span>a</span><span>n</span><span>i</span><span>m</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span><span>s</span>
</div>
<div class="animate four">
<span>c</span><span>s</span><span>s</span><span>3</span>
<span>a</span><span>n</span><span>i</span><span>m</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span><span>s</span>
</div>
<div class="animate five">
<span>c</span><span>s</span><span>s</span><span>3</span>
<span>a</span><span>n</span><span>i</span><span>m</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span><span>s</span>
</div>
<div class="animate six">
<span>c</span><span>s</span><span>s</span><span>3</span>
<span>a</span><span>n</span><span>i</span><span>m</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span><span>s</span>
</div>
<div class="animate seven">
<span>c</span><span>s</span><span>s</span><span>3</span>
<span>a</span><span>n</span><span>i</span><span>m</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span><span>s</span>
</div>
</div>
</body>
</html>
OK，动画阶段差不多这样了。再回头看看项目的要求，我们需要把这个效果放到输入表单上来，其实我们可以这样做：
把文本的框架定位浮动到输入框上面，如果直接用value或者placeholder可能不太好弄（相对比较复杂）；然后通过JS控制文本显示和消失的动画，比如点击时，加上动画的样式即可，由于简单，不贴代码了，不懂的加群吧。
本次分享主题到此为止了。
总结
本次分享主题属于比较基础的，通过这些知识点，希望能对大家有所帮助吧。当然如有诚恳意见，敬请留言。
