前端 CSS 经典:边框转圈动画效果

前言:首先我们要知道 css 动画只对数值类的 CSS 属性起作用。要实现边框转圈动画效果,实际就是渐变背景的旋转。但是在以前,渐变背景是不支持动画的。现在我们可以利用浏览器新出的 Houdini API 来实现这个动画效果。Houdini API 特别强大,允许开发者干扰浏览器渲染过程。其中有一个属性@property 允许开发者在样式代码里面,自己定义样式属性。

效果图:

代码实现: 

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>body {background: #000;}.card::before {z-index: -1;filter: blur(20px);}.card::after {content: "";position: absolute;inset: 8px;background: #191c29;border-radius: inherit;}@property --direc {syntax: "<angle>";initial-value: 0deg;inherits: false;}.card {position: relative;width: 200px;height: 400px;margin: 100px auto;--direc: 0deg;color: red;background-image: linear-gradient(var(--direc),#5ddcff,#3c67e3,43%,#4e00c2);animation: rotate 3s linear infinite;}@keyframes rotate {to {--direc: 360deg;}}</style></head><body><div class="card"></div><script></script></body>
</html>

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

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

相关文章

【golang学习之旅】Go程序快速开始 Go程序开发的基本注意事项

系列文章 【golang学习之旅】使用VScode安装配置Go开发环境 【golang学习之旅】报错&#xff1a;a declared but not used 【golang学习之旅】Go 的基本数据类型 【golang学习之旅】深入理解字符串string数据类型 【golang学习之旅】go mod tidy 【golang学习之旅】记录一次 p…

1台UG图形工作站实现5-7人共享使用

随着计算机辅助设计&#xff08;CAD&#xff09;和计算机辅助制造&#xff08;CAM&#xff09;技术的不断发展&#xff0c;UG图形工作站已成为许多行业不可或缺的重要工具。 对于许多中小型企业而言&#xff0c;购买多台高性能的UG图形工作站无疑是一笔巨大的开销&#xff0c;…

拼多多商品全流程自动化采集

拼多多商品-自动化采集 本文简单介绍拼多多商品-全流程自动化采集助手的部分功能。 项目交流—— &#x1f6f0;️威v-讯x-&#xff1a;chaohuo8080 一、产品概述 拼多多商品-全流程自动化采集助手采用自动化技术和智能算法&#xff0c;能够自动完成从商品搜索、信息抓取、数…

朝阳医院2018年销售数据 数据分析与可视化

代码及数据集下载传送门 数据分析与可视化-朝阳医院2018销售数据-ipynbcsv 实践内容 以朝阳医院2018年销售数据为例&#xff0c;目的是了解朝阳医院在2018年里的销售情况&#xff0c;这就需要知道几个业务指标&#xff0c;本次的分析目标是从销售数据中分析出以下业务指标&am…

国产口碑最佳的骨传导耳机有哪些?精选五大高人气骨传导耳机推荐!

作为一名音乐爱好者与耳机评测师&#xff0c;我对骨传导耳机这类独特的音频设备有着深入的了解&#xff0c;身边的朋友们也时常向我咨询关于骨传导耳机的各种问题。大部分都在问“骨传导耳机怎么选&#xff1f;有没有好用的骨传导耳机推荐”&#xff0c;随着骨传导耳机逐渐热门…

vxe-table 列表过滤踩坑_vxe-table筛选

但是这个过滤输入值必须是跟列表的值必须一致才能查到&#xff0c;没做到模糊查询的功能&#xff0c;根据关键字来过滤并没有实现。 下面提供一下具体实现方法&#xff1a;&#xff08;关键字来过滤&#xff09; filterNameMethod({ option, row }) {if (row.name.indexOf(op…

MATLAB直方图有关的函数

histogram Histogram plot画直方图 histcounts 直方图 bin 计数 histcounts是histogram的主要计算函数。 discretize 将数据划分为 bin 或类别 histogram2 画二元直方图 histcounts2 二元直方图 bin 计数 hist和histc过时了。替换不建议使用的 hist 和 histc 实例 hist → \r…

Representation RL:HarmonyDream: Task Harmonization Inside World Models

ICML2024 paper code Intro 基于状态表征的model-based强化学习方法一般需要学习状态转移模型以及奖励模型。现有方法都是将二者联合训练但普遍缺乏对如何平衡二者之间的比重进行研究。本文提出的HarmonyDream便是通过自动调整损失系数来维持任务间的和谐&#xff0c;即在世界…

低投入+高效率的求职招聘小程序源码系统平台版 带完整的安装代码包以及搭建教程部署教程

系统概述 在当今数字化时代&#xff0c;求职招聘领域的竞争日益激烈。传统的求职招聘方式逐渐显露出效率低下、成本高昂等问题。为了满足市场需求&#xff0c;提高求职招聘的效率和便捷性&#xff0c;同时降低企业和求职者的成本&#xff0c;“低投入高效率的求职招聘小程序源…

某全国增值税发票查验平台 接口JS逆向

注意&#xff0c;本文只提供学习的思路&#xff0c;严禁违反法律以及破坏信息系统等行为&#xff0c;本文只提供思路 本文的验证码网址如下&#xff0c;使用base64解码获得 aHR0cHM6Ly9pbnYtdmVyaS5jaGluYXRheC5nb3YuY24v 这个平台功能没什么好说的&#xff0c;就是发票查验&am…

揭秘融资融券中的生命线——维持担保比例

01 通俗讲解融资融券 1、融资融券交易&#xff0c;又称信用交易&#xff0c;是指投资者向证券公司提交保证金 ①在看涨时&#xff0c;从证券公司借入资金低价买入证券再高价卖出&#xff1b;&#xff08;加杠杆&#xff09; ②在看跌时&#xff0c;从证券公司借入证券高价卖…

打开 RAG 对接大模型的黑盒 —— 9 大隐藏问题

前一段时间&#xff0c;各个大模型在争斗&#xff1a;谁能携带更长、更大的上下文 Prompt&#xff0c;比如 Kimi 说 200 万字&#xff0c;阿里通义千问又说自己能达 1000 万字&#xff1b;大家都知道 Prompt 很重要&#xff0c;但是 RAG 和 长的上下文文本携带 是两个不同的技术…

【Python深度学习】——使用Logging记录模型训练过程

【Python深度学习】——使用Logging记录模型训练过程 1. 导入logging库, getLogger()创建日志记录器2. logger.setLevel()设置log级别3. FileHandler()设置日志文件路径4. StreamHandler()将日志输出到控制台5. 其他性质6. 代码示例 1. 导入logging库, getLogger()创建日志记录…

springboot集成官方fastdfs以及fastdfs开启防盗链踩坑

目录 一、fastdfs原理 二、在springboot中使用fastdfs 三、fastdfs开启防盗链功能 四、fastdfs开启token验证踩坑 一、fastdfs原理 FastDFS是一个开源的轻量级分布式文件系统,它通过两个主要角色——跟踪器(Tracker)和存储节点(Storage)——来管理文件。 Tracker 主要…

Python在SQLite中的应用:从入门到进阶

Python在SQLite中的应用&#xff1a;从入门到进阶 Python作为一门高效、灵活的编程语言&#xff0c;广泛应用于各种数据处理和分析任务。而SQLite是一种轻量级的数据库管理系统&#xff0c;特别适合于嵌入式应用和小型项目。在本篇博文中&#xff0c;我们将深入探讨Python在SQ…

【Academy】OS command injection 操作系统命令注入

OS command injection 操作系统命令注入 1. 什么是OS命令注入&#xff1f;2. 注入操作系统命令3. Blind OS命令注入漏洞4. 注入操作系统命令的方法5. 如何防止OS命令注入攻击 1. 什么是OS命令注入&#xff1f; 操作系统命令注入也称为shell注入。它允许攻击者在运行应用程序的…

车载网络安全指南 网络安全框架(二)

返回总目录->返回总目录<- 目录 一、概述 二、网络安全组织管理 三、网络安全活动 四、支撑保障 一、概述 汽车电子系统网络安全活动框架包含汽车电子系统网络安全活动、组织管理以及支持保障。其中,网络安全管理活动是框架的核心,主要指汽车电子系统生命周期各阶段…

Agentic RAG 与图任务编排

一个朴素的 RAG 系统流程是这样的&#xff1a;先由用户提出问题&#xff0c;然后系统基于用户提问进行召回&#xff0c;对召回结果进行重排序&#xff0c;最后拼接提示词后送给 LLM 生成答案。 一部分简单场景下&#xff0c;朴素的 RAG 已经可以满足用户意图明确的场景的要求&a…

无线麦克风推荐哪些品牌,热门领夹无线麦克风哪个好,看本期文章

​在信息爆炸的今天&#xff0c;高品质的无线领夹麦克风能让声音更清晰响亮。技术发展带来多样化选择同时也带来选择困难。根据多年使用经验和行业反馈&#xff0c;我推荐一系列可靠、易用且性价比高的无线领夹麦克风&#xff0c;助你作出明智选择。还要不知道该怎么选无线领夹…

深度学习探索-基础篇-正则化篇

文章目录 一、正则化介绍1.1 正则化的简介1.2 正则化的方法介绍1.3 正则化的用途 二、正则化的详细介绍2.1 L1正则化2.2 L2正则化2.2.1 L2正则化的工作原理2.2.2 如何在训练中应用L2正则化2.2.3 L2正则化的效果 2.3 Weight Decay2.4 Dropout 一、正则化介绍 1.1 正则化的简介 …