CSS 渐变边框及动画

转载请注明出处,点击此处 查看更多精彩内容

预览效果

用 CSS 实现渐变边框及动画,下面对关键点进行解释说明,查看完整代码及预览效果请 点击这里。

简单说明原理:使用伪元素 ::before 绘制一个渐变色,然后使用伪元素 ::after 绘制背景,使其遮住渐变色的一部分,仅保留边框部分,然后添加旋转动画即可。

DOM 结构

<div class="container"></div>
.container {border-radius: var(--border-radius);overflow: hidden;
}

overflow: hidden 防止内部元素溢出。

渐变背景

使用 ::before 伪元素实现一个径向渐变背景。

.container::before {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: block;width: 150%;padding-bottom: 150%;background: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg,#a853ba 112.5deg,#2a8af6 228.75deg,rgba(42,138,246,0) 360deg);z-index: -1;
}

这里没有直接设置伪元素高度,而是使用 width: 200%; padding-bottom: 200%; 绘制一个正方形,并且尺寸大于父元素,防止动画时背景不能完全覆盖父元素。

渐变边框

使用 ::after 伪元素作为遮罩及背景,遮住 ::before 伪元素使其仅展示出边框区域。

.container::after {content: "";position: absolute;inset: var(--border-size);background: var(--bg-color);border-radius: var(--border-radius);z-index: -1;
}

添加动画

:before 添加旋转动画。

@keyframes rotate {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(-360deg);}
}.container::before {...,animation: rotate 3s linear infinite;
}

边框追逐效果

通过设置分区的渐变背景即可完成边框上多线条相互追逐的炫酷效果。

.container {--border-color: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg, transparent 90deg, transparent 180deg, #2a8af6 180deg, transparent 270deg);
}

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

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

相关文章

J2EE反射

目录 一.什么是反射 用实体类Student做示范 三.反射实例化 四.反射动态方法调用 五.反射读写属性 一.什么是反射 反射java语言中的一种机制&#xff0c;通过这种机制可以动态的实例化对象&#xff0c;读写属性&#xff0c;调用方法 二.类类 Class.forName(完整类名)类名…

16. 存储过程和存储函数

文章目录 1.存储过程和存储函数2.创建和使用存储过程2.1 语法&#xff1a;2.2 第一个存储过程&#xff0c;打印hello world2.3 调用语法2.4 带参数的存储过程2.5 调试存储过程 3.创建和使用存储函数3.1 存储函数定义3.2 存储函数语法&#xff1a;3.3 存储函数案例&#xff1a; …

Mybatis操作数据库执行流程的先后顺序是怎样的?

MyBatis是一个支持普通SQL查询、存储及高级映射的持久层框架&#xff0c;它几乎消除了JDBC的冗余代码。使Java开发人员可以使用面向对象的编程思想来操作数据库。对于MyBatis的工作原理和操作流程的理解&#xff0c;我们先来看下面的工作流程图。 MaBatis的工作流程 在上图中…

为什么弹性内容交付网络是决定网站性能的关键

如今的用户对于所访问网站都对网站有自己的标准&#xff0c;他们期望访问的网站性能良好&#xff0c;具有快速的页面加载时间和易于访问、新鲜且动态的内容&#xff0c;同时他们还希望享受无缝且安全的体验&#xff0c;无需停机或内容访问受到限制。比如微博等平台每次在网络热…

布隆过滤器在海量数据去重验证中应用

布隆过滤器在海量数据去重验证中应用 文章目录 布隆过滤器在海量数据去重验证中应用引子面试结束级方案——从数据库中取新手级方案——利用redis的set数据结构专业级方案——利用布隆过滤器 布隆过滤器基本概念优点缺点布隆过滤器的数据结构布隆过滤器的工作流程布隆过滤器的优…

数据库应用:MySQL备份与恢复

目录 一、理论 1.数据备份 2.完全备份与恢复 3.完全备份与恢复应用 4.增量备份与恢复 5.增量备份与恢复应用 6.使用脚本备份 7.日志管理 二、实验 1.完全备份与恢复 2.增量备份与恢复 3.使用脚本备份 三、问题 1.mysqldump报错 四、总结 一、理论 1.数据备份 …

企业电子招标采购系统源码Spring Cloud + Spring Boot + MybatisPlus + 前后端分离 + 二次开发

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及审…

(ceph)CephFS 文件系统 MDS接口

创建 CephFS 文件系统 MDS 接口 //服务端操作 1&#xff09;在管理节点创建 mds 服务 cd /etc/ceph ceph-deploy mds create node01 node02 node032&#xff09;查看各个节点的 mds 服务 ssh rootnode01 systemctl status ceph-mdsnode01 ssh rootnode02 systemctl status cep…

浙大数据结构第三周之03-树3 Tree Traversals Again

题目详情&#xff1a; An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For example, suppose that when a 6-node binary tree (with the keys numbered from 1 to 6) is traversed, the stack operations are: push(1); push(2)…

