CSS3视图过渡动画

概述

网站的主题切换无非就是文字、背景图片或者颜色,我们可以先来看下 Element UI 官网的切换主题的动效:
在这里插入图片描述
PS:Antdesign UI的主题切换动画也是大同小异。

实现的两种方式

CSS 为主

<script setup>
const changeTheme = (e) => {if (document.startViewTransition) {document.startViewTransition(() => {document.documentElement.classList.toggle("dark");});} else {document.documentElement.classList.toggle("dark");}
};onMounted(() => {const target = document.querySelector(".target1");const { x, y } = target.getBoundingClientRect();document.documentElement.style.setProperty("--x", x + "px");document.documentElement.style.setProperty("--y", y + "px");
});
</script>
<style>
::view-transition-old(root) {animation: none;
}
::view-transition-new(root) {mix-blend-mode: normal;animation: clip 1s ease-in;
}@keyframes clip {from {clip-path: circle(0% at var(--x) var(--y));}to {clip-path: circle(100% at var(--x) var(--y));}
}
</style>

<

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/410917.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[数据集][目标检测]电力场景红外图像输电线路绝缘子检测数据集VOC+YOLO格式1846张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1846 标注数量(xml文件个数)&#xff1a;1846 标注数量(txt文件个数)&#xff1a;1846 标注…

2024年新算法-基于SBOA-BP混合神经网络的数据预测(Python代码实现)

在今天的数字化时代&#xff0c;机器学习和人工智能领域的不断发展为数据处理和预测提供了强大的工具。其中&#xff0c;BP神经网络&#xff08;反向传播神经网络&#xff09;作为一种经典的网络模型&#xff0c;因其能够处理复杂的非线性问题而备受关注。然而&#xff0c;传统…

Git 基础使用--权限管理--用户和用户组授权

&#x1f600;前言 本篇博文是关于Git 基础使用–权限管理–用户和用户组授权&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满…

JMeter接口测试:重复请求失败,单独请求成功

针对新增用户接口&#xff0c;反复发送同一请求&#xff0c;一次成功一次失败或失败和成功不定&#xff1b; 考虑&#xff1a;该请求的所需时间可能较长&#xff0c;服务器还未来得及响应或释放资源&#xff0c;便开始执行下一请求&#xff0c;导致报500 服务器异常错误&#x…

如何在小程序中完整显示图片且不变形

在开发小程序时&#xff0c;我们经常需要在界面上展示图片。有时&#xff0c;我们希望图片能够完整显示&#xff0c;不进行任何裁剪或变形。本文将介绍如何在小程序中实现这一需求。 使用<image>组件的mode属性 小程序的<image>组件提供了多种模式来控制图片的显…

错误日志:/usr/bin/ld: cannot find -lmkl_intel_ilp64 -lmkl_core -lmkl_intel_thread

Reference: Cannot find mkl libraries from conda 在使用 LibTorch 时&#xff0c;报了以下错误&#xff1a; 在 share/cmake/Caffe2/public/mkl.cmake 下的cmake&#xff0c;并不能保证能找到MKL&#xff0c;应该是MKL版本更新导致的不通用问题。将文件改成下面写法即可&a…

Level3 — PART 4 — 机器学习算法 — 关联规则

目录 基本概念 评估指标 支持度 置信度 提升度 规则发现 Apriori算法 原理 案例 Python中实现Apriori算法 FP-Growth 案例 Python中实现FP-Growth 模拟题 CDA LEVEL III 模拟题(一) CDA LEVEL III 模拟题(二) Apriori算法是一种经典的关联规则数据…

[数据集][目标检测]玻璃瓶塑料瓶检测数据集VOC+YOLO格式8943张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;8943 标注数量(xml文件个数)&#xff1a;8943 标注数量(txt文件个数)&#xff1a;8943 标注…

ssrf简介

目录 SSRF漏洞 漏洞原理 形成原因 SSRF用途: 怎么找到SSRF漏洞? 漏洞案例 SSRF漏洞 漏洞原理 SSRF(Server-Side Request Forgery:服务器端请求伪造)是——种由仅专构造形成由服务端发起请求的一个安全漏洞。一般情况下&#xff0c;SSRF是要目标网站的内部系统。(因为他是…

初识redis:Zset有序集合

