<div class="ms-52 my-10 text-5xl font-extrabold"> <span class="animate-pulse bg-gradient-to-r from-pink-500 via-green-500 to-violet-500 bg-clip-text text-transparent"> Tailwind CSS Animation </span> </div>
<!-- 堆代码 duidaima.com --> <div class="mx-auto mt-10 w-full max-w-sm rounded-md border border-gray-300 p-4"> <div class="animate-pulse space-x-4"> <div class="grid"> <div class="flex"> <div class="w-10 rounded-full bg-slate-200"></div> <div class="ms-4 w-full space-y-6"> <div class="h-2 rounded bg-slate-200"></div> <div class="space-y-3"> <div class="grid grid-cols-3 gap-4"> <div class="col-span-2 h-2 rounded bg-slate-200"></div> <div class="col-span-1 h-2 rounded bg-slate-200"></div> </div> <div class="h-2 rounded bg-slate-200"></div> </div> </div> </div> <div class="mt-5 space-y-6 py-1"> <div class="h-2 rounded bg-slate-200"></div> <div class="space-y-3"> <div class="grid grid-cols-3 gap-4"> <div class="col-span-2 h-2 rounded bg-slate-200"></div> <div class="col-span-1 h-2 rounded bg-slate-200"></div> </div> <div class="h-2 rounded bg-slate-200"></div> </div> <div class="h-2 rounded bg-slate-200"></div> </div> </div> </div> </div>
<div class="my-40 flex"> <div class="relative mx-auto h-28 w-28 animate-spin rounded-full border-2 p-4"> <span class="absolute right-5 top-2 flex h-3 w-3"> <span class="bg-white-500 relative inline-flex h-3 w-3 rounded-full bg-gray-500"> </span> </span> </div> </div>
<div class="my-40 flex"> <div class="relative mx-auto h-10 w-10 animate-bounce"> <div class="mx-auto h-16 w-16 animate-pulse rounded-full bg-gray-400"></div> <span class="absolute flex h-5 w-5 animate-spin"> <span class="h-4 w-4 rounded-full bg-gray-400"> </span> </span> </div> </div>
<div class="my-40 flex"> <div class="mx-auto h-20 w-20 animate-spin rounded-3xl p-6 outline-dotted outline-2 outline-gray-500"></div> </div>
上面的代码片段有一个应用旋转动画效果到内部 animate-spin 的类。 rounded-3xl 类将内部 div 的角落变圆,创造出更圆润的形状。 outline-dotted , outline-2 和 outline-gray-500 类将内部 div 应用了一个宽度为2个单位的虚线灰色轮廓。
<div class="my-40 flex"> <div class="relative mx-auto h-10 w-10"> <div class="relative mx-auto ms-5 h-24 w-24 animate-bounce rounded-full border-2"> <div class="absolute bottom-0 right-10"> <div class="relative h-40 animate-bounce"> <div class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-black"></div> </div> </div> </div> </div> </div>
<div class="my-40 flex"> <div class="relative mx-auto mt-5 animate-[propel_5s_infinite]"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" class="h-16 w-16"> <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" /> </svg> </div> </div>现在,在你的tailwind.config.js文件中添加关键帧以实现对象的动画效果。根据你的需求进行修改。
module.exports = { content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], theme: { extend: { keyframes: { propel: { '0%': { transform: 'translateX(0)' }, '20%': { transform: 'translateX(25%)' }, '40%': { transform: 'translateX(-25%)' }, '60%': { transform: 'translateX(25%)' }, '100%': { transform: 'translateX(-25%)' }, }, }, }, }, plugins: [], }
<div class="my-40 flex"> <div class="relative mx-auto h-28 w-28 animate-[displace_5s_infinite] border border-red-200"> <div class="h-14 animate-[flip_5s_infinite] bg-red-100"></div> </div> </div>现在,在你的tailwind.config.js文件中添加关键帧以动画化对象。
module.exports = { content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], theme: { extend: { keyframes: { displace: { '0%': { transform: 'rotate(0deg)' }, '20%': { transform: 'rotate(-90deg)' }, '40%': { transform: 'rotate(0deg)' }, '60%': { transform: 'rotate(0deg)' }, '80%': { transform: 'rotate(90deg)' }, '100%': { transform: 'rotate(0deg)' }, }, }, }, }, plugins: [], }