CSS效果展示 | 动画与特效库

CSS魔法师

首页效果库动画教程关于

发现令人惊叹的CSS效果

探索现代网页设计的魔力，轻松复制精美CSS特效与动画

浏览效果库学习教程

效果分类

全部

变换

动画

颜色

阴影

边框

文字

滤镜

热门CSS效果

点击卡片查看详细代码和演示

脉冲动画

动画

脉冲效果

/* 脉冲动画效果 */
.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

详情

悬停晃动

交互

悬停晃动效果（移上来）

/* 悬停晃动效果 */
.shake:hover {
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

详情

渐变背景动画

颜色

渐变背景

/* 渐变背景动画 */
.gradient {
  background: linear-gradient(135deg, #8BC34A, #4CAF50);
  animation: gradientMove 3s ease infinite;
  background-size: 200% 200%;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

详情

弹跳动画

动画

弹跳效果

/* 弹跳动画效果 */
.bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

详情

阴影脉冲

阴影

阴影脉冲效果

/* 阴影脉冲效果 */
.shadow-pulse {
  animation: shadowPulse 2s infinite;
}

@keyframes shadowPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(139, 195, 74, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(139, 195, 74, 0.8);
  }
}

详情

悬停倾斜

变换

悬停倾斜效果（移上来）

/* 悬停倾斜效果 */
.skew:hover {
  transform: skew(-15deg);
  transition: transform 0.3s ease;
}

详情

查看更多效果

效果详情示例

脉冲动画效果

动画缩放过渡

效果演示

基础效果

快速脉冲

慢速脉冲

CSS代码

/* 脉冲动画效果 */
.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

/* 可以通过修改animation-duration改变速度 */
.pulse-fast {
  animation: pulse 1s infinite;
}

.pulse-slow {
  animation: pulse 4s infinite;
}

使用说明

脉冲动画是一种轻柔的大小变化效果，适用于吸引用户注意力的场景，例如：

突出显示重要按钮或元素
表示某个正在处理中的项目
创建节奏感的背景元素

您可以通过修改opacity和transform参数来调整效果的强度。如果需要更快或更慢的动画，只要调整animation-duration即可。

浏览器兼容性

浏览器	Chrome	Firefox	Safari	Edge	IE
版本	43+	16+	9+	12+	不支持

用户评论

李小明

2天前

这个效果非常实用，我已经在几个项目中使用了。希望能看到更多相似的动画效果！

王大猫

5天前

我修改了一下这个动画，让它只影响透明度不改变大小，效果也很赞。感谢分享！

订阅我们的资讯

获取最新的CSS技巧、教程和特效灵感，直接发送到您的邮箱

我们尊重您的隐私，不会发送垃圾邮件

目录导航

CSS效果展示 | 动画与特效库

预览结果：