Set作为集合&#xff0c;有两个特点&#xff1a;唯一且无序。 Zset是有序集合&#xff0c;在保证唯一的情况下&#xff0c;是根据什么来排序的呢&#xff1f;排序的规则是什么&#xff1f; Zset中的member引入了一个属性&#xff0c;分数&#xff08;score&#xff09;&#…

NLP从零开始------14.文本中阶序列处理之语言模型(2)

3.2 长短期记忆 梯度消失问题的一个解决方案是使用循环神经网络的变体——长短期记忆( long short- term memory, LSTM)。 长短期记忆的原理是&#xff0c; 在每一步t&#xff0c; 都保存一个隐状态和一个单元状态( cell state) , 通过单元状态来存储长距离信息&#xff0c; 长…

Redis内存淘汰

Redis内存淘汰 文章目录 Redis内存淘汰Redis可以存储多少数据淘汰策略选择哪种淘汰算法LRU什么是LRURedis的近似LRU为什么不直接使用LRU近似的LRU淘汰池的优化LRU优化后的对比 LFU什么是LFU为什么引入LFURedis的LFU策略访问频率衰减频率更新 Redis可以存储多少数据 maxmemory配…

Docker续4:harbar私有仓库管理

一、新建一台docker&#xff08;192.168.1.77&#xff09;&#xff08;用于上篇创建私有镜像后的测试&#xff08;拉取镜像&#xff09;&#xff09; 运行docker安装脚本 [rootlocalhost ~]# vim /etc/docker/daemon.json //编辑配置文件 { "…

uniapp-Vue项目如何实现国际化,实现多语言切换,拒绝多套开发,一步到位,看这篇就够

一 安装 找到自己的项目,输入cmd进入命令行,输入安装命令,点击回车进行下载: npm install vue-i18nnext 下载完将在项目的配置文件中看到: 二 使用 2.1 在项目中创建一个文件夹如:lang 用于存放不同语言的包。这些语言文件通常为JSON格式 2.2 在项目main.js文件中引入并初…

H264编码原理(一)压缩背后的秘密

一、引言 在当今的数字视频世界中&#xff0c;H.264编码技术无疑占据着至关重要的位置。虽然H.264编码原理可能听起来复杂又深奥&#xff0c;但只要深入了解视频的特性&#xff0c;就能明白为什么它需要如此设计。通过利用视频内容的冗余性和人眼的感知特性&#xff0c;H.264能…

后端面试真题整理

面试问题整理 本人主要记录2024年秋招、春招过程中的疑难八股真题&#xff0c;参考来源&#xff1a;牛客网、知乎等。 八股 深拷贝与浅拷贝 浅拷贝&#xff1a; 浅拷贝会在堆上创建一个新的对象&#xff08;区别于引用拷贝的一点&#xff09;&#xff0c;不过&#xff0c;如果…

黑马JavaWeb开发笔记07——Ajax、Axios请求、前后端分离开发介绍、Yapi详细配置步骤

文章目录 前言一、Ajax1. 概述2. 作用3. 同步异步4. 原生Ajax请求&#xff08;了解即可&#xff09;5. Axios&#xff08;重点&#xff09;5.1 基本使用5.2 Axios别名&#xff08;简化书写&#xff09; 二、前后端分离开发1. 介绍1.1 前后台混合开发1.2 前后台分离开发方式&…

linux下一切皆文件,如何理解?

linux下一切皆文件&#xff0c;不管你有没有学过linux&#xff0c;都应该听过这句话&#xff0c;就像java的一切皆对象一样。 今天就来看看它的真面目。 你记住了&#xff0c;只要一个竞争退出它的PCB要被释放文件名&#xff0c;客服表也要被释放。那么&#xff0c;指向这个文件…

使用代理和 Python 高效进行亚马逊数据抓取: 实用指南

文章目录 一、简介二、为什么要抓取亚马逊&#xff1f;三、了解代理3. 1. 搜索亚马逊的代理类型 四、为什么使用 Python&#xff1f;五、设置5. 1. 选择代理5. 2. 设置代理 六、抓取数据七、解析数据八、 结论 一、简介 在现代数字环境中&#xff0c;分析网络流量对于优化网站…

YOLOv10:实时端到端目标检测

摘要 https://arxiv.org/pdf/2405.14458 近年来&#xff0c;YOLO系列模型因其在计算成本与检测性能之间的有效平衡&#xff0c;在实时目标检测领域占据了主导地位。研究人员在YOLO的架构设计、优化目标、数据增强策略等方面进行了探索&#xff0c;并取得了显著进展。然而&…