听说你还不会 Tailwind CSS(基础·下篇)

1. 前言

这是基础篇的最后一篇,本篇结束后,将进入到进阶部分。

2. 形变

通过 transform 设置,元素可以进行平移、旋转、缩放、倾斜。

2.1 平移

通过 translate-[x/y]-数值 就能实现 x 轴或 y 轴的平移。

```html

translate
``` * translate-x-10 👉 `transform: translateX(2.5rem);` * translate-y-10 👉 `transform: translateY(2.5rem);`

平移.png

如果想要实现相对于自身的百分比平移: * 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

```

  • top-1/2 👉 top: 50%;
  • left-1/2 👉 left: 50%;
  • translate-x-[-50%], translate-y-[-50%] 👉 transform: translate(-50%, -50%);

结合子绝父相实现元素水平垂直居中.png

对于负值,translate-x-[-50%] 可以方便地写为:-translate-x-[50%]-translate-x-1/2。因此上述代码等价于:

```html

```

2.3 旋转

通过 rotate-数值 来旋转元素。

```html

rotate
``` * rotate-45 👉 `transform: rotate(45deg);`

旋转45度.png

### **2.4 缩放** 通过 `scale-数值` 来缩放元素,例如:50 表示 0.5,75 表示 0.75,以此类推。也可以通过 `scale-[x/y]-数值` 对 x 轴或 y 轴来单独设置缩放比例。 ```html
scale 0.5
scale 0.75
scale 1
scale 1.25
``` * scale-50 👉 `transform: scale(.5);` * scale-75 👉 `transform: scale(.75);` * scale-100 👉 `transform: scale(1);` * scale-125 👉 `transform: scale(1.25);`

缩放.png

### **2.5 倾斜** 通过 `skew-[x/y]-数值` 来倾斜元素。

倾斜.png

## 3. 过渡效果 使用过渡效果可以让元素移动等更加灵动。 ### 3.1 常规使用 ```html

过渡效果.gif

### 3.2 持续时间 持续时间是指这段过渡效果需要多长时间播放完。通过 `duration-数值` 就能设置,单位为 ms:

持续时间.gif

### 3.3 时间函数(速率函数) 通过设置 `ease-*` 来实现不同的时间函数:

时间函数.gif

* ease-in 👉  以低速率开始,然后逐渐加快。 * ease-out 👉  以高速率开始,然后逐渐减慢。 * ease-in 👉  以低速率开始,然后逐渐加快,在结束时在此减慢。 ### 3.4 延迟时间 延迟时间是指等多长时间再触发效果。通过 `delay-数值` 来实现:

延迟时间.gif

## 4. 动画 在 Tailwind CSS 中,提供了可供直接使用的动画。 ### 4.1 animate-spin ```html
...
``` * animate-spin 👉 ```css animation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ```

animate-spin.gif

### 4.2 animate-ping ```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;

animate-ping.gif

4.3 animate-pulse

```html

Loading...

```

  • 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; } } ```

animate-pulse.gif

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); } } ```

animate-bounce.gif

5. 总结

基础篇完结,总体来说还是 CSS 的那些东西,不过在开发效率上确实提高了不少。需要提到的是,没有在 Tailwind CSS 中预定义的内容写了是不会生效的,而且一些容易复用的样式,例如:水平垂直居中等等,如何将它们复用呢?这将是进阶篇的内容。

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值