石头剪子布动画特效

最新推荐文章于 2025-12-07 15:29:40 发布
原创 最新推荐文章于 2025-12-07 15:29:40 发布 · 817 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石头剪子布动画特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        }
        
        .game-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            text-align: center;
            z-index: 10;
        }
        
        h1 {
            color: white;
            font-size: 3em;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            margin-bottom: 30px;
        }
        
        .choices {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .choice {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: rgba(255,255,255,0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            position: relative;
            overflow: hidden;
        }
        
        .choice:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 25px rgba(0,0,0,0.3);
        }
        
        .choice::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                rgba(255,255,255,0.3),
                rgba(255,255,255,0)
            );
            transform: rotate(45deg);
            animation: shine 3s infinite;
        }
        
        @keyframes shine {
            0% { left: -50%; top: -50%; }
            100% { left: 150%; top: 150%; }
        }
        
        .choice i {
            font-size: 60px;
            color: #333;
        }
        
        .result {
            margin-top: 30px;
            font-size: 1.5em;
            color: white;
            min-height: 50px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        
        .vs {
            font-size: 2em;
            color: white;
            margin: 0 20px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        
        .players {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .player, .computer {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: rgba(255,255,255,0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .player i, .computer i {
            font-size: 80px;
            color: #333;
        }
        
        .computer {
            animation: computerThinking 2s infinite;
        }
        
        @keyframes computerThinking {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .score {
            display: flex;
            justify-content: center;
            gap: 50px;
            margin-bottom: 30px;
            color: white;
            font-size: 1.2em;
        }
        
        .link {
            margin-top: 40px;
        }
        
        .link a {
            color: white;
            text-decoration: none;
            font-size: 1.2em;
            padding: 12px 25px;
            border: 2px solid white;
            border-radius: 30px;
            background: rgba(255,255,255,0.1);
            transition: all 0.3s;
        }
        
        .link a:hover {
            background: rgba(255,255,255,0.3);
            box-shadow: 0 0 15px rgba(255,255,255,0.5);
        }
        
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #f00;
            border-radius: 50%;
            animation: fall 5s linear infinite;
            z-index: 1;
        }
        
        @keyframes fall {
            0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="game-container">
        <h1>石头剪子布</h1>
        
        <div class="score">
            <div>玩家: <span id="player-score">0</span></div>
            <div>电脑: <span id="computer-score">0</span></div>
        </div>
        
        <div class="players">
            <div class="player">
                <i id="player-choice" class="fas fa-question"></i>
            </div>
            <div class="vs">VS</div>
            <div class="computer">
                <i id="computer-choice" class="fas fa-question"></i>
            </div>
        </div>
        
        <div class="result" id="result">请选择你的出拳</div>
        
        <div class="choices">
            <div class="choice" data-choice="rock">
                <i class="fas fa-hand-rock"></i>
            </div>
            <div class="choice" data-choice="paper">
                <i class="fas fa-hand-paper"></i>
            </div>
            <div class="choice" data-choice="scissors">
                <i class="fas fa-hand-scissors"></i>
            </div>
        </div>
        
        <div class="link">
            <a href="http://gonglve.100haofu.com" target="_blank">查看游戏攻略</a>
        </div>
    </div>

    <script>
        // 游戏变量
        let playerScore = 0;
        let computerScore = 0;
        const choices = ['rock', 'paper', 'scissors'];
        const choiceIcons = {
            rock: 'fas fa-hand-rock',
            paper: 'fas fa-hand-paper',
            scissors: 'fas fa-hand-scissors'
        };
        
        // 获取DOM元素
        const playerChoiceEl = document.getElementById('player-choice');
        const computerChoiceEl = document.getElementById('computer-choice');
        const resultEl = document.getElementById('result');
        const playerScoreEl = document.getElementById('player-score');
        const computerScoreEl = document.getElementById('computer-score');
        const choiceButtons = document.querySelectorAll('.choice');
        
        // 电脑随机选择
        function computerPlay() {
            const randomIndex = Math.floor(Math.random() * choices.length);
            return choices[randomIndex];
        }
        
        // 判断胜负
        function playRound(playerSelection, computerSelection) {
            if (playerSelection === computerSelection) {
                return 'draw';
            }
            
            if (
                (playerSelection === 'rock' && computerSelection === 'scissors') ||
                (playerSelection === 'paper' && computerSelection === 'rock') ||
                (playerSelection === 'scissors' && computerSelection === 'paper')
            ) {
                return 'win';
            } else {
                return 'lose';
            }
        }
        
        // 更新界面
        function updateDisplay(playerChoice, computerChoice, result) {
            playerChoiceEl.className = choiceIcons[playerChoice];
            computerChoiceEl.className = choiceIcons[computerChoice];
            
            // 添加动画类
            playerChoiceEl.parentElement.classList.add('pulse');
            computerChoiceEl.parentElement.classList.add('pulse');
            
            // 移除动画类
            setTimeout(() => {
                playerChoiceEl.parentElement.classList.remove('pulse');
                computerChoiceEl.parentElement.classList.remove('pulse');
            }, 500);
            
            // 显示结果
            switch(result) {
                case 'win':
                    resultEl.textContent = '你赢了!';
                    resultEl.style.color = '#4CAF50';
                    playerScore++;
                    createConfetti();
                    break;
                case 'lose':
                    resultEl.textContent = '你输了!';
                    resultEl.style.color = '#F44336';
                    computerScore++;
                    break;
                case 'draw':
                    resultEl.textContent = '平局!';
                    resultEl.styleColor = '#FFC107';
                    break;
            }
            
            // 更新分数
            playerScoreEl.textContent = playerScore;
            computerScoreEl.textContent = computerScore;
        }
        
        // 创建彩色纸屑效果
        function createConfetti() {
            const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
            
            for (let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.animationDuration = (Math.random() * 3 + 2) + 's';
                confetti.style.animationDelay = Math.random() * 2 + 's';
                document.body.appendChild(confetti);
                
                // 移除元素
                setTimeout(() => {
                    confetti.remove();
                }, 5000);
            }
        }
        
        // 添加点击事件
        choiceButtons.forEach(button => {
            button.addEventListener('click', () => {
                const playerChoice = button.dataset.choice;
                const computerChoice = computerPlay();
                const result = playRound(playerChoice, computerChoice);
                
                updateDisplay(playerChoice, computerChoice, result);
            });
        });
        
        // 添加键盘事件
        document.addEventListener('keydown', (e) => {
            let playerChoice;
            
            if (e.key === 'r') {
                playerChoice = 'rock';
            } else if (e.key === 'p') {
                playerChoice = 'paper';
            } else if (e.key === 's') {
                playerChoice = 'scissors';
            } else {
                return;
            }
            
            const computerChoice = computerPlay();
            const result = playRound(playerChoice, computerChoice);
            
            updateDisplay(playerChoice, computerChoice, result);
            
            // 高亮显示选择的按钮
            choiceButtons.forEach(button => {
                button.style.transform = button.dataset.choice === playerChoice ? 
                    'translateY(-10px) scale(1.1)' : 
                    'translateY(0) scale(1)';
                
                setTimeout(() => {
                    button.style.transform = 'translateY(0) scale(1)';
                }, 300);
            });
        });
    </script>
</body>
</html>

ziblog
关注
js实现石头剪刀布效果
嗟鸠食桑
01-15 2076
这个游戏主要设计到两点： 首先是胜负运算 由于石头剪刀布是循环性的 石头 杀 剪子 剪子 杀 布 布 杀 石头 石头 杀 剪子 。。。 根据以上特点找出规律，写出算法即可。 让电脑随机 这点比较容易，前面我有写过文章介绍，不明白的童鞋可以去看看。 随机刷屏 其实这个效果不是游戏的关键性，但为了看起来更加互动，好玩，我就给加上了。这里用到了一个取模算法，根据余数去循环显示即可达到效果。 界...
儿童编程教程集锦，总能找到适合小朋友
scratch少儿编程
08-14 2030
Scratch 基础教学|第十一课: Scratch基本组件之运算类功能块详解。Scratch 基础教学|第十二课: Scratch基本组件之数据类功能块详解。Scratch 基础教学|第五课: Scratch基本组件之外观类功能块详解。Scratch 基础教学|第七课: Scratch基本组件之画笔类功能块详解。Scratch 基础教学|第八课: Scratch基本组件之事件类功能块详解。Scratch 基础教学|第十课: Scratch基本组件之侦测类功能块详解。》 ——监控报警系统。
炫酷CSS3倒计时特效
zichenblog的博客
06-28 746
天</div><div class="countdown-label">时</div><div class="countdown-label">分</div><div class="countdown-label">秒炫酷CSS3倒计时特效
分享996个实用的JavaScript特效你要的全在这里
猎人村庄的博客
05-29 5237
链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这996个Js也是花了很多时日！下面是JS的名字，我放了一些图片，所有图片全都放进去是不行的996个图太多，大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围.
分享一些经典的特效效果,希望对大家有帮助
u011927449的博客
06-19 274
html5石头剪子布猜拳手机游戏源码点击》html5石头剪子布猜拳手机游戏源码html5石头剪子布猜拳赢话费手机抽奖游戏源代码，赢了有惊喜哦！不服来战。简洁的律师事务所介绍单页模板https://www.mk2048.com/demo/demo_target_desc_hichbkjcab.html大气宽屏简洁的律师团队介绍网站、法律律师事务所网站响应式模板下载。canvas绘制可爱的鬼魂幽灵动画特效https://www.mk2048.com/demo/demo_target_desc_hichkijbh
分享111个JS特效动画效果，总有一款适合您
zy0412326的专栏
02-05 1160
js特效
国外html游戏发展历史,网页游戏技术发展史 早期到当前10几年历程
weixin_39824033的博客
05-30 1113
前几天偶尔想到一个词“双端融合”，其实也不是什么新概念。恰好今天看人说，今后5年之内，手机是否会代替客户端游戏和网页游戏，成为市场主流。这真是一个好话题。在我看来，网页游戏还有非常大的潜力和空间。 在2000年左右，就已经有了webgame，或者可以说，广义上一切使用网页浏览器并存在多用户交互的游戏，都可以算成webgame。这就使webgame的定义变得非常大，因为“游戏”本身就不好界定，类似石...
scrach
weixin_43445564的博客
11-28 2358
少儿编程Scratch： 少儿编程Scratch第一讲：Scratch完美的初体验 少儿编程Scratch第二讲：奇妙的接球小游戏 少儿编程Scratch第三讲：宇宙大战.枪战游戏 少儿编程Scratch第四讲：射击游戏的制作，克隆的奥秘 少儿编程第五讲:Scratch练习一坐标和移动 少儿编程Scratch第六讲：抽奖游戏之造型、随机和广播 少儿编程Scratch第七讲：字母雨打字练习 少儿编程...
python 学习目录
jialan75的博客
12-28 2542
第1章 搭建开发环境实战 1.1 安装Python环境 范例01-01：在Windows系统中下载并安装Python 范例01-02：在Mac OS系统中下载并安装Python 范例01-03：在Linux系统中下载并安装Python 1.2 安装开发工具 范例01-04：使用Python自带工具IDLE 范例01-05：安装Pycharm 范例01-06：安装Eclipse 范例01-07：安装Visual Studio 2017 1.3 编写并运行Python程序 范例01-08：使用IDLE编写并运行
石头剪子布CSS3动画特效
06-24
【标题】"石头剪子布CSS3动画特效"所涉及的知识点主要集中在Web前端开发领域，特别是关于CSS3的应用和交互设计。CSS3是层叠样式表（Cascading Style Sheets）的第三版规范，它引入了许多新的特性和功能，极大地丰富...
石头剪子布CSS3动画特效.zip
10-15
"石头剪子布CSS3动画特效"是一个实例，展示了如何利用CSS3来创建互动且吸引人的游戏界面。这个压缩包包含了实现这一特效所需的代码资源，特别是文件名为"jiaoben7180"的子文件，可能是关键的HTML、CSS或JavaScript...
石头剪子布CSS3动画特效特效代码
03-20
"石头剪子布CSS3动画特效"利用这些特性，实现了一个互动性强、视觉效果丰富的猜拳小游戏。下面将详细介绍这个特效的实现原理和涉及的CSS3知识点。 1. **CSS3选择器**：为了精确地选取游戏中的元素（如石头、剪刀、...
CSS 面试题
d81895606的博客
12-03 353
API类型特点微任务最常用，立即执行微任务现代API，推荐使用宏任务最小延迟，让出控制权宏任务Node.js特有，I/O后执行伪宏任务下一帧前，适合动画宏任务高优先级，比setTimeout快Node.js特快比微任务还快。
CSS 网页布局：技术基础与实践技巧
csbysj2020的博客
12-02 952
CSS网页布局是前端开发中的核心技术之一，掌握CSS布局的基础知识和实践技巧对于成为一名优秀的前端开发者至关重要。本文介绍了CSS布局的基础知识、布局模型、实践技巧以及响应式布局，希望对读者有所帮助。
【JavaWeb】CSS_三种引入方式
qq_43494013的博客
12-05 426
【JavaWeb】CSS_三种引入方式
DevUI主题系统进阶：CSS-in-JS与暗黑模式无缝切换架构
m0_37613794的博客
12-04 823
本文深入解析了华为DevUI主题系统的混合架构实现方案，提出结合CSS-in-JS灵活性与CSS Variables性能优势的创新设计。核心内容包括：1）主题令牌管理算法，实现语义化到具体值的映射；2）运行时主题切换引擎，支持平滑过渡和状态持久化；3）性能优化策略，包括CSS变量作用域隔离和编译时优化。通过MateChat等大型项目验证，该方案显著提升了主题定制能力，使主题切换时间从300ms降至28ms，样式文件体积减少73%。文章还提供了从原理到实践的全套解决方案，包括React集成、组件适配和常见问题
Day4-6 CSS 进阶 + JS 基础 —— 实现 “交互效果 + 样式复用”（对标职场 “组件化思维” 入门）
2402_87628679的博客
12-04 656
能封装 CSS 通用组件（基础类 + 差异化类），实现样式复用和统一；能通过 JS 实现 “点击、输入” 等基础交互，理解 “事件驱动” 逻辑；掌握 DOM 选择器、事件绑定、DOM 修改的核心用法，能独立完成弹窗、表单验证等常见需求；完成作业：基于本文代码，添加 “注册弹窗”，实现 “点击注册→显示注册表单→验证手机号格式（11 位数字）→提交成功提示”，并提交到 GitHub（练习代码版本管理）。
css使用grid布局实现网格(表格)，动态调整行高，列宽，整体缩放，插入行，列，删除行，列
最新发布
qq_41505416的博客
12-07 223
摘要：本文演示了使用React和CSS Grid布局实现动态表格功能，包括单元格合并/取消合并、行列调整（高度/宽度）、整体缩放、行列插入（任意位置或末尾）、删除行列等操作。表格支持自适应容器，可实现等宽等高显示。通过Grid布局的灵活特性，实现了复杂的表格交互功能，相比传统table布局更具响应性和可控性。视频演示展示了完整的操作流程和效果。（135字）
CSS Animation 详解
Irene1991的博客
12-04 874
本文全面介绍了CSS动画技术，包括基础概念、关键帧规则、动画属性详解及实践示例。主要内容涵盖：1. 核心概念：关键帧(@keyframes)定义动画序列，动画属性控制行为；2. 详细解析8大动画属性及其应用场景；3. 提供加载动画、呼吸灯等5种典型实现示例；4. 性能优化技巧，如使用GPU加速属性；5. 响应式设计方法，包括媒体查询和CSS变量应用；6. 高级技巧如动画事件监听和状态控制；7. 常见问题解决方案和浏览器兼容性处理。文章强调遵循性能最佳实践和可访问性原则，适合开发者系统学习CSS动画技术。
CSS3实现石头剪子布猜拳游戏动画特效
### 石头剪子布CSS3动画特效 石头剪子布CSS3动画特效是一款基于Web的小游戏，它结合了CSS3的动画技术，为用户提供了一种视觉和交互体验。在这个游戏中，用户可以点击界面上的按钮来选择石头、剪子或布，而游戏会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值