当前位置: 首页 > news >正文

Vue纯CSS实现掷色子

效果图:

在这里插入图片描述

在这里插入图片描述

实现代码

直接利用CSS3动画实现的效果,无js代码。

<template><div class="wrap"><input type="checkbox" id="roll"><label for="roll"><div class="content"></div></label></div></template><script>export default {name: "App",created() {},data(){return{}},methods: {}};</script><style lang="scss" scoped>.wrap {display: flex;width: 100vw;height: 100vh;margin:0;padding:0;justify-content: center;align-items: center;}.content {background: url(./dice.webp);background-position: 0% 100%;width: 366px;height: 366px;animation: roll .2s steps(5,start) infinite;position:relative;}@keyframes roll {/* from {background-position: 0% 100%;} */to {background-position: 100% 100%;}}#roll {display: none;}#roll:checked + label .content {animation-play-state: paused;}.content::before {content:'?';background:rgba(255,255,255,.8);width: inherit;height: inherit;display: flex;justify-content: center;align-items: center;font-size:320px;font-family: Helvetica;backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border-radius: 60px;}#roll:checked +label .content::before{display: none;}</style>

相关文章:

Vue纯CSS实现掷色子

效果图&#xff1a; 实现代码 直接利用CSS3动画实现的效果&#xff0c;无js代码。 <template><div class"wrap"><input type"checkbox" id"roll"><label for"roll"><div class"content"><…...

使用vscode开发uniapp项目常用的辅助插件,提升开发效率

为什么不使用hbuilder开发呢&#xff1f;因为hbuilder对ts和vue3语法支持并不友好&#xff0c;而且代码提示不智能&#xff0c;也不能使用最近很流行的coplit和CodeGeex智能提示&#xff0c;所以就换掉hbulider&#xff0c;使用我们熟悉的vscode开发吧。 第一个&#xff1a;un…...

python脚本监听域名证书过期时间,并将通知消息到钉钉

版本一&#xff1a; 执行脚本带上 --dingtalk-webhook和–domains后指定钉钉token和域名 python3 ssl_spirtime.py --dingtalk-webhook https://oapi.dingtalk.com/robot/send?access_tokenavd345324 --domains www.abc1.com www.abc2.com www.abc3.com脚本如下 #!/usr/bin…...

那些看起来高大上的封装函数

什么 ToGray 只支持3通道图像&#xff0c; 让我看看怎么个事 就这么生硬的加了个判断 好家伙 调用了下opencv &#xff0c;通道数都不判断一下...

go语言 | grpc原理介绍(三)

了解 gRPC 通信模式中的消息流 gRPC 支持四种通信模式&#xff0c;分别是简单 RPC、服务端流式 RPC、客户端流式 RPC 和双向流式 RPC。 简单 RPC 在gRPC中&#xff0c;一个简单的RPC调用遵循请求-响应模型&#xff0c;通常涉及以下几个关键步骤和组件&#xff1a; 请求头&a…...

记一次heapdump泄漏获取服务器权限

文章目录 一、漏洞原因二、漏洞利用三、漏洞进一步利用1、工具下载2、通过关键字查询3、通过配置redis的默认账号和密码进行登录4、添加定时计划任务,进行反弹shell5、成功获取服务器的shell补充四、总结五、免责声明一、漏洞原因 扫描目录发现某个spring框架存在大量泄露信息…...

大疆Livox MID-360安装ROS1/2驱动 Ubuntu20.04

文章目录 一、接线连接二、安装上位机可视化工具三、安装ROS驱动3.1 配置静态IP3.2 安装Livox SDK23.3 安装ROS驱动3.4 驱动 本文介绍如何在Ubuntu20.04中安装大疆Livox MID-360的ROS1/2驱动 一、接线连接 livox航插一分三线&#xff0c;其中航空母头连接激光雷达&#xff0c…...

Android 重启App

要重启 Android 应用程序&#xff0c;可以使用 PendingIntent 和 AlarmManager 来实现。下面是一种实现方式&#xff1a; fun restartApp(context: Context) {val packageManager context.packageManagerval intent packageManager.getLaunchIntentForPackage(context.packa…...

C语言的前置知识:数据量单位、汇编语言和寄存器

