1. 前言
这是基础篇的最后一篇,本篇结束后,将进入到进阶部分。
- 听说你还不会 Tailwind CSS(基础·上篇)
- 听说你还不会 Tailwind CSS(基础·中篇)
- 听说你还不会 Tailwind CSS(基础·下篇)
- 听说你还不会 Tailwind CSS(进阶·上篇)
2. 形变
通过 transform 设置,元素可以进行平移、旋转、缩放、倾斜。
2.1 平移
通过 translate-[x/y]-数值
就能实现 x 轴或 y 轴的平移。
```html
```
- 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
```
2.3 旋转
通过 rotate-数值
来旋转元素。
```html
```
- 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
```
- 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
```
- 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 中预定义的内容写了是不会生效的,而且一些容易复用的样式,例如:水平垂直居中等等,如何将它们复用呢?这将是进阶篇的内容。