探索css渐变-实现饼图-加载图-灯柱

文章目录

      • linear-gradient()线性渐变
      • radial-gradient()圆形渐变
      • conic-gradient() 锥形渐变
      • 锥形渐变实现加载动画
      • 渐变实现发廊灯柱

css的渐变分为三种:
线性渐变:linear-gradient()
圆形渐变:radial-gradient()
锥形渐变:conic-gradient()

下面就这三种渐变分别讨论一下:

linear-gradient()线性渐变

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。是一种特别的<image>数据类型。
基础语法:linear-gradient(角度,颜色);

background: linear-gradient(45deg,red,gold,green,blue);

在这里插入图片描述
默认渐变占比100%,渐变颜色平分100%占比,如果只有两种颜色,就占比各为50%
可以通过设置颜色的断点,更改颜色占比

background: linear-gradient(45deg,red,gold 10%,green 90%,blue);

上面的语法:角度45°,占比(断点):0-10%是红色,10%-90%为黄绿渐变(占比平分),90%-100%为蓝色渐变,渐变的断店可以是负数也可以大于100%
在这里插入图片描述
通过断点控制颜色的占比,如果想要清晰的看到颜色的分割线,只需要将占比调到贴近即可,如:

background: linear-gradient(45deg,red 50%,gold 50%);

在这里插入图片描述
这里的清晰分割线是因为上一个颜色过了后立马衔接下一个颜色所呈现的结果,如果是这么写的
在这里插入图片描述
那么中间50% ~ 70%的就是从上个颜色到下个颜色的过渡色。
在这里插入图片描述
这里有一个注意点,如果是完全贴合的断点可能会出现锯齿
在这里插入图片描述
解决办法是添加1px的颜色过渡即可解决

background: linear-gradient(45deg,red 50%,gold calc(50% + 1px));

需要注意:css渐变本质上是一种特别的<image>数据类型,因此无法使用transition实现过渡效果,也无法使用animation实现动画效果


radial-gradient()圆形渐变

radial-gradient()其实和上面的linear-gradient()是一样的,只要熟悉了linear-gradient()的语法,再总结一些区别基本上就差不多了。

radial-gradient() 为圆形渐变,渐变的效果为从第一个颜色开始,颜色向外扩散。

/*第一个参数半径大小,后面的为颜色*/
 background: radial-gradient(50px,green,gold); 

在这里插入图片描述
渐变如果不设置断点,颜色的占比就是均等的。

需要注意:半径大小的值为百分比时必须是两个参数,值为px时可以是一个参数。

圆形渐变涉及到半径大小和圆点位置,语法如下:
radial-gradient(半径大小 at x轴 y轴 ,颜色1,颜色2);

background: radial-gradient(40px at 20px 50% ,red 20%,blue 70% , green);

在这里插入图片描述
上面案例:半径40pxx20pxy轴移动50%,颜色为红、蓝、绿渐变。


实现按钮点击的颜色覆盖效果
通过radial-gradient() 可以实现按钮点击圆形扩展的动画效果

 <div class="editBtn2">扩展按钮</div>
.editBtn2{
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 6px;
  color: #fff;
  background: #4d90fe radial-gradient(closest-side circle at 50% 50% , #80c342 50%, rgba(128, 195, 66,0) 52%) no-repeat center / 0% 0%;
  transition: background-size 0.2s; /* 通过transition实现数值的过渡,动画时间0.2s  */
  &:active{
    background-size : 600% 600%;  /* 更改xy轴大小为600% */
  }
}

在这里插入图片描述

径向渐变参数说明:
closest-side:结束的边缘形状与容器距离渐变中心点最近的一边相切(圆形)
circle: 圆形 (这里不能使用200px 200px,因为定义渐变结束的形状不能使用px语法,得用circle这种关键字语法,另外,渐变结束的形状默认就是当前元素的形状,如果要定义其他形状必须使用closest-side约束)
at 50% 50%: 径向渐变的圆点在元素中心
第一个颜色:绿色,占比50%
第二个颜色:绿色 完全透明,占比52% 到 100% ,2%抗锯齿实现平滑效果
no-repeat:不平铺
center: 居中 / 大小xy轴分别是0%

上面利用transition实现数值的过渡,动画时间0.2s,点击的时候触发active,背景的在0.2s内放大600%实现过渡效果。

可能有人对closest-side这个属性很模糊,closest-side是用来定义渐变结束的形状

属性说明
closest-side渐变结束的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。
closest-corner渐变结束的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side与 closest-side 相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。
farthest-corner渐变结束的边缘形状与容器距离渐变中心点最远的一个角相交。

radial-gradient()文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/radial-gradient


conic-gradient() 锥形渐变

锥形渐变也就是渐变的颜色变换围绕一个中心点旋转(而不是从中心辐射)
conic-gradient()文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gradient

background: conic-gradient(red, orange, yellow, green, blue);

在这里插入图片描述

锥形渐变可以定义角度和圆点位置,如下:

background: conic-gradient(from 0deg  at 50px 20px , blue,cyan,gold, red);

