CSS——边框线条动画效果

news2024/12/22 15:58:52

CSS——边框线条动画效果

上次我们实现了边框的线条缩放效果，今天我们来用三种方式完成边框的线条旋转动态效果。

方法一：使用伪元素

这是最普遍、最常用的方法，我们需要为边框所在的元素添加伪元素，然后旋转这个伪元素即可。本节将讲解以下视频的实现过程。

伪元素边框旋转动画效果

<body>
  <main class="main">
    <a href="javascript:;" class="button" style="--border-color:hsl(318, 100%, 57%); --delay-coef:0"><span
        class="button-text">button</span></a>
    <a href="javascript:;" class="button" style="--border-color:hsl(192, 100%, 50%); --delay-coef:1"><span
        class="button-text">button</span></a>
    <a href="javascript:;" class="button" style="--border-color:hsl(120, 86%, 53%); --delay-coef:2"><span
        class="button-text">button</span></a>
  </main>
</body>

首先准备好三个按钮，这里为每个按钮添加了行内样式（使用了自定义属性变量）：style="--border-color:hsl(318, 100%, 57%); --delay-coef:0"，这里--border-color:hsl(318, 100%, 57%);是为了方便设置按钮的颜色，--delay-coef:0是为了设置三个按钮的动画不同步的系数。当然大家也可以选择使用选择器为不同样式的按钮添加这些样式。

 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
 }

 body {
   /* 定义一些颜色，其中 所谓的 --border-color 只是占位，便于知晓这个自定义属性变量 */
   --border-color: hsl(295, 100%, 63%);
   /* 定义按钮内文本的颜色 */
   --font-color: hsl(0, 0%, 100%);
   /* --button-bgc 按钮背景色 */
   --button-bgc: hsl(0, 0%, 0%);
   /* 设置 body 的背景颜色 */
   --body-bgc: hsl(230, 50%, 15%);
   min-height: 100vh;
   /* 接上回说到，为了实现水平和垂直方向上的居中 */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: var(--body-bgc);
 }

 .button {
   display: flex;
   justify-content: center;
   align-items: center;
   text-decoration: none;
   padding: 0.8em 1em;
   background-color: var(--button-bgc);
 }

 /* 为元素添加上边距 */
 .button+.button {
   margin-top: 10rem;
 }
 /* 内部文字 */
 .button-text {
   font-size: 2rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--font-color);
   opacity: 0.6;
 }

这里设置了一些基础的样式，主要是使用了 flex布局 进行了水平和竖直方向的对齐。然后使用相邻兄弟选择器对除了第一个按钮以外的的按钮添加上边距。

接下来，进行伪元素的创建和使用。

 .button::before {
   content: '';
   position: absolute;
   height: 80%;
   width: 150%;
   background-color: var(--border-color);
   animation: animate 3s linear infinite;
 }
 
 @keyframes animate {
   0% {
     transform: rotate(calc(30deg * var(--delay-coef)))
   }

   100% {
     transform: rotate(calc(360deg + 30deg * var(--delay-coef)))
   }
 }

！！！
这里需要注意的点是：在设置关键帧时，这里我为了实现三个伪元素的旋转非同步的效果，在设置关键帧的时候采用了非0的初始旋转角度，有的小伙伴就会问了：”那你直接设置animation-delay: calc( var(--delay-coef) * 0.3s)的样式不就可以了吗，但是这样会导致在页面刚刚加载完成时，动画效果的卡顿。
基础知识扎实的小伙伴可能也想到了另一个办法：将animation-delay设置为负值，这样是可以的，负值的animation-delay会导致动画提前开始，这样当然可行，只是我不喜欢设置为负值（大家可以根据自己喜欢的来）。
这里伪元素的宽高没有很严格的限制，只需要保证其是一个比按钮宽但在旋转时又不完全覆盖整个按钮的长条性。就可以这里我们得到了如下的效果：
在这里插入图片描述

可以看到，这里的伪元素不仅把文字盖住了，而且还超出了按钮的区域。接下来我们逐一解决。

首先为按钮添加 overflow: hidden 属性，这样，就不会超出范围了，那如何使其看起来像一个边框呢？关键点来了：再添加一个伪元素将除了“边框”的剩余区域都遮住。

.button{
	overflow: hidden;
}
.button::after{
	content: "";
	position: absolute;
	background-color: var(--button-bgc);
	inset: 4px;
}

这里使用了 inset属性对内容区域进行了裁剪（参见inset属性），到这里，可能有的小伙伴会发现并没有像目标效果一样,而是出现了像如下的全屏混乱效果（眼见的小伙伴可能在上一步就发现了这个问题）:
在这里插入图片描述
这是因为，我们在设置伪元素时，要为其父元素添加相对定位（一般没有其他需求时是这样），不然伪元素就会寻找其最近的设置祖先定位元素。

