前端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插件来解析表格,并展…...
OpenCV 像素操作—证件照换底色详细原理 C++纯手写实现
文章目录 总体步骤1.RGB转HSV2.找出要换的底色3.取反,黑白颠倒4.将原图像的非背景部分复制到新背景上 完整代码1.C纯手写版2.官方API版本 总体步骤 1.RGB转HSV 为什么一定要转为HSV 颜色空间? 将图像从BGR颜色空间转换为HSV颜色空间是因为HSV颜色空间更…...
tinygrad框架简介;MLX框架简介
目录 tinygrad框架简介 MLX框架简介 LLaMA编辑 Stable Diffusion编辑 tinygrad框架简介 极简主义与易扩展性 tinygrad 的设计理念是极简主义。与 XLA 类比,如果 XLA 是复杂指令集计算 (CISC),那么 tinygrad 就是精简指令集计算 (RISC)。这种简约的设计使得它成为添加…...
服务器重启了之后就卡在某个页面了,花屏,如何解决??
🏆本文收录于《CSDN问答解惑-专业版》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收…...
Hospital 14.6.0全开源医院管理预约系统源码
InfyHMS 具有 60 种功能和 9 种不同类型的用户类型, 他们可以登录系统并根据他们的角色访问他们的数据。 源码下载:https://download.csdn.net/download/m0_66047725/89580674 更多资源下载:关注我。...
C/C++樱花树代码
目录 写在前面 系列文章 C简介 完整代码 代码分析 写在后面 写在前面 C实现精美的樱花树,只需这100行代码! 系列文章 序号目录直达链接1爱心代码https://want595.blog.csdn.net/article/details/1363606842李峋同款跳动的爱心https://want595.b…...
sklearn基础学习
1. 简介 1.1 什么是sklearn sklearn,或者更正式地称为scikit-learn,是一个基于Python的开源机器学习库。它建立在NumPy、SciPy和matplotlib之上,提供了简单而有效的工具用于数据挖掘和数据分析。sklearn支持监督学习和无监督学习算法&#…...
SpringBoot 自动配置原理
一、Condition Condition 是在 Spring 4.0 增加的条件判断功能,通过这个可以功能可以实现选择性的创建 Bean 操 作。 思考: SpringBoot 是如何知道要创建哪个 Bean 的?比如 SpringBoot 是如何知道要创建 RedisTemplate 的? …...
Redisson中RQueue的使用场景附一个异步的例子
RQueue 是一个基于 Redis 的分布式作业队列系统,它允许开发者在 Ruby 应用程序中实现异步任务处理和计划任务调度。由于 Redis 提供了高性能的内存数据结构存储,RQueue 可以快速地存储和检索队列中的任务,这使得它非常适合于高并发和低延迟的…...
SpringMVC 控制层框架-下
五、SpringMVC其他扩展 1. 异常处理机制 1.1 异常处理概念 开发过程中是不可避免地会出现各种异常情况,例如网络连接异常、数据格式异常、空指针异常等等。异常的出现可能导致程序的运行出现问题,甚至直接导致程序崩溃。因此,在开发过程中&a…...
(四)js前端开发中设计模式之工厂方法模式
工厂方法模式,通过对产品类的抽象,使其创建业务主要用于负责创建多类产品的实例 const Java function (content) {this.content content;(function () {let oDiv document.createElement(div)oDiv.innerHTML contentoDiv.style.color greendocument.getElement…...
新版GPT-4omini上线!快!真TM快!
大半夜,OpenAI突然推出了GPT-4o mini版本。 当我看到这条消息时,正准备去睡觉。mini版本质上是GPT-4o模型的精简版本,没有什么革命性的创新,因此我并没有太在意。 结果今天早上一觉醒来发现伴随GPT-4o mini上线,官网和…...
【Unity】RPG2D龙城纷争(十七)敌方常规AI(Normal)的实现
更新日期:2024年7月24日。 项目源码:第五章发布(正式开始游戏逻辑的章节) 索引 简介一、AI_Normal类二、AI调遣策略第一阶段:收集1.提供战场数据收集方法2.收集战场数据三、AI调遣策略第二阶段:评估四、AI调遣策略第三阶段:行动简介 AI_Normal定位为框架自带的最基础的…...
Tracy 小笔记:微信小程序 mpx 雷达图的实现
使用文档: https://www.kancloud.cn/xchhhh/wx-chart/399337 https://github.com/xiaolin3303/wx-charts https://gitee.com/mirrors/wx-charts/#wx-charts 参数说明: https://github.com/xiaolin3303/wx-charts/issues/56 下载 dist 里的 wx-charts-…...
Unity UGUI 之 Input Field
本文仅作学习笔记与交流,不作任何商业用途 本文包括但不限于unity官方手册,唐老狮,麦扣教程知识,引用会标记,如有不足还请斧正 1.Input Field是什么? 给玩家提供输入的输入框 2.重要参数 中英文对照着看…...
SpringBoot接入mongodb例子,并有增删改查功能
1,首先,在pom.xml中添加依赖: <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId></dependency><!--上面这…...
类和对象(三)
目录 一. 构造函数初始化列表 二. 类型转换 三. static成员 四. 友元 五. 内部类 六. 匿名对象 七. 对象拷贝时的编译器优化 一. 构造函数初始化列表 1. 之前我们实现构造函数时,初始化成员变量主要使用函数体内赋值,构造函数初始化还有一种方式&…...
Android SurfaceFlinger——GraphicBuffer初始化(二十九)
在 SurfaceFlinger 中,GraphicBuffer 是一个关键的数据结构,用于封装和管理图形数据的内存缓冲区。它不仅在 SurfaceFlinger 内部使用,也被其他组件如 GPU 驱动、摄像头服务、视频解码器等广泛利用,以实现高效的数据交换和图形渲染。 一、概述 GraphicBuffer 对象封装了一…...
pytest:4种方法实现 - 重复执行用例 - 展示迭代次数
简介:在软件测试中,我们经常需要重复执行测试用例,以确保代码的稳定性和可靠性。在本文中,我们将介绍四种方法来实现重复执行测试用例,并显示当前迭代次数和剩余执行次数。这些方法将帮助你更好地追踪测试执行过程&…...
一文入门SpringSecurity 5
目录 提示 Apache Shiro和Spring Security 认证和授权 RBAC Demo 环境 Controller 引入Spring Security 初探Security原理 认证授权图示编辑 图中涉及的类和接口 流程总结 提示 Spring Security源码的接口名和方法名都很长,看源码的时候要见名知意&am…...
IPython的HTML魔法:%%html_header命令全解析
IPython的HTML魔法:%%html_header命令全解析 在IPython和Jupyter Notebook中,%%html_header是一个魔术命令,它允许用户在Notebook的单元格中添加HTML头部(head)内容。这个功能特别有用,当你需要定制Notebo…...
将SQL中的占位符替换成参数
将SQL中的占位符替换成参数 描述 描述 此方法是将SQL中的${}或#{}替换为直接拼接到SQL中或直接替换为?的形式。具体详情看下面代码。 import java.util.*; import java.util.regex.Matcher; import java.util.regex.Pattern;/*** author HuYu* date 2023-09-21* since 1.0**…...
锁相环 vivado FPGA
原理 同步状态/跟踪状态:相位差在2kπ附近,频率差为0到达上述状态的过程称为捕获过程锁相环的捕获带:delta w的最大值,大于这个值的话就不能捕获鉴相器(PD-phase discriminator):相乘加LPF&…...
英语科技写作 希拉里·格拉斯曼-蒂(英文版)pdf下载
下载链接: 链接1:https://pan.baidu.com 链接2:/s/1fxRUGnlJrKEzQVF6k1GmBA 提取码:b69t 由于是英文版,可能有些看着不太方便,可以在网页版使用以下软件中英文对照着看,看着更舒服,…...
《Dynamic Statistical Learning in Massive Datastreams》论文阅读笔记
论文地址: https://www3.stat.sinica.edu.tw/ss_newpaper/SS-2023-0195_na.pdf 论文题目翻译:《在大规模数据流中的动态统计学习》 核心观点: 动态跟踪和筛选框架(DTS):论文提出了一个在线学习和模型更新的新框架&…...
【数据分享】2008-2022年我国省市县三级的逐日NO2数据(excel\shp格式)
空气质量数据是在我们日常研究中经常使用的数据!之前我们给大家分享了2000-2022年的省市县三级的逐日PM2.5数据、2013-2022年的省市县三级的逐日CO数据和2013-2022年的省市县三级的逐日SO2数据(均可查看之前的文章获悉详情)! 本次…...
JavaEE (1)
web开发概述 所谓web开发,指的是从网页中向后端程序发送请求,与后端程序进行 交互. 流程图如下 Web服务器是指驻留于因特网上某种类型计算机的程序. 可以向浏览器等Web客户端提供文档,也可以放置网站文件,让全世界浏览; 它是一个容器&…...
事务、函数和索引
什么是事务? 事务(Transaction),就是将一组SQL语句放在同一批次内去执行,如果一个SQL语句出错,则该批次内 的所有SQL都将被取消执行。 特点 一个事务中如果有一个数据库操作失败,那么整个事务…...
Android APP 基于RecyclerView框架工程(知识体系积累)
说明:这个简单的基于RecyclerView的框架作用在于自己可以将平时积累的一些有效demo整合起来(比如音视频编解码的、opengles的以及其他也去方向的、随着项目增多,工程量的增加,后期想高效的分析和查找并不容易)…...
【iOS】GCD
参考文章:GCD函数和队列原理探索 之前写项目的时候,进行耗时的网络请求使用GCD处理过异步请求,但对一些概念都很模糊,这次就来系统学习一下GCD相关 相关概念 什么是GCD? Grand Center Dispatch简称GCD,是…...
C语言 | Leetcode C语言题解之第282题给表达式添加运算符
题目: 题解: #define MAX_COUNT 10000 // 解的个数足够大 #define NUM_COUNT 100 // 操作数的个数足够大 long long num[NUM_COUNT] {0};long long calc(char *a) { // 计算表达式a的值// 将数字和符号,入栈memset(num, 0, sizeof(num));in…...