在这里插入图片描述
定义角度时,前面需要带from如:from xxxdegat后为x轴和y轴的位置。


对锥形渐变色彩做更细致的划分

 background: conic-gradient(from 0deg, blue 10%,cyan 11%,cyan 50%,gold 51%, gold 90%, red 91%);

角度0,从蓝色开始,红色结尾,蓝色0% ~ 10%11% ~ 50%为青色,51% ~ 90%为黄色,红色91% ~ 100%
在这里插入图片描述

锥形渐变实现饼图

.pancake{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #4d90fe 24% , #80c342 0deg 65% , #e94242 0deg);
}

在这里插入图片描述
角度0,中心圆点(默认),蓝色占比0% ~ 24%,绿色占比24% ~ 65%,红色占比65% ~ 100%

锥形渐变实现加载动画

先绘制一个锥形渐变
在这里插入图片描述
在渐变上添加白色的蒙版,挡住中心的部分,形成加载动画的静态效果
在这里插入图片描述
让画面旋转起来即可
在这里插入图片描述

.loadConic{
    width: 80px;
    height: 80px;
    margin: 20px;
    background: conic-gradient(from 0deg ,#2d52a4 , rgba(199, 216, 240,0));
    position: relative;
    border-radius: 50%;
    animation: spinLoad 1s infinite linear;
    &::before{
      content: '';
      width: 80%;
      height: 80%;
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      border-radius: 50%;
      background: #fff;
    }
    @keyframes spinLoad {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
}

渐变实现发廊灯柱

repeating-linear-gradient()为重复渐变
先绘制一个灯柱和灯体
在这里插入图片描述
灯体超出的部分隐藏,灯体添加动画,向上移动
在这里插入图片描述

<div class="repetition">
    <div class="pillar"></div>
</div>
.repetition{
  width: 50px;
  height: 200px;
  border: 1px solid #454545;
  position: relative;
  margin: 50px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 1px 1px 0px 1px #ccc;


  .pillar{
        width: 50px;
        height: 300px;
        position: absolute;
        background: repeating-linear-gradient(45deg,#4d90fe 0 6px , #fff 6px 14px);
        animation: spin 2s infinite linear;
  }
    @keyframes spin {
    from {
      top : 0px;
    }
    to {
      top : -100px
    }
  }
}

案例源码:https://gitee.com/wang_fan_w/css-diary

如果觉得这篇文章对你有帮助,欢迎点赞、收藏、转发哦~

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C#等高级语言运行过程

C#等高级语言运行流程&#xff1a;假设您编写了一个 C# 程序并将其保存在一个称为源代码的文件中。特定于语言的编译器将源代码编译成 MSIL&#xff08;Microsoft 中间语言&#xff09;&#xff0c;也称为 CIL&#xff08;通用中间语言&#xff09;或 IL&#xff08;中间语言&a…

Python基础总结

目录 Python数据容器 list(列表) tuple(元祖) str(字符串) 数据容器(序列)的切片 set(集合) dict(字典、映射) 数据容器对比&#xff1a; Python函数 多个返回值&#xff1a; 函数多种传参&#xff1a; 匿名函数&#xff1a; lambda匿名函数&#xff1a; Python文…

小菜鸟Python历险记:(第四集)

今天写的文章是记录我从零开始学习Python的全过程。在Python中函数是非常重要的&#xff0c;这里也可以称为方法。在前面分享的几篇文章中用到的方法有print(),str(),int().这些都是方法&#xff0c;而除了上面写的这几种内置方法以外&#xff0c;我们也可以自己在程序中自定义…

Java分布式事务(九)

文章目录&#x1f525;XA强一致性分布式事务实战_Atomikos介绍&#x1f525;XA强一致性分布式事务实战_业务说明&#x1f525;XA强一致性分布式事务实战_项目搭建&#x1f525;XA强一致性分布式事务实战_多数据源实现&#x1f525;XA强一致性分布式事务实战_业务层实现&#x1…

JS判断是否为base64字符串如何转换为图片src格式

需求背景 &#xff1a; 如何判断后端给返回的 字符串 是否为 base-64 位 呢 &#xff1f; 以及如果判断为是的话&#xff0c;如何给它进行转换为 img 标签可使用的那种 src 格式 呢 &#xff1f; 1、判断字符串是否为 base64 以下方法&#xff0c;可自行挨个试试&#xff0c;…

蓝桥杯倒计时 | 倒计时20天

作者&#x1f575;️‍♂️&#xff1a;让机器理解语言か 专栏&#x1f387;&#xff1a;蓝桥杯倒计时冲刺 描述&#x1f3a8;&#xff1a;蓝桥杯冲刺阶段&#xff0c;一定要沉住气&#xff0c;一步一个脚印&#xff0c;胜利就在前方&#xff01; 寄语&#x1f493;&#xff1a…

第十四届蓝桥杯三月真题刷题训练——第 16 天

目录 第 1 题&#xff1a;英文字母 问题描述 输入格式 输出格式 样例输入 1 样例输出 1 样例输入 2 样例输出 2 评测用例规模与约定 运行限制 代码&#xff1a; 第 2 题&#xff1a;单词分析 题目描述 输入描述 输出描述 输入输出样例 运行限制 数组代码&…

【MySQL】聚合查询

目录 1、前言 2、插入查询结果 3、聚合查询 3.1 聚合函数 3.1.1 count 3.1.2 sum 3.1.3 avg 3.1.4 max 和 min 4、GROUP BY 子句 5、HAVING 关键字 1、前言 前面的内容已经把基础的增删改查介绍的差不多了&#xff0c;也介绍了表的相关约束&#xff0c; 从本期开始…

C语言实现队列(Push Pop Size Front EmptyBack)

队列是一个重要的数据结构&#xff0c;他的特性是先进先出&#xff0c;所以由于这个特性&#xff0c;队列只有一个入口和一个出口&#xff0c;所以只有push和pop 下面我们看一下他如何实现 首先我们来看一下他的结构体 这里我们看到我们定义了两个结构体&#xff0c;其中一个…

关于多层板,你了解多少?

01 前言 大家好&#xff0c;我是张巧龙。好久没写原创了&#xff0c;记得之前刚接触PCB时&#xff0c;还在用腐蚀单层板&#xff0c;类似这种。 慢慢随着电子产品功能越来越多&#xff0c;产品越来越薄&#xff0c;对PCB设计要求越来越高了&#xff0c;复杂程度也随之增加。因此…

第十四届蓝桥杯三月真题刷题训练——第 17 天

目录 第 1 题&#xff1a;ASC 运行限制 代码&#xff1a; 第 2 题&#xff1a;递增三元组_双指针_long 输出描述 输入输出样例 运行限制 代码&#xff1a; 第 3 题&#xff1a;环境治理 代码&#xff1a; 第 4 题&#xff1a;小球称重 代码&#xff1a; 第 1 题&a…

小白学Pytorch系列--Torch API (7)

小白学Pytorch系列–Torch API (7) Comparison Ops allclose 此函数检查输入和其他是否满足条件&#xff1a; >>> torch.allclose(torch.tensor([10000., 1e-07]), torch.tensor([10000.1, 1e-08])) False >>> torch.allclose(torch.tensor([10000., 1e-…

48天强训 Day1 JavaOj

48天强训 & Day1 & JavaOj 1. 编程题1 - 组队竞赛 组队竞赛_牛客笔试题_牛客网 (nowcoder.com) 1.1 读题 1.2 算法思想基础 我们应该尽量的让每一个队伍的中间值都最大化~我们应该尽量的让每一个队伍的最小值都足够小~前33%的不应该都作为每个队伍的最大值~ 接下来…

LeetCode算法 不同路径 和 不同路径II C++

目录题目 不同路径参考答案题目 不同路径II参考答案题目 不同路径 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finis…

Git 入门最佳实践

Git 入门最佳实践 前言 Git简介 实用主义 深入探索 总结 参考资料 前言 Git 是程序员学习和工作都离不开发工具&#xff0c;今天和大家分享 Git 常用命令总结。 Git简介 Git 是一种分布式版本控制系统&#xff0c;它可以不受网络连接的限制&#xff0c;加上其它众多优…

【Java】UDP网络编程

文章目录前言DatagramSocketDatagramPacket注意事项与区别代码演示前言 UDP&#xff08;user datagram protocol&#xff09;的中文叫用户数据报协议&#xff0c;属于传输层。 UDP是面向非连接的协议&#xff0c;它不与对方建立连接&#xff0c;而是直接把我要发的数据报发给对…

html+css 实现 熊猫样式

效果 html代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible"…

ThinkPHP01:数据库和模型

ThinkPHP01&#xff1a;数据库和模型一、开启调试模式二、配置文件三、URL解析四、数据库五、模型1. 定义模型2. 使用模型① 查询记录② 新增记录③ 删除记录④ 更新记录3. 字段设置4. 模型获取器5. 模型修改器6. 模型查询范围7. 模型数据集8. 模型的自动时间戳9. 模型的只读字…

为什么VMware会给我多创建了两个网络呢?Windows和Linux为什么可以彼此ping的通呢

为什么VMware会给我多创建了两个网络呢&#xff1f;Windows和Linux为什么可以彼此ping的通呢 文章目录为什么VMware会给我多创建了两个网络呢&#xff1f;Windows和Linux为什么可以彼此ping的通呢桥接模式ANT模式&#xff08;VMnet8&#xff09;仅主机模式&#xff08;VMnet1&a…

学习系统编程No.6【进程控制】

引言&#xff1a; 北京时间&#xff1a;2023/3/19/15:16&#xff0c;刚刚睡醒&#xff0c;我发现我真的能睡&#xff0c;早上将反向迭代器剩下的一些知识学完&#xff0c;发现&#xff0c;昨天那篇博客发的有些匆忙了&#xff0c;最后有关反向迭代器的知识都没有把精华部分给分…