css 模拟六发左轮手枪射击动画代码-html代码-BFW代码库

css 模拟六发左轮手枪射击动画代码

代码语言：html

所属分类：动画

代码描述：css 模拟六发左轮手枪射击动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 六发左轮手枪动画</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #1a1a1a;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            user-select: none;
        }

        /* --- 舞台区域 --- */
        #stage {
            position: relative;
            width: 800px;
            height: 500px;
            /* border: 1px dashed #333; Debug only */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* --- 枪支整体容器 --- */
        .gun-wrapper {
            position: relative;
            width: 400px;
            height: 250px;
            transform-origin: 80% 60%; /* 后坐力旋转中心在握把附近 */
            transition: transform 0.1s ease-out;
            z-index: 10;
        }

        /* 后坐力动画类 */
        .recoil-anim {
            animation: recoil 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
        }

        @keyframes recoil {
            0% { transform: rotate(0deg) translateX(0); }
            20% { transform: rotate(-15deg) translateX(-30px); } /* 枪口上扬，枪身后退 */
            100% { transform: rotate(0deg) translateX(0); }
        }

        /* --- 枪身部件设计 (CSS 画图) --- */
        
        /* 枪管 */
        .barrel {
            position: absolute;
            top: 40px;
            left: 0;
            width: 180px;
            height: 35px;
            background: linear-gradient(to bottom, #4a4a4a, #222, #4a4a4a);
            border-radius: 4px 0 0 4px;
  .........完整代码请登录后点击上方下载按钮下载查看