让你的网站logo多种动画效果展示

在本文中，我将介绍如何使用 CSS 实现多种动画效果，让你的网站 Logo 更加生动活泼。效果有：从左到右移动、从右到左移动、从顶部到底部移动、从底部到顶部移动，四个简单效果。

预览效果将和CSS代码写在一起，就不分开了，以免搞混乱了

1.从左到右移动

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.logo.left {
  animation: slideInFromLeft 1s ease forwards;
}

这段 CSS 代码将 Logo 从页面左侧移动到原始位置，通过 @keyframes 定义了动画的关键帧，然后通过 .logo.left 类将动画应用于特定的 Logo 元素。

2.从右到左移动

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.logo.right {
  animation: slideInFromRight 1s ease forwards;
}

这段 CSS 代码将 Logo 从页面右侧移动到原始位置。

3.从顶部到底部移动

@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.logo.top {
  animation: slideInFromTop 1s ease forwards;
}

这段 CSS 代码将 Logo 从页面顶部移动到原始位置。

4.从底部到顶部移动

@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.logo.bottom {
  animation: slideInFromBottom 1s ease forwards;
}

最后，这段 CSS 代码将 Logo 从页面底部移动到原始位置。

使用方法：CoreNext主题 - 主题设置 - 插入代码 - 自定义CSS