1. 前言
这是基础篇的最后一篇,本篇结束后,将进入到进阶部分。
2. 形变
通过 transform 设置,元素可以进行平移、旋转、缩放、倾斜。
2.1 平移
通过 translate-[x/y]-数值
就能实现 x 轴或 y 轴的平移。
html
<div class="translate-x-10 translate-y-10 size-20 bg-amber-500">translate</div>
- translate-x-10 👉
transform: translateX(2.5rem);
- translate-y-10 👉
transform: translateY(2.5rem);
如果想要实现相对于自身的百分比平移:
- translate-x-1/2 👉
transform: translateX(50%);
- translate-x-full 👉
transform: translateX(100%);
- translate-y-1/3 👉
transform: translateY(33.333333%);
- translate-y-full 👉
transform: translateY(100%);
2.2 结合子绝父相实现元素水平垂直居中
html
<div class="relative h-40 border-2">
<div
class="absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] size-20 bg-amber-500"
></div>
</div>
- top-1/2 👉
top: 50%;
- left-1/2 👉
left: 50%;
- translate-x-[-50%], translate-y-[-50%] 👉
transform: translate(-50%, -50%);
对于负值,translate-x-[-50%]
可以方便地写为:-translate-x-[50%]
或 -translate-x-1/2
。因此上述代码等价于:
html
<div class="relative h-40 border-2">
<div
class="absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-1/2 size-20 bg-amber-500"
></div>
</div>
2.3 旋转
通过 rotate-数值
来旋转元素。
html
<div class="rotate-45 size-20 bg-lime-500">rotate</div>
- rotate-45 👉
transform: rotate(45deg);
2.4 缩放
通过 scale-数值
来缩放元素,例如:50 表示 0.5,75 表示 0.75,以此类推。也可以通过 scale-[x/y]-数值
对 x 轴或 y 轴来单独设置缩放比例。
html
<div class="scale-50 size-20 bg-rose-300">scale 0.5</div>
<div class="scale-75 size-20 bg-rose-300">scale 0.75</div>
<div class="scale-100 size-20 bg-rose-300">scale 1</div>
<div class="scale-125 size-20 bg-rose-300">scale 1.25</div>
- scale-50 👉
transform: scale(.5);
- scale-75 👉
transform: scale(.75);
- scale-100 👉
transform: scale(1);
- scale-125 👉
transform: scale(1.25);
2.5 倾斜
通过 skew-[x/y]-数值
来倾斜元素。
3. 过渡效果
使用过渡效果可以让元素移动等更加灵动。
3.1 常规使用
html
<div
class="transition size-20 -translate-x-[80%] bg-sky-300 cursor-pointer hover:translate-x-0 hover:bg-sky-500"
></div>
通过给元素添加 transition 类名就相当于添加了以下声明:
css
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
3.2 持续时间
持续时间是指这段过渡效果需要多长时间播放完。通过 duration-数值
就能设置,单位为 ms:
3.3 时间函数(速率函数)
通过设置 ease-*
来实现不同的时间函数:
- ease-in 👉 以低速率开始,然后逐渐加快。
- ease-out 👉 以高速率开始,然后逐渐减慢。
- ease-in 👉 以低速率开始,然后逐渐加快,在结束时在此减慢。
3.4 延迟时间
延迟时间是指等多长时间再触发效果。通过 delay-数值
来实现:
4. 动画
在 Tailwind CSS 中,提供了可供直接使用的动画。
4.1 animate-spin
html
<div class="animate-spin bg-orange-500 size-10 rounded-full">...</div>
- animate-spin 👉
css
animation: spin 1s linear infinite;
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
4.2 animate-ping
html
<div
class="animate-ping bg-teal-500 size-10 rounded-full text-center leading-[40px]"
>
💗
</div>
- animate-ping 👉
css
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
- leading-[40px] 👉
line-height: 40px;
4.3 animate-pulse
html
<div class="animate-pulse bg-gray-500 w-48 h-10 text-center leading-[40px]">
Loading...
</div>
- animate-pulse 👉
css
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
4.4 animate-bounce
html
<div
class="animate-bounce bg-black/50 size-10 rounded-full text-center leading-[40px]"
>
👇
</div>
- animate-bounce 👉
css
animation: bounce 1s infinite;
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
5. 总结
基础篇完结,总体来说还是 CSS 的那些东西,不过在开发效率上确实提高了不少。需要提到的是,没有在 Tailwind CSS 中预定义的内容写了是不会生效的,而且一些容易复用的样式,例如:水平垂直居中等等,如何将它们复用呢?这将是进阶篇的内容。