怎么对XMind思维导图加密?

在现代社会中&#xff0c;信息安全变得越来越重要。对于那些使用XMind思维导图来组织和管理重要信息的人来说&#xff0c;保护思维导图中的内容免受未经授权的访问变得至关重要。本文将介绍如何加密XMind思维导图&#xff0c;以确保您的信息安全。 什么是XMind思维导图&#x…

【itext7】itext7操作PDF文档之创建PDF文档、加载PDF文档、添加空白页、操作PDF页面、itext中的常见类及其方法

这篇文章&#xff0c;主要介绍itext7操作PDF文档之创建PDF文档、加载PDF文档、添加空白页、操作PDF页面、itext中的常见类及其方法。 目录 一、itext7操作PDF 1.1、itext7介绍 1.2、引入itext-core依赖 1.3、创建PDF文档 1.4、加载PDF文档 1.5、操作PDF页面 1.6、添加空…

什么是从人类反馈中强化学习(RLHF)?

目录 一、什么是RLHF? 二、语言作为强化学习问题 三、用于语言模型的RLHF 四、ChatGPT如何使用RLHF 五、RLHF对语言模型的限制 自从OpenAI公司发布ChatGPT以来&#xff0c;人们对大型语言模型(LLM)的这一重大进步感到兴奋。虽然ChatGPT与其他最先进的大型语言模型大小相同…

数据可视化——根据提供的数据,将数据经过处理后以折线图的形式展现

文章目录 前言处理数据获取数据筛选数据将JSON数据转换为Python数据筛选出横坐标数据和纵坐标数据 根据处理后的数据绘制折线图整体代码展示 前言 前面我们学习了如何使用 pyecharts 模块绘制简单的折线图&#xff0c;那么今天我将为大家分享&#xff0c;如何根据提供的数据将…

【JavaScript 03】语句 变量 变量提升 标识符 注释 区块 作用域 条件语句 循环语句 break continue 标签

JS 语句变量变量提升标识符注释区块条件语句ifif...elseswitch三元运算符 ?: 循环语句whilefordo...whilebreak语句 and continue语句标签 语句 JS程序的执行单位是行&#xff08;line&#xff09; **语句&#xff08;statement&#xff09;**是为了完成特定任务而进行的操作…

STM32(HAL库)驱动SHT30温湿度传感器通过串口进行打印

目录 1、简介 2、CubeMX初始化配置 2.1 基础配置 2.1.1 SYS配置 2.1.2 RCC配置 2.2 软件IIC引脚配置 2.3 串口外设配置 2.4 项目生成 3、KEIL端程序整合 3.1 串口重映射 3.2 SHT30驱动添加 3.3 主函数代 3.4 效果展示 1、简介 本文通过STM32F103C8T6单片机通过HAL库…

【Nginx09】Nginx学习:HTTP核心模块(六)请求头处理

Nginx学习&#xff1a;HTTP核心模块&#xff08;六&#xff09;请求头处理 对于一个 HTTP 应用来说&#xff0c;最重要的其实就是 HTTP 的两个核心功能&#xff0c;一个是请求&#xff0c;一个就是响应。而对于一个 Web 应用服务器来说&#xff0c;响应通常是静态文件或者是动态…

LLM(Large Language Model)大语言模型

涌现&#xff1a; 语言模型够大&#xff0c;训练的语料够多&#xff0c;涌现出推理能力飙升等 常见的大语言模型&#xff1a; GPT-3&#xff08;OpenAI&#xff09;&#xff1a; Generative Pre-trained Transformer 3&#xff08;GPT-3&#xff09;是最著名的LLM之一&#x…

伪3d原理解释 主要是透视投影

当我们将图像投影到一个旋转的表面上时&#xff0c;我们需要考虑以下几个方面&#xff1a; 像素位置的计算&#xff1a;对于每个显示窗口中的像素&#xff0c;我们需要计算它在旋转表面上的位置。在代码中&#xff0c;使用了以下公式来计算旋转表面上的位置&#xff1a; px …

【25】SCI易中期刊推荐——神经网络科学(中科院4区)

💖💖>>>加勒比海带,QQ2479200884<<<💖💖 🍀🍀>>>【YOLO魔法搭配&论文投稿咨询】<<<🍀🍀 ✨✨>>>学习交流 | 温澜潮生 | 合作共赢 | 共同进步<<<✨✨ 📚📚>>>人工智能 | 计算机视觉…

Docker 基本管理与应用

目录 一、Docker介绍 1、docker概述 2、容器优势 3、Docker与虚拟机的区别 4、Docker核心概念 二&#xff1a; 安装 Docker 1、环境准备、安装依赖包 2、 设置阿里云镜像源&#xff0c;安装 Docker-CE并设置为开机自动启动 3、信息查看 ​三&#xff1a;Docker 镜像操作…