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

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 中预定义的内容写了是不会生效的,而且一些容易复用的样式,例如:水平垂直居中等等,如何将它们复用呢?这将是进阶篇的内容。

相关推荐
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727577 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架