CSS 开放商店动画

十二月 19, 2023 / Mr.x / 1阅读 / 0评论/ 分类: 创意
CSS 开放商店动画 — 荣小站
前端 CSS SVG动画 CSS3

CSS 开放商店动画

纯 CSS 实现的可爱商店开业动画，SVG 场景配合丰富的 CSS 动画效果。

▼ 鼠标悬停查看猫咪打招呼
Store animation loader We are building your store OPEN
纯 CSS 实现的可爱商店开业动画，SVG 场景配合丰富的 CSS 动画效果。

这是一个精致的 CSS 商店开业动画，展示了完整的商店场景：降落伞投递包裹、云朵飘动、飞机划过天际。当鼠标悬停在商店上时，可爱的小猫还会跟你打招呼！

核心特性

  • SVG 动画：纯 SVG 绘制的商店场景
  • 丰富动画：多种动画效果组合
  • 交互效果：鼠标悬停时小猫打招呼
  • 循环动画：降落伞投递、物品展示循环

完整代码

以下是完整的单文件代码，你可以直接保存为 .html 文件运行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS 开放商店动画</title>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One" rel="stylesheet">
  <style>
    /* 基础样式 */
    .store-container {
      line-height: 0;
      margin: 50px auto;
      width: 50%;
    }
    
    .stroke {
      stroke: #0170bb;
      stroke-width: 5;
      stroke-linejoin: round;
      stroke-miterlimit: 10;
    }
    
    .round-end {
      stroke-linecap: round;
    }
    
    #store {
      animation: fadeIn 0.8s ease-in;
    }
    
    /* 边框动画 */
    .border-animation {
      background-color: white;
      border-radius: 10px;
      position: relative;
    }
    
    .border-animation:after {
      content: "";
      background: linear-gradient(45deg, #ccc 48.9%, #0170bb 49%);
      background-size: 300% 300%;
      border-radius: 10px;
      position: absolute;
      top: -5px;
      left: -5px;
      height: calc(100% + 10px);
      width: calc(100% + 10px);
      z-index: -1;
      animation: borderGradient 8s linear both infinite;
    }
    
    @keyframes borderGradient {
      0%, 100% { background-position: 0% 100%; }
      50% { background-position: 100% 0%; }
    }
    
    @keyframes fadeIn {
      to { opacity: 1; }
    }
    
    /* 浏览器下降动画 */
    #browser {
      transform: translateY(-100%);
      animation: moveDown 1.5s cubic-bezier(0.77, -0.5, 0.3, 1.5) forwards;
    }
    
    @keyframes moveDown {
      from { transform: translate(0, -100%); }
      to { transform: translate(0, 0); }
    }
    
    /* 猫打招呼动画 */
    .cat { transform-origin: 1145px 620px; }
    .cat-shadow { transform-origin: 1115px 625px; }
    
    #store:hover .cat {
      animation: catHi 3s 3s cubic-bezier(0.7, -0.5, 0.3, 1.4);
    }
    
    #store:hover .cat-shadow {
      animation: catShadow 4s 2s cubic-bezier(0.7, -0.5, 0.3, 1.4) alternate;
    }
    
    @keyframes catHi {
      0%, 100% { opacity: 0; transform: scale(0.8); }
      10%, 60% { transform: scale(1); opacity: 1; }
    }
    
    @keyframes catShadow {
      0%, 100% { transform: translate(40px, -35px) scale(0.3); }
      10%, 60% { opacity: 1; transform: translate(-5px, 10px) scale(0.5); }
      60% { opacity: 0; }
    }
    
    /* 降落伞投递动画 */
    .box, .parachute {
      transform-origin: 430px 100px;
      animation: moveBox 14s 4s linear forwards infinite;
    }
    
    @keyframes moveBox {
      0% { opacity: 0; transform: translate(0, -150px) rotate(20deg); }
      15% { opacity: 1; transform: translate(0, 100px) rotate(-15deg); }
      35% { opacity: 1; transform: translate(0, 570px) rotate(0deg); }
      45%, 100% { opacity: 0; transform: translate(0, 570px); }
    }
    
    /* 云朵动画 */
    .cloud { animation: clouds 50s linear backwards infinite; }
    .cloud2 { animation: clouds 40s 40s linear backwards infinite; }
    .plane { animation: clouds 30s linear backwards infinite; }
    
    @keyframes clouds {
      from { transform: translate(-150%, 0); }
      to { transform: translate(150%, 0); }
    }
  </style>
</head>
<body>
  <div class="store-container">
    <div class="border-animation">
      <svg id="store" viewBox="130 0 1230 930">
        <!-- SVG 内容 -->
      </svg>
    </div>
  </div>
</body>
</html>

技术要点

技术点说明
SVG 动画使用 SVG 绘制场景元素
CSS Keyframes定义各种动画关键帧
cubic-bezier自定义缓动函数
transform-origin设置动画旋转中心
:hover 伪类触发交互效果

使用说明

  1. 将完整代码保存为 .html 文件
  2. 用浏览器打开
  3. 观察商店开业动画
  4. 鼠标悬停在商店上，查看小猫打招呼

评论