首页 > 其他分享 >CSS:实现动态流光线条效果/动态流光线条颜色渐变效果

CSS:实现动态流光线条效果/动态流光线条颜色渐变效果

时间:2024-11-04 14:31:06浏览次数:3  
标签:rotate 流光 100% CSS background 动态 transparent 线条

需求分析

需要实现类似下图中的动态流光线条效果:

image

思路

提到这种动态绘制矢量图形的需求,一般会想到使用canvas;由于笔者不太熟悉canvas动画也可以考虑用CSS来实现,这里先记录使用CSS实现此效果的尝试过程:
①实现一条带有静态“流光”效果的边,参考CSS渐变背景;
②实现静态线条的“流光”动画效果,参考纯CSS实现背景颜色渐变动画;
③将以上步骤得到的流光边进行旋转(参考CSS-rotate)、镜像翻转(参考CSS水平翻转和垂直翻转),即可实现与此边同向和逆向的其他流光边效果,同时设置旋转和镜像翻转参考CSS同时设置多个变换效果

参考代码

html

<!-- 顺时针的4条边框 -->
<!-- 边框1:最初实现流光动画效果的线条,顶部左->右流光 -->
<div class="light-line right-top">
  <div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转90度得到,右侧上->下流光 -->
<div class="light-line right-bottom">
  <div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转180度得到,底部右->左流光 -->
<div class="light-line left-bottom">
  <div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转270度得到,左侧下->上流光 -->
<div class="light-line left-top">
  <div class="line-block gradient"></div>
</div>

<!-- 逆时针的4条边框 -->
<!-- 由边框1水平镜像翻转得到,顶部右->左流光 -->
<div class="light-line-r right-top-r">
  <div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转90度、水平镜像翻转得到,右侧下->上流光 -->
<div class="light-line-r right-bottom-r">
  <div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转180度、水平镜像翻转得到,底部左->右流光 -->
<div class="light-line-r left-bottom-r">
  <div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转90度、水平镜像翻转得到,右侧下->上流光 -->
<div class="light-line-r left-top-r">
  <div class="line-block gradient"></div>
</div>

CSS

body {
  background: #2A2A2A;
}

.light-line {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 320px;
  height: 320px;
}

.light-line-r {
  position: absolute;
  top: 20px;
  left: 360px;
  width: 320px;
  height: 320px;
}

/* 渐变流光效果线条,要将横向宽度设置为超过100%的值,否则无动画效果 */
.line-block {
  position: relative;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    -90deg, 
    #FFEFCA 1%, #FFBB1F 4%, transparent 12%, transparent 16%, 
    #FFEFCA 16%, #FFBB1F 19%, transparent 27%, transparent 33%, 
    #FFEFCA 33%, #FFBB1F 36%, transparent 44%, transparent 50%, 
    #FFEFCA 50%, #FFBB1F 53%, transparent 61%, transparent 66%, 
    #FFEFCA 66%, #FFBB1F 69%, transparent 77%, transparent 84%, 
    #FFEFCA 84%, #FFBB1F 87%, transparent 95%, transparent 100%
  );  
  background-size: 200% 100%;
}

/* 指定使用Gradient动画,5s完成一次动画,匀速,无限循环 */
.gradient {
  animation: Gradient 5s linear infinite;
  -webkit-animation: Gradient 5s linear infinite;
  -moz-animation: Gradient 5s linear infinite;
}

/* 定义Gradient动画效果:初始时显示最右端,结束时显示最左端(向右滚动) */
@keyframes Gradient {
  0% {
    background-position: 100% 100%;
    }
  100% {
    background-position: 0% 100%;
  }
}

/* 兼容写法.. */
@-webkit-keyframes Gradient {
  0% {
    background-position: 100% 100%;
    }
  100% {
    background-position: 0% 100%;
  }
}
 
/* 兼容写法.. */
@-moz-keyframes Gradient {
  0% {
    background-position: 100% 100%;
    }
  100% {
    background-position: 0% 100%;
  }
}


.right-top {
  transform: rotate(0deg);
}

.right-bottom {
  transform: rotate(90deg);
}

.left-bottom {
  transform: rotate(180deg);
}

.left-top {
  transform: rotate(270deg);
}


