×

聊聊CSS3 Animation之文字显示的效果

作者:Terry2017.10.25来源:Web前端之家浏览:11492评论:0
关键词:CSS3Animation动画

500.jpg

昨天下午接到一个需求,需要做一个数字显示消失的效果,对于某一些童鞋来说,可能首选插件。的确,类似的插件的确很多,但这不是我本次想分享的,废话不多说,一起先来看下设计师的效果图(局部):

TIM图片20171025095549.png

设计师要求输入猜收盈价的时候数字加些显示特效,如果删除的时候加上消失的效果。实现这个交互,我们需要掌握两个基本点:

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效果只是显示出来的效果:

图片.png

如果要用同样的方法消失,其实很简单,把动画的设置反过来即可,这里就不啰嗦了,不会弄的,可以加入群: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控制文本显示和消失的动画,比如点击时,加上动画的样式即可,由于简单,不贴代码了,不懂的加群吧。

本次分享主题到此为止了。

总结

本次分享主题属于比较基础的,通过这些知识点,希望能对大家有所帮助吧。当然如有诚恳意见,敬请留言。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/CSS3AnimationTextMethod.html

网友评论文明上网理性发言 已有0人参与

发表评论: