昨天的第三个按钮动态提案:文章传送门
使用了CSS动态的动态的主菜——Animation
。
其实有很多特效,只要能够拆解他的原理,就可以使用Animation达成~
譬如说今天完成的打字/换字特效,乍看好像需要JS才能做到
(等到动画跑完再换文字?还是把三层文字叠在一起?)
但其实只要CSS就可以做到了!
今天主要是跟着这个影片实作的。
在看code之前小小笔记一下CSS的动画~
CSS 架构的动画通常是由浏览器「主执行绪」的另一独立执行绪处理;
代表如果浏览器在主执行绪上执行某一些高成本任务,CSS 架构的动画可能会一直运作,而不被中断。
所以其实可以使用CSS就达成的动态,何乐不为呢?
其实这个动态的组成就是这样而已:
三个部分
处理:
直接看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就可以做到了!
真的是只要有想像力和拆解能力就可以做到很多效果呢~
有任何错误或意见请批评指教
import copy, numpy as np np.random.seed(0) # compu...
SceneDelegate 从 iOS 13 开始,SceneDelegate 承担了 AppDel...
承上一篇,模型训练完成之後的那些Vertex列出评估函数,除了R^2也一并介绍剩下的名词。 MAE ...
上篇说明了 GUI 设计里包含的二个项目:Mockup,以及 Style Guideline。这篇我...
在「Day 5:Hexo 安装完成後的设定密技,并且为 Hexo 换上新布景!」篇章内有提到使用 g...