#3-打字特效炫起来!(CSS Animation)

昨天的第三个按钮动态提案:文章传送门
http://www.giphy.com/gifs/5oqa7m0GRsSi8wNQgn

使用了CSS动态的动态的主菜——Animation
其实有很多特效,只要能够拆解他的原理,就可以使用Animation达成~

譬如说今天完成的打字/换字特效,乍看好像需要JS才能做到
(等到动画跑完再换文字?还是把三层文字叠在一起?)
但其实只要CSS就可以做到了!

http://www.giphy.com/gifs/cXAe85UQ9AjPM5Kw8b

今天主要是跟着这个影片实作的。
在看code之前小小笔记一下CSS的动画~


CSS 动画比较不吃效能

CSS 架构的动画通常是由浏览器「主执行绪」的另一独立执行绪处理;
代表如果浏览器在主执行绪上执行某一些高成本任务,CSS 架构的动画可能会一直运作,而不被中断。

来源

所以其实可以使用CSS就达成的动态,何乐不为呢?

其实这个动态的组成就是这样而已:

https://ithelp.ithome.com.tw/upload/images/20210918/20140247ICqO18np9o.png

三个部分

  • 静态的文字(I will help you)
  • 动态的文字包(里面有三段叙述)
  • 把静态动态包起来的容器!

处理:

  • 固定容器长宽:不需要的就overflow: hidden,让画面看起来只有一行字
  • 打字效果:动态文字每一段都做一个伪元素,是一个黑框框,盖住字,会一直往右移动,让文字一点一点出现
  • 换字效果:让文字每出现一行之後就往上移动一个单位,就会产生换字效果了~

直接看code &里面的叙述解释吧:


上code!

//html
<div class="container">
  <div class="static-text">I will help you </div>
  <div class="dynamic-text-wrapper">
    <div class="dynamic-text">expand your business</div>
    <div class="dynamic-text">find the right customer</div>
    <div class="dynamic-text">level up your brand</div>
  </div>
</div>

//scss
//处理-1:容器和静态文字的部分 
.container{
  display: flex;
  height: 50px; //
  width: 900px; //这边我有对最长文字的宽
  overflow: hidden; //把其他不需要的地方隐藏
  position: relative;
}

.static-text{
  white-space: nowrap;//文字让他不要换行
}

//处理-2:打字效果
.dynamic-text{
  position: relative; //相对於伪元素而言
  height: 50px;
  margin-left: 10px;
  white-space: nowrap;
  font-weight: bold;
  color: #EDDE5D;

  &:before{
    content: '';
    position: absolute;
    border-left: solid 1px  #EDDE5D;
		//border-left 用来做会闪烁的打字线
    width: 100%;
    height: 100%;
    bottom: 0;
    left:0;
    background: black; //伪元素就是一块黑黑的家伙把其他字遮起来~
    animation: typewriter 4s steps(23) infinite, 
blink 0.5s steps(23) infinite, 
		//animation一次可以放很多个
		//animation的step就是将想要的效果拆解成几步骤的意思
		//这边以最长的文字长度23拆解出来~
		//typewriter 效果就是一直让黑黑的遮布往右边移动
		//blink 效果就是让打字的线|一直闪烁
		
  }
}

@keyframes typewriter{
  40%, 60%{
    left: 100%;
  }
	//40%~60% 让字固定在最长的长度
  100%{
    left: 0;
  }
	//100% 再让所有字消失,好像有人在把字删掉的感觉~
}

@keyframes blink{
  from{border-left: solid 1px  #EDDE5D;}
  to{border-left: solid 1px  transparent;}
}

//处理-3:换字效果

.dynamic-text-wrapper{
  position: relative; //因为要移动
  top: 0px;
  animation: moveup 12s steps(3) infinite,
	//每一行打字设定是4s所以3s需要花费 4*3 =12秒时间移到最後一行
	//因为3行所以这个动画花steps(3)次解决~
}

@keyframes moveup{
  0%{top:0;}
  100%{top: -150px;}
	//每行高度是50px,要让最後一行出现就是50px*3行=150px罗~
}

以上!

第一次看到可以换字效果觉得好炫~网路上查了之後才发现只要CSS就可以做到了!
真的是只要有想像力和拆解能力就可以做到很多效果呢~

今天的code 放这里~

有任何错误或意见请批评指教
/images/emoticon/emoticon37.gif


<<:  登录档改造(三)--因人而异的专业玩法

>>:  img图片标签基本语法

python RNN 实现八位元的二进制数加法运算

import copy, numpy as np np.random.seed(0) # compu...

Day04 UIKit 03 - SceneDelegate

SceneDelegate 从 iOS 13 开始,SceneDelegate 承担了 AppDel...

其他名词解释 | ML#Day23

承上一篇,模型训练完成之後的那些Vertex列出评估函数,除了R^2也一并介绍剩下的名词。 MAE ...

Day 18. UX/UI 设计流程之五:GUI Design (下)

上篇说明了 GUI 设计里包含的二个项目:Mockup,以及 Style Guideline。这篇我...

Day 29:利用 NPM 来安装 Next 布景主题

在「Day 5:Hexo 安装完成後的设定密技,并且为 Hexo 换上新布景!」篇章内有提到使用 g...