.button{
	position:relative;
}

进行如以上补充后如图：
在这里插入图片描述

这里的边框效果看似就完成了，但是我们发现，原来的文字效果被覆盖住了。这里就需要用到层叠上下文的内容了，可以参考 深入理解CSS中的层叠上下文和层叠顺序。这里我们通过设置不同的z-index来改变这一现状。

.button-text{
   position: relative;
   z-index: 1;
}

在这里插入图片描述
接下来我们进行鼠标悬浮时的效果。

.button{
  transition: 0.5s;
}

.button:hover {
  background-color: var(--border-color);
  box-shadow: 0 0 30px var(--border-color),
    0 0 50px var(--border-color);
}

.button:hover::after {
  background-color: var(--border-color);
}

.button:hover>.button-text {
  opacity: 1;
  transition: 0.5s;
}

这里就实现了目标的效果。
在这里插入图片描述

方法二：使用clip-path

上一次实现边框的伸缩动画时，就使用了这个属性。我们通过关键帧改变其属性值就可以实现类似的效果。这里虽然也是使用了伪元素，但是旋转的并不是伪元素本身，所有我把它单独分出来了。这里不过多解释。

clip-path边框线条旋转

源代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>clip-path边框线条旋转</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: hsl(230, 50%, 15%);
    }

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .content {
      position: relative;
      width: 300px;
      height: 150px;
      font-size: 1.5rem;
      padding: 1em;
      background-color: hsl(179, 43%, 79%);
    }

    .content::after,
    .content::before {
      content: "";
      position: absolute;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      border: 5px;
      clip-path: inset(0 0 0 0);
      border: 5px solid hsl(192, 100%, 50%);
      animation: animate 3s linear infinite;
    }

    .content::after {
      animation-delay: -1.5s;
    }


    @keyframes animate {

      0%,
      100% {
        clip-path: inset(0 98% 0 0);
      }

      25% {
        clip-path: inset(0 0 98% 0);
      }

      50% {
        clip-path: inset(0 0 0 98%);
      }

      75% {
        clip-path: inset(98% 0 0 0);
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <p class="content">这是一段文字，下面要使用 clip-path 属性来实现边框的旋转动画</p>
  </div>
</body>

</html>

方法三：使用filter属性

接下来使用 filter属性 实现渐变的边框线条旋转。

filter实现边框渐变线条旋转

我们可以直接地通过border-image属性来设置边框，但是我们并不去转动它，而是通过filter属性为其增加一个滤镜，然后变化这个滤镜即可。hue是色相，0至360deg代表了从红（0deg）到绿（120deg）到蓝（240deg）再回到红的色相变化。我们通过关键帧来实现这样的变化。

.content {
  border: 5px solid;
  border-image: linear-gradient(45deg, hsl(358, 95%, 77%), hsl(43, 95%, 77%), hsl(59, 98%, 95%), hsl(191, 92%, 79%), hsl(197, 95%, 52%), hsl(244, 84%, 76%), hsl(43, 95%, 77%)) 1;
}

@keyframes animate {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

因为这个动画是给整个容器添加的，所以这个容器内的所有颜色（除了 #fff 、#000 以及 transparent）都会受到影响。因此我们可以同时实现背景或文字等的同时渐变。我们这里展示文字渐变——添加以下属性：

.content {
  background: linear-gradient(45deg, #ffadad, #ffd65a, #fdffb6, #9bf6ff, #10c4ff, #bdb2ff, #ffc626);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

效果如下：
在这里插入图片描述

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>filter属性实现边框线条旋转</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      background-color: hsl(230, 50%, 15%);
      align-items: center;
    }

    .content {
      width: 300px;
      font-size: 1.5rem;
      padding: 1em;
      background: linear-gradient(45deg, hsl(358, 95%, 77%), hsl(43, 95%, 77%), hsl(59, 98%, 95%), hsl(191, 92%, 79%), hsl(197, 95%, 52%), hsl(244, 84%, 76%), hsl(43, 95%, 77%));
      background-clip: text;
      -webkit-text-fill-color: transparent;
      border: 5px solid;
      border-image: linear-gradient(45deg, hsl(358, 95%, 77%), hsl(43, 95%, 77%), hsl(59, 98%, 95%), hsl(191, 92%, 79%), hsl(197, 95%, 52%), hsl(244, 84%, 76%), hsl(43, 95%, 77%)) 1;
      animation: animate 3s linear infinite;
    }

    @keyframes animate {
      0% {
        filter: hue-rotate(0deg);
      }

      100% {
        filter: hue-rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <main class="containter">
    <p class="content">这是一段文字，下面要使用 filter 属性来实现边框的旋转动画</p>
  </main>
</body>

</html>

结语

创作不易，感谢大家支持和喜欢，如有错误，恳请指出，希望与大家共同进步。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

OpenMV与STM32通信全面指南

OpenMV与STM32通信全面指南

目录 引言 一、OpenMV和STM32简介 1.1 OpenMV简介 1.2 STM32简介 二、通信协议概述 三、硬件连接 3.1 硬件准备 3.2 引脚连接 四、软件环境搭建 4.1 OpenMV IDE安装 4.2 STM32开发环境 五、UART通信实现 5.1 OpenMV端编程 5.2 STM32端编程 六、SPI通信实现 6.1 …
阅读更多...
【蓝桥杯省赛真题55】Scratch找不同游戏 蓝桥杯scratch图形化编程 中小学生蓝桥杯省赛真题讲解

【蓝桥杯省赛真题55】Scratch找不同游戏 蓝桥杯scratch图形化编程 中小学生蓝桥杯省赛真题讲解

scratch找不同游戏 第十五届青少年蓝桥杯scratch编程选拔赛真题解析 PS&#xff1a;其实这题在选拔赛里面就出现过类似的题目&#xff0c;只是难度提升了一点&#xff0c;具体可以见【蓝桥杯选拔赛真题84】Scratch找不同游戏 第十五届蓝桥杯scratch图形化编程 少儿编程创意编…
阅读更多...
newbie难度——暴力枚举

newbie难度——暴力枚举

newbie难度——暴力枚举 740 - 1743A 给出的样例能够理解&#xff0c;如果有n个数字不能选&#xff0c;要排四个数字&#xff0c;这四个数字只有两个不同&#xff0c;并且这两个相同的会各自出现两次&#xff0c;有6种排列方式&#xff0c;那如果给出小于样例n的数字&#xff…
阅读更多...
电子电路智能设计课程内容是什么？

电子电路智能设计课程内容是什么？

电子电路智能设计课程通常包括一系列内容&#xff0c;旨在教授学生如何使用现代电子设计自动化&#xff08;EDA&#xff09;工具和技术来设计和分析电子电路。 1. 电子设计自动化&#xff08;EDA&#xff09;概述&#xff1a; - EDA的历史和发展 - EDA在电子设计中的作用 - …
阅读更多...
excel统计分析（2）：描述统计工具

excel统计分析（2）：描述统计工具

1.什么是【描述统计】工具 Excel中的描述性统计是指用于汇总和分析数据以更好地了解其特征的工具&#xff0c;方便快速了解数据集的中心趋势、离散程度和形状。 2.excel中添加【数据分析】功能 点击【文件>选项>加载项】&#xff0c;【管理>Excel加载项>转到】&…
阅读更多...
SAP B1 认证考试习题 - 解析版（二）

SAP B1 认证考试习题 - 解析版（二）

前一篇&#xff1a;《SAP B1 认证考试习题 - 解析版&#xff08;一&#xff09;》 题目纯享版合集&#xff1a;《SAP B1 认证考试习题 - 纯享版》 三、采购流程 30. 下列哪个凭证在采购流程中是必须要完成的 A. 采购订单 B. 收货采购订单 C. 应付发票 D. 退货 E. 应付贷…
阅读更多...
Vue项目快速整合WangEditor富文本编辑器

Vue项目快速整合WangEditor富文本编辑器

Vue项目快速整合WangEditor富文本编辑器 一、安装依赖 npm i wangeditor --save //富文本编辑器 npm install highlight.js -S //代码高亮 npm install dompurify vue-dompurify-html // 防xss 库二、app.vue代码案例 已对接图片、视频接口 &#xff0c;具体看如下代码…
阅读更多...
【Spring Cloud】Spring Cloud 概述

【Spring Cloud】Spring Cloud 概述

Spring Cloud 概述 1. 认识微服务1.1 单体架构1.2 集群和分布式架构集群和分布式 1.3 微服务架构分布式架构&微服务架构 1.4 微服务带来的挑战优势挑战 2. 微服务解决⽅案- Spring Cloud2.1 什么是Spring Cloud2.2 Spring Cloud版本Spring Cloud和SpringBoot的关系 2.3 Spr…
阅读更多...
Linux部署RabbitMQ

Linux部署RabbitMQ

目录 一、环境 二、开始安装 1、安装Erlang 2、安装RabbitMQ 3、修改配置文件 先复制覆盖配置文件&#xff0c;根据自己的版本进行路径更改 打开配置文件&#xff0c;53行 去掉注释%%和逗号 4、安装插件并启动服务 web管理界面工具 重新启动 RabbitMQ 服务 查看节点…
阅读更多...
java日志门面之JCL和SLF4J

java日志门面之JCL和SLF4J

文章目录 前言一、JCL1、JCL简介2、快速入门3、 JCL原理 二、SLF4J1、SLF4J简介2、快速入门2.1、输出动态信息2.2、异常信息的处理 3、绑定日志的实现3.1、slf4j实现slf4j-simple和logback3.2、slf4j绑定适配器实现log4j3.2、Slf4j注解 4、桥接旧的日志框架4.1、log4j日志重构为…
阅读更多...
什么是原生IP？

什么是原生IP？

代理IP的各个类型称呼有很多&#xff0c;且它们在网络使用和隐私保护方面扮演着不同的角色。今天将探讨什么是原生IP以及原生IP和住宅IP之间的区别&#xff0c;帮助大家更好地理解这两者的概念和实际应用&#xff0c;并选择适合自己的IP类型。 一、什么是原生IP&#xff1f; 原…
阅读更多...
流程、程序和政策之间的差异

流程、程序和政策之间的差异

流程、程序和政策是公司遵循的指导方针&#xff0c;以确保公司以有效和安全的方式运营。 每个企业都需要它们&#xff0c;但有时可能会让人搞不清一个从哪里开始&#xff0c;另一个从哪里结束。 企业经常混淆它们的用法&#xff0c;或者在真正含义上指错一个。 从高层次来看…
阅读更多...
“数字武当”项目荣获2024年“数据要素×”大赛湖北分赛文化旅游赛道一等奖

“数字武当”项目荣获2024年“数据要素×”大赛湖北分赛文化旅游赛道一等奖

9月26日&#xff0c;由国家数据局、湖北省人民政府指导的首届湖北省数据要素创新大会暨2024年“数据要素”大赛湖北分赛颁奖仪式在湖北武汉举行。由大势智慧联合武当山文化旅游发展集团有限公司参报的武当山“数字武当”项目&#xff0c;荣获文化旅游赛道一等奖。 据悉&#x…
阅读更多...
《Linux从小白到高手》理论篇（三）：vi/vim编辑器和Linux文件处理“三剑客”（sed/grep/awk）

《Linux从小白到高手》理论篇（三）：vi/vim编辑器和Linux文件处理“三剑客”（sed/grep/awk）

List item 本篇介绍vi/vim编辑器和Linux文件处理“三剑客”&#xff08;sed/grep/awk&#xff09;&#xff0c;这5个工具命令可能是Linux最最常用的&#xff0c;而且功能超级强大。 vi/vim vi和vim的基本介绍 所有的 Linux 系统都会内建 vi 文本编辑器。Vim 具有程序编辑的…
阅读更多...
【frp】frp重启、frp启动、frp后台启动、frps dashboard等等

【frp】frp重启、frp启动、frp后台启动、frps dashboard等等

我写的关于frp配置的文章&#xff1a;frp配置 服务端frps 1. 创建服务文件 sudo nano /etc/systemd/system/frps.service2. 添加服务配置 在打开的文件中添加以下内容&#xff1a; [Unit] DescriptionFRPS Server Afternetwork.target[Service] Typesimple ExecStart/root…
阅读更多...
LeetCode[简单] 136. 只出现一次的数字

LeetCode[简单] 136. 只出现一次的数字

给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题&#xff0c;且该算法只使用常量额外空间。 思路 当 A 与 B 不同时&#xff0c;按…
阅读更多...
代理模式简介：静态代理VS与动态代理

代理模式简介：静态代理VS与动态代理

代理模式&#xff1a;静态代理VS动态代理 1、定义2、分类2.1 静态代理2.2 动态代理 3、使用场景4、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 1、定义 代理模式是一种设计模式&#xff0c;通过代理对象控制对目标对象的访问。简而…
阅读更多...
Stable Diffusion 使用详解（13）--- 3D纹理增强

Stable Diffusion 使用详解（13）--- 3D纹理增强

目录 背景 Normal Map 描述 原理 使用心得 例子 描述 原图 参数设置 底模 ​编辑 正负相关性提示词 其他参数 controlnet 效果 还能做点啥 调整 效果 背景 实际上&#xff0c;在stable diffusion 中&#xff0c;你获取发现很多controlnet 其实功能有点类似&…
阅读更多...
【优化】Vite手动分包

【优化】Vite手动分包

前言 每次打包完成后&#xff0c;默认情况下会将第三方库和自己的代码统统打包到一个JS文件中 打包后的 JS 对应一个指纹&#xff0c;当修改了自己的业务代码并重新打包后&#xff0c;还会将第三方库重新打包&#xff0c;继而生成一个新指纹&#xff0c;浏览器发现指纹变了&am…
阅读更多...
从4道入门题目里面看Java和C的差别

从4道入门题目里面看Java和C的差别

目录 1.如何在IDEA进行循环输入 1.1题目概述 1.2循环输入 1.3println和print 2.如何调用数学函数 3.如何生成随机数字 4.字符串比较的方法 4.1错误案例分析 4.3正确比较方法 1.如何在IDEA进行循环输入 1.1题目概述 这个也是牛客上面的一个题目引发的思考&#xff1a;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023