前端CSS实现卡片抽奖效果
引言
在网页设计中,互动元素能够显著提升用户体验,吸引用户的注意力。其中,卡片抽奖效果常用于营销活动、游戏或娱乐场景,通过随机展示不同的卡片来增加趣味性和参与度。本文将详细介绍如何使用HTML和CSS来实现一个简单的卡片抽奖效果。
技术栈
- HTML:用于构建页面结构。
- CSS:用于样式设计和动画效果。
- JavaScript:用于处理交互逻辑,虽然本文主要聚焦于CSS,但简单的交互逻辑也会涉及。
设计目标
我们的目标是创建一个由多张卡片组成的抽奖区,每张卡片都有不同的背景或图案。点击按钮后,卡片会快速翻转,最终停留在一张随机卡片上,展示出其背面的设计或信息。
HTML 结构
首先,我们需要定义基本的HTML结构。这里我们使用一个按钮触发抽奖,以及一组卡片容器。
Html
1<div class="card-container">
2 <div class="card" data-card="1"></div>
3 <div class="card" data-card="2"></div>
4 <!-- 更多卡片 -->
5</div>
6<button id="spin-button">开始抽奖</button>
CSS 样式
接下来,我们使用CSS来设计卡片的外观和动画效果。
Css
1/* 卡片容器 */
2.card-container {
3 display: flex;
4 justify-content: center;
5 align-items: center;
6 height: 300px; /* 可以根据需要调整 */
7}
8
9/* 卡片基本样式 */
10.card {
11 position: relative;
12 width: 200px;
13 height: 300px;
14 perspective: 1000px; /* 透视效果,使翻转看起来更真实 */
15 transition: transform 1s;
16}
17
18/* 卡片正面 */
19.card-front {
20 position: absolute;
21 width: 100%;
22 height: 100%;
23 backface-visibility: hidden;
24 background-color: #fff;
25 color: #000;
26}
27
28/* 卡片背面 */
29.card-back {
30 position: absolute;
31 width: 100%;
32 height: 100%;
33 backface-visibility: hidden;
34 background-color: #000;
35 color: #fff;
36 transform: rotateY(180deg);
37}
38
39/* 按钮样式 */
40#spin-button {
41 margin-top: 20px;
42 padding: 10px 20px;
43 font-size: 16px;
44 cursor: pointer;
45}
实现翻转动画
为了实现卡片的翻转效果,我们将使用CSS的transform属性,具体是rotateY()函数,来让卡片沿Y轴旋转。
Css
1/* 翻转动画 */
2.card.flipped {
3 transform: rotateY(180deg);
4}
JavaScript 交互
虽然本文主要关注CSS,但是为了完成抽奖功能,我们需要一点JavaScript来处理点击事件和随机选择卡片的逻辑。
Javascript
1document.getElementById('spin-button').addEventListener('click', function() {
2 const cards = document.querySelectorAll('.card');
3 const randomCard = Math.floor(Math.random() * cards.length);
4
5 // 添加翻转类,启动动画
6 cards.forEach(card => card.classList.add('flipped'));
7
8 // 在动画结束后,将其他卡片翻回正面,保留随机选中的卡片背面
9 setTimeout(() => {
10 cards.forEach((card, index) => {
11 if (index !== randomCard) {
12 card.style.transform = 'rotateY(0deg)';
13 } else {
14 card.style.transform = 'rotateY(180deg)';
15 }
16 });
17 }, 1000); // 动画时长为1秒
18});
完善细节
为了让抽奖效果更加吸引人,你可以添加更多细节,比如:
- 为卡片正反面添加不同的背景或图片。
- 使用
@keyframes来创建更复杂的动画效果。 - 调整动画的速度和曲线以获得更流畅的视觉体验。
- 在抽奖过程中加入音效或粒子动画。
结论
通过上述步骤,你已经能够使用HTML、CSS和一点点JavaScript来创建一个基本的卡片抽奖效果。这种效果不仅能够增加网站的互动性和趣味性,还可以应用于各种在线活动,提升用户体验。记得在实际项目中测试和调整代码,以确保在不同设备和浏览器上的兼容性和性能。
相关文章:
前端CSS实现卡片抽奖效果
引言 在网页设计中,互动元素能够显著提升用户体验,吸引用户的注意力。其中,卡片抽奖效果常用于营销活动、游戏或娱乐场景,通过随机展示不同的卡片来增加趣味性和参与度。本文将详细介绍如何使用HTML和CSS来实现一个简单的卡片抽奖…...
Java在for循环中修改集合
前天看到一篇文章什么?for循环也会出问题?,里面涉及到在for循环中修改集合,想起来自己刚入行的时候就碰到过类似的问题,于是复现了一下文章中的问题,并试验了其它在循环中修改集合的方法。 底层原理参考什…...
Java小白入门到实战应用教程-运算符详解
Java小白入门到实战应用教程-运算符 上节回顾 在上节的内容中我们了解了变量和基本数据类型的内容,现在回顾一下上节课的内容。 声明变量的语法为: 数据类型 变量名; 其中在java中一共有8中基本数据类型,分别是:b…...
secureCRT同时在所有已打开窗口执行命令、mac-os下使用的SecureCRT版本 以及 SecureCRT一段时间不操作没有响应的问题
一、secureCRT命令行工具一次性同时在所有已打开窗口执行命令 公司的服务器比较多,最近因为opcache,上线发布后,需要重启所有的WEB服务器上的php。目前使用的jenkins发布,不过账号安全问题,给jenkins的账号权限受限不能…...
增材制造与智能制造关系
在撰写的增材制造技术与装备书籍中有着明确的描述,增材制造是智能制造的典型范例,是智能制造“类”的实例化过程。这种借助于计算机编程面向对象思想的解释可以更全面的理解增材制造和智能制造的关系。增材制造实例具备了智能制造类的属性,智…...
Google Test 学习笔记(简称GTest)
文章目录 一、介绍1.1 介绍1.2 教程 二、使用2.1 基本使用2.1.1 安装GTest (下载和编译)2.1.2 编写测试2.1.3 运行测试2.1.4 高级特性2.1.5 调试和分析 2.2 源码自带测试用例2.3 TEST 使用2.3.1 TestCase的介绍2.3.2 TEST宏demo1demo2 2.3.3 TEST_F宏2.3…...
不可变集合
定义:就是集合中的内容不可以被修改。 如何获取不可变集合? List、Set、Map类中提供的静态方法of可用来获取不可变集合。 特点:一旦创建完成只可以进行查询,不可以增删改。 细节:Map集合中的of方法只能添加10个键值…...
景区AR导航营销系统:技术解决方案与实施效益分析
随着旅游市场的竞争日益激烈,景区需要不断创新以吸引游客。景区 AR 导航将虚拟画面与现实场景相结合,为游客提供了更加直观、生动的导航服务。对于景区而言,这一创新技术无疑是吸引游客目光、提升景区知名度的有力武器。通过独特的 AR 导航体…...
MATLAB的基础知识
matlab的基本小常识 1. 在每行语句后面加上英文分号表示不在命令行窗口显示运行结果。 a 3; a 5 2. 多行注释快捷键,CTRLR。 3. 取消多行注释,CTRLT。 4. 清空工作区的所有变量使用clear。 5. 清空命令行窗口的所有变量使用clc。 6. clc和clear一起使…...
Redis-高级实战案例
文章目录 Redis集群崩溃时如何保证秒杀系统高可用1. 冗余与备份2. 故障检测与自动切换3. 降级策略4. 数据一致性5. 客户端缓存6. 异常处理与通知7. 测试与演练8. 服务降级与回滚Redis主从切换导致库存同步异常以及超卖问题主从切换导致的库存同步异常原因:解决方案:秒杀链路中…...
d3d12.dll 文件缺失如何解决?五种修复丢失问题的方法
d3d12.dll 文件缺失如何解决?它为什么会不见呢?今天,我们将探讨 d3d12.dll 文件的重要性、原因以及丢失时的解决策略。本文将全面介绍 d3d12.dll 文件,并提供五种修复丢失问题的方法。 d3d12.dll文件是什么的详细介绍 d3d12.dll …...
Linux下如何设置系统定时任务
在Linux系统中,用户可以使用cron工具来设置定时任务。cron是一个守护进程,用于在指定的时间间隔执行指定的命令或脚本。下面是在Linux系统中设置系统定时任务的步骤。 使用crontab命令编辑定时任务列表: crontab -e该命令会打开一个文本编辑…...
【React】JSX 实现列表渲染
文章目录 一、基础语法1. 使用 map() 方法2. key 属性的使用 二、常见错误和注意事项1. 忘记使用 key 属性2. key 属性的选择 三、列表渲染的高级用法1. 渲染嵌套列表2. 条件渲染列表项3. 动态生成组件 四、最佳实践 在 React 开发中,列表渲染是一个非常常见的需求。…...
写一个简单的兼容GET/POST请求的登录接口
本文目录 安装JDK17安装或者更新Intelij Idea 2024SpringBoot生成项目压缩包下载maven,idea添加maven写POST接口浏览器访问GET接口PostMan安装及访问POST接口 安装JDK17 参考:https://blog.csdn.net/tiehou/article/details/129575138 安装或者更新Int…...
【好玩的经典游戏】Docker环境下部署赛车小游戏
【好玩的经典游戏】Docker环境下部署赛车小游戏 一、小游戏介绍1.1 小游戏简介1.2 项目预览二、本次实践介绍2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 安装Docker环境3.2 检查Docker服务状态3.3 检查Docker版本3.4 检查docker compose 版本四、构建容器镜像4.1 下…...
物理机 gogs+jenkins+sonarqube 实现CI/CD
一、部署gogs_0.11.91_linux_amd64.tar.gz gogs官网下载:https://dl.gogs.io/ yum -y install mariadb-serversystemctl start mariadbsystemctl enable mariadbuseradd gittar zxvf gogs_0.11.91_linux_amd64.tar.gzcd gogsmysql -u root -p < scripts/mysql.…...
前端表格解析方法
工具类文件 // fileUtils.tsimport { ref } from vue; import * as xlsx from xlsx;interface RowData {[key: string]: any; }export const tableData ref<RowData[]>([]);export async function handleFileSelect(url: string): Promise<void> {try {const res…...
Leetcode 3227. Vowels Game in a String
Leetcode 3227. Vowels Game in a String 1. 解题思路2. 代码实现 题目链接:3227. Vowels Game in a String 1. 解题思路 这一题稍微分析一下之后就会发现,这个游戏有且只有一种情况Bob才能够赢,即原始字符串当中不存在元音字母的情况&…...
树莓派4B从装系统raspbian到vscode远程编程(python)
1、写在前面 前面用的一直是Ubuntu系统,但是遇到一个奇葩的问题: 北通手柄在终端可以正常使用,接收到数据 但在python程序中使用pygame库初始化时总是报错:Invalid device number,检测不到手柄 经过n次重装系统&am…...
vue上传Excel文件并直接点击文件列表进行预览
本文主要内容:用elementui的Upload 组件上传Excel文件,上传后的列表采用xlsx插件实现点击预览表格内容效果。 在项目中可能会有这样的需求,有很多种方法实现。但是不想要跳转外部地址,所以用了xlsx插件来解析表格,并展…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...
基于 TAPD 进行项目管理
起因 自己写了个小工具,仓库用的Github。之前在用markdown进行需求管理,现在随着功能的增加,感觉有点难以管理了,所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD,需要提供一个企业名新建一个项目&#…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent
安全大模型训练计划:基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标:为安全大模型创建高质量、去偏、符合伦理的训练数据集,涵盖安全相关任务(如有害内容检测、隐私保护、道德推理等)。 1.1 数据收集 描…...
redis和redission的区别
Redis 和 Redisson 是两个密切相关但又本质不同的技术,它们扮演着完全不同的角色: Redis: 内存数据库/数据结构存储 本质: 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能: 提供丰…...
