我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了，他真的来了~
正文
实现思路
- 可以看到除了基本的静态页面
- 就只有字体跳动这一个亮点了
- 怎样实现文字跳动效果呢？
- 想起来可以通过js来控制每一个文字元素的top，用定时器来让不同的文字元素一次进行top的变化
- 至于top变化为什么会很丝滑，可以用多段的自由落体公式算出来
- 哇，好复杂呀！
- 是的，js实现比较复杂，但是css实现就异常简单了
- 需要有top变化？
- css的
translate来搞定 - 需要依次变化的效果？
- css的
transition-delay来搞定 - 需要丝滑的top变化？
- css的
transition的赛贝尔曲线呀cubic-bezier - 哦，那明白了，看到这里下面其实已经不用看了。。哈哈哈，大家肯定都有腹稿了
但是我还得写下去。。
具体实现
基础html
<body>
<div class="container">
<h1>Please Login</h1>
<form>
<div class="form-control">
<input type="text" required>
<label>Email</label>
</div>
<div class="form-control">
<input type="password" required>
<label>Password</label>
</div>
<button class="btn">Login</button>
<p class="text">Don't have an account? <a href="#">Register</a> </p>
</form>
</div>
<script src="script.js"></script>
</body>
因为要动态控制每个span元素的transition-delay，所以引入了script.js。
其实就像这个demo中的用法一样，如果是固定位数的span，写死也可。
动画css
.form-control input:focus + label span,
.form-control input:valid + label span {
color: lightblue;
transform: translateY(-30px);
}
.form-control label span {
display: inline-block;
font-size: 18px;
min-width: 5px;
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
其他的css都不必再细说了
动画js
const labels = document.querySelectorAll('.form-control label')
labels.forEach(label => {
label.innerHTML = label.innerText
.split('')
.map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
.join('')
})
重点就是transition-delay的设置了
完整代码
总结
- 主要是
transition-delay的用法 cubic-bezier(0.68, -0.55, 0.265, 1.55)赛贝尔曲线可以自己慢慢调试
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
热爱开源，支持开源，拥抱开源！
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐
