CSS动画生成器喵～
选择你喜欢的动画效果和参数，生成CSS代码喵～快来让你的网页元素动起来喵～
基本设置
元素类型
div
button
img
span
元素内文本 (可选)
宽度 (px)
高度 (px)
背景颜色
文本颜色 (可选)
圆角半径 (px)
文字对齐
水平对齐
居中
左对齐
右对齐
两端对齐
垂直对齐
居中
顶部对齐
底部对齐
动画设置
动画类型
无动画
淡入淡出
脉冲
旋转
弹跳
抖动
滑动
翻转
动画持续时间 (秒)
动画延迟 (秒)
重复次数
1次
2次
3次
无限循环
缓动函数
线性 (linear)
平滑 (ease)
渐入 (ease-in)
渐出 (ease-out)
渐入渐出 (ease-in-out)
弹性 (cubic-bezier)
高级样式
渐变背景
启用渐变背景
否
是
渐变类型
线性渐变
径向渐变
渐变方向 (线性)
从左到右
从上到下
从左上到右下
从右上到左下
颜色1 停止位置 (%)
50%
渐变颜色 1
渐变颜色 2
阴影
启用阴影
否
是
X偏移量 (px)
Y偏移量 (px)
模糊半径 (px)
阴影颜色
毛玻璃效果 (Backdrop Filter)
启用毛玻璃
否
是
模糊半径 (px)
亮度 (%)
100%
饱和度 (%)
100%
交互效果
悬停效果 (Hover)
启用悬停效果
否
是
悬停背景颜色 (可选)
悬停文本颜色 (可选)
悬停变换
无
放大
上移
旋转
启用悬停阴影
否
是
悬停X偏移 (px)
悬停Y偏移 (px)
悬停模糊 (px)
悬停阴影颜色
过渡效果 (Transition)
启用过渡效果
否
是
过渡属性
所有属性 (all)
背景颜色
变换
阴影
透明度
过渡持续时间 (秒)
过渡缓动函数
平滑 (ease)
线性 (linear)
渐入 (ease-in)
渐出 (ease-out)
渐入渐出 (ease-in-out)
预览
CSS代码
复制
/* 请先生成CSS代码喵～ */
生成CSS代码
重置设置
返回工具箱