数据量单位 位&#xff08;bit&#xff09;是计算机中最小的存储单位&#xff0c;每一位可以存储一个二进制码值的0或1。而字节&#xff08;byte&#xff09;则通常是由八个位组成的一个存储单元。在计算机中&#xff0c;字节是最小的可寻址单位&#xff0c;这意味着 CPU 在使…...

【IDEA】在工具栏设置快速创建包和类的图表

页面效果&#xff1a; 操作步骤&#xff1a; 设置 --> 外观与行为 --> 菜单与工具栏 --> 点击 主工具栏 --> 点击 ---- --> 点击 号 --> 添加操作 主菜单 --> 文件 --> 文件打开操作 --> 打开项目操作 --> 新建 --> 往下找 找到 clas…...

int arrayL = sizeof(array) / sizeof(array[0]);

我有一个四个元素的doublearray&#xff0c;这里我会得到4还是5&#xff1f; 在C或C中&#xff0c;使用 sizeof(array) / sizeof(array[0]) 来计算数组的长度是一种常见的方法。但是&#xff0c;这种方法只适用于在同一作用域中声明的数组&#xff0c;而不适用于函数参数传递的…...

FFmpeg——使用Canvas录制视频尚存问题的解决方案

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…...

css进阶知识点速览

0前言 零基础部分的博客 1选择器进阶 1.1后代选择器 作用&#xff1a;根据html标签的嵌套关系&#xff0c;选择父元素后代中满足条件的元素 选择器语法&#xff1a;选择器1 选择器2 {css} 结果&#xff1a; 在选择器1所找到标签的后代中 注意&#xff1a; 后代包括&#xf…...

P2047 [NOI2007] 社交网络

Portal. 观察到数据范围 n ≤ 100 n\leq 100 n≤100&#xff0c;考虑用 Floyd。 在 Floyd 更新最短路的过程中&#xff0c;如果以当前结点为中转点的路径更新过&#xff0c;那么可以累加答案&#xff1b;否则&#xff0c;更新最短路径并重置答案。 统计答案时&#xff0c;枚…...

线性表的顺序存储

1.创建&#xff1a;实质是对data与length的修改 //定义一个线性表 typedef struct {int data[MaxSize];//存储线性表的元素 int length;//线性表的长度 }SqList; //新建一个表 void create(SqList &l){//传入地址才可以对其值进行改变 printf("请输入线性表的长度&…...

ChinaSoft 论坛巡礼 | 安全攸关软件的智能化开发方法论坛

2023年CCF中国软件大会&#xff08;CCF ChinaSoft 2023&#xff09;由CCF主办&#xff0c;CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办&#xff0c;将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…...

采用XML作为GUI描述语言

设计方案采用XML作为GUI描述语言的机制主要包括以下几个方面: 模型定义:使用XML定义GUI组件的模型,包括组件的名称、类型、属性、事件等。布局管理:使用XML定义GUI组件的布局,包括组件之间的相对位置、大小、对齐方式等。数据绑定:使用XML定义GUI组件的数据绑定方式,包括数据来…...

rust入门基础案例:猜数字游戏

案例出处是《Rust权威指南》&#xff0c;书中有更加详细的解释。从这个例子中&#xff0c;我们可以了解到 rust 的两个操作&#xff1a; 如何从控制台读取用户输入rust 如何生成随机数 代码格式化 编译器可在保存时对代码做格式化处理&#xff0c;底层调用 rustfmt 来实现&a…...

vue-cli5.0.x优雅降级,配置项目兼容旧版浏览器

兼容低版本谷歌浏览器 vue-cli5.0.x脚手架下的&#xff0c;如何降低项目版本以适用于底版本的浏览器。 直接使用默认配置打包部署出来的项目再40&#xff0c;60、70版本的谷歌浏览器跑不起来&#xff0c;蓝屏或者浏览器白屏一般这种情况都需要通过Babel去做转换&#xff0c;我…...

关于RabbitMQ的小总结

问题&#xff1a;消息在转换机无法被路由 发布确认高级作用在生产者发送到转换机&#xff0c;回退消息作用在消息在转换机无法被路由的情况&#xff08;消息无法路由的意思是&#xff0c;消息在转换机没有匹配到对应的队列&#xff09;&#xff0c;进行消息回退&#xff0c;打…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...