.right-top-r {
  transform: rotate(0deg) rotateY(180deg);
}

.right-bottom-r {
  transform: rotate(90deg) rotateY(180deg);
}

.left-bottom-r {
  transform: rotate(180deg) rotateY(180deg);
}

.left-top-r {
  transform: rotate(270deg) rotateY(180deg);
}

标签:rotate,流光,100%,CSS,background,动态,transparent,线条
From: https://www.cnblogs.com/guozhiqiang/p/18525181

相关文章

  • 硬币游戏赢家 | 动态规划
    描述A和B两人玩硬币游戏。开始共有n个硬币。给定两个数字x和y。在每一步中玩家可以选择x、y或1个硬币。A总是开始比赛。选择最后一枚硬币的玩家获胜。对于给定的n值,假设游戏双方都会按最优的方式选择硬币,判断A是否能赢得游戏。用动态规划求解该问题。输入输入一个整数t表示......
  • 探索AI驱动Web开发动态UI
    背景在快速发展的网络开发领域,人工智能(AI)正在为创造力和效率的新水平铺平道路。本文将深入探讨OpenAI强大的API、Node.js的灵活性以及创建动态用户界面的可能性之间令人兴奋的协同作用。通过研究这些技术如何协同工作,我们将揭示它们如何改变我们的网络开发和用户界面开发方法......
  • FastAPI 路径参数详解:动态路径与数据校验的灵活实现
    FastAPI路径参数详解:动态路径与数据校验的灵活实现本文全面介绍了在FastAPI中使用路径参数的技巧和实现方式。路径参数允许API动态响应不同路径中的请求信息,结合URL(UniformResourceLocator)和URI(UniformResourceIdentifier)进行资源定位和标识。URL是指资源的完......
  • 静态和动态结构体命名方式和区别
    静态和动态结构体命名方式和区别:静态结构体:在定义结构体时,直接在结构体中定义一个固定大小的数组来存储元素。命名方式通常为 struct结构体名。优点是简单,直接,适用于已知数据量大小且不会改变的情况。缺点是灵活性差,因为数组大小固定,不能动态扩展或收缩。动态结构体:在......
  • 【笔记】动态规划
    前言动态规划(DynamicProgramming)是c++算法学习当中十分重要而变化灵活的一部分分支,这种算法是通过递推的方式从而达到求出最优解的目的。动态规划基本原理能用动态规划解决的问题,需要满足三个条件:最优子结构,无后效性和子问题重叠。最优子结构:每个子问题的解是其本身的最优......
  • 「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用
    在鸿蒙应用中,Canvas组件可以实现丰富的动态效果,适合用于动画和实时更新的场景。本篇将介绍如何在Canvas中实现动画循环、动态进度条、旋转和缩放动画,以及性能优化策略。关键词Canvas组件动态绘制动画效果动态进度条旋转和缩放性能优化一、使用定时器实现动......
  • 易语言模拟真人动态生成鼠标滑动路径
    一.简介鼠标轨迹算法是一种模拟人类鼠标操作的程序,它能够模拟出自然而真实的鼠标移动路径。鼠标轨迹算法的底层实现采用C/C++语言,原因在于C/C++提供了高性能的执行能力和直接访问操作系统底层资源的能力。鼠标轨迹算法具有以下优势:模拟人工轨迹:算法能够模拟出非贝塞尔曲线的......
  • Python模拟真人动态生成鼠标滑动路径
    一.简介鼠标轨迹算法是一种模拟人类鼠标操作的程序,它能够模拟出自然而真实的鼠标移动路径。鼠标轨迹算法的底层实现采用C/C++语言,原因在于C/C++提供了高性能的执行能力和直接访问操作系统底层资源的能力。鼠标轨迹算法具有以下优势:模拟人工轨迹:算法能够模拟出非贝塞尔曲线的......
  • 猿人学web端爬虫攻防大赛赛题第2题——动态cookie
    题目网址:https://match.yuanrenxue.cn/match/2解题步骤看触发的数据包。在请求头中的cookie字段中m变量的值一看就是加密过的。看Initiator模块中的request。点进去,打断点。我们只能在响应内容中看到页面数据,但是关于m的加密却是没有看到。刷新界面,出现如下画面......