51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落
当前位置：工具盒子 > 新视野 > 正文

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

2024-11-24 分类：新视野 阅读(1) 评论(0)

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控制文本显示和消失的动画，比如点击时，加上动画的样式即可，由于简单，不贴代码了，不懂的加群吧。

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

总结

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

赞(0)
未经允许不得转载：工具盒子 » 聊聊CSS3 Animation之文字显示的效果
标签：

厉飞雨

众生皆苦，唯有自渡！

相关推荐

最新文章

猜你喜欢

快捷分类

云服务器 日常运维 在线免费 开源工具 科学上网 开发笔记 区块链 白嫖帮 新视野 人工智能 网赚思路 Python笔记 Php笔记 Java笔记 链知识 币知识 IOS笔记 Android笔记 Mysql C语言笔记 前端开发 R笔记 Go笔记 mybatis笔记 Golang笔记 数据库 市场营销 软件教程 vps Rust笔记 软件使用 经验分享 Stable Diffusion chatgpt Midjourney 操作系统 Photoscape 加密货币 挖矿 Coze Meta 网络安全 网络运营 开源软件 Github ComfyUI 数字人 Docker笔记 Claude Oracle web3 linux windows mac redis git笔记 nginx kafka maven spring RocketMQ Zabbix ubuntu centos kubesphere ffmpeg jenkins hbase JavaScript笔记 WordPress nginx Hadoop vuejs mongo SQL Server PostgreSQL SQLite ElasticSearch Spark netty zookeeper RabbitMQ ClickHoust cocos2d gradle tomcat Markdown MinIO react Hexo git intellij idea android studio svn C++ spdlog nodejs C WordPress 宝塔面板 vim shell logstash 软件渗透 NeoDB CSS3 HTML Lua笔记 数据算法 嵌入式 debian 红帽RHEL Neo4j