纯CSS实现背景色渐变

2023-10-27

这里简单介绍一下如何用纯CSS实现背景渐变色

一,关键词

1.linear-gradient

首先我们要使用的就是CSS中的linear-gradient() 函数,它用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型,是一种特别的数据类型。

2.animation

animation 属性用来指定一组或多组动画,每组之间用逗号相隔。

3.关键帧 @keyframes at-rule 规则

通过在动画序列中定义关键帧(或 waypoints)的样式来控制 CSS 动画序列中的中间步骤。和 转换 transition 相比,关键帧 keyframes 可以控制动画序列的中间步骤

二,代码

 body {
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
            height: 100vh;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

纯CSS实现背景色渐变 的相关文章

  • CSS3动画比例[重复]

    这个问题在这里已经有答案了 我正在尝试对 div 进行动画处理 以便在页面加载时它具有比例 0 0 并动画到比例 1 1 我遇到的问题是 一旦动画生效 div 就会再次缩放到 0 我想要的是 div 动画缩放 1 1 并保持这样 这是我的
  • 如何检查字体是否有符号

    我的文档中有以下 css 规则 font family Trebuchet MS Tahoma 但我发现有些浏览器有 Trebuchet MS 字体没有我需要的符号 某些带有非拉丁字符的语言 在这种情况下 浏览器显示方块而不是符号 我怎样才
  • 如何更改 .NET MAUI Blazor 项目中的默认字体?

    我有一个用于 NET MAUI Blazor 应用程序的默认 Visual Studio 项目 针对 Windows x64 构建 我尝试了两种不同的更改字体的方法 在MauiProgram cs中有一个字体的配置ConfigureFont
  • 禁用 Bootstrap 中的链接

    第一个例子没有成功 我需要始终有一个列表来禁用链接 或者我的第一个演示有什么问题 a class disabled href Disabled link a ul class nav nav pills li class disabled
  • 使用 Javascript/jQuery 和 CSS 更改 PNG 颜色

    我有一个黑色的心 PNG http 1 bp blogspot com yq ZSKg39Tk TOvzVx9sC5I AAAAAAAAAb0 GcN4O Ciq3s s1600 black heart png我想用不同的颜色显示 如何使用
  • 何时使用
    换行符 vs CSS 定位?

    我经常想知道如何正确使用 br 越线 似乎它们经常被错误地用于定位或清除应该使用 CSS 的内容 W3schoools org 说使用 br 适用于空白行 但不适用于创造或分离 http www w3schools com tags tag
  • 如何在 flutter/dart 中使用设定大小的自定义字体?

    我正在尝试使用color fontWeight and fontFamily with style style copyWith 我尝试使用的自定义字体是Vonique 我已经将它像这样导入到pubspec yaml fonts famil
  • 如何更改引导弹出窗口箭头边框颜色而不填充它?

    我想更改弹出箭头的边框颜色 当我应用边框颜色时 箭头本身填充了颜色 我只想为弹出框主体的箭头边框提供颜色 p Click on button to see Popover p a href class btn btn primary pop
  • HTML / CSS 如何将图像图标添加到输入类型=“按钮”?

    我使用下面的 CSS 但它将图像放在按钮的中心 使用任何方式左对齐或右对齐图标
  • 在CSS中,有什么比使其成为块元素更好的强制元素换行的方法呢?

    我有一个 H3 标题 我想将其样式设置为具有特定的背景颜色 但不让元素的背景占据父元素的整个宽度 鉴于 H3 默认情况下是块元素 我的样式需要将该元素更改为内联块元素 或者只是内联内联元素 如下所示 h3 background color
  • 选择接下来的第n个同级

    我想知道是否有比我发现的更好的解决方案而不改变 html 结构 HTML 结构如下所示 div class wrap div class divider div div class block div div class block div
  • 确定使用 -webkit-line-clamp 表示多行省略号时是否显示省略号

    我们使用多行 CSS 省略号https css tricks com line clampin https css tricks com line clampin 我们想要检测省略号是否正在显示 并根据省略号是否正在显示来决定显示工具提示
  • CSS 无法与 CodeIgniter 一起使用

    这是我的 CI 代码的一部分 class page extends CI Controller var Page public function construct parent construct this gt Page 1 this
  • 电子邮件模板 - MS Office Outlook 365 中不显示表格背景图像

    为了电子邮件模板的目的 我需要在 table 它包含图像上的文本 现在我已经尝试过 https stackoverflow com a 15620571 6191987 https stackoverflow com a 15620571
  • 如何使用javascript隐藏div

    我想使用 Javascript 隐藏一个 div 下面是我的div div class ui dialog titlebar ui widget header ui corner all ui helper clearfix span cl
  • .net dropdownlist对齐文本

    我正在尝试将 net 下拉列表中的文本向右对齐 使用 CssClass 我可以在 Firefox 中将文本向右对齐 IE 不会将文本右对齐 而是左对齐 我读到 IE 6 不支持这个 这是真的 我使用的是 IE7 但我的大多数用户将使用 IE
  • 如何反转媒体查询中元素的顺序?

    我有两个 div 左和右 但是当屏幕小于 500px 时 左 div 成为底部 div 右 div 成为顶部 div DOM 中的第一个 div 应该显示为第二个 第二个 div 为第一个 I use display flex 然后 div
  • SVG 剪辑路径在 Safari 上不起作用

    我有一个简单的动画 从下往上填充 svg 然后淡出 填充是使用clipPath随着使用path with a stroke dasharray stroke dashoffset 问题是clipPath在 Safari 上似乎完全被忽略了
  • 当td内容太宽时,表格溢出父div

    我准备了一个 JSFiddle 来解释 向你展示我的问题 http jsfiddle net nz96C http jsfiddle net nz96C 乍一看还不错 但是当我添加一些文本时 firsttd一旦使用 tds 整个宽度 整个表
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho

随机推荐

  • 增强现实python

    本博文用来记录使用python实现增强现实 增强现实技术 即实时地计算摄影机影像的位置及角度并加上相应图像 视频 3D模型的技术 这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动 主要工作 实现动态的放置虚拟模型 本文实现了在自己上
  • IHS 禁用SSLV2 启用SSLV3

    昨天完成了PCI第二季度的ASV扫描 也扫出几个问题 主是IHS SSL加密比较弱 1 PCI ASV扫描出来的两个问题 1 38140 SSL Server Supports Weak Encryption Vulnerability 2
  • FastReport VCL 6.7.6 For Delphi10.4.2 安装图解教程

    FastReport VCL 6 7 6 For Delphi10 4 2 安装图解教程 Fastreport控件的安装 一步一步按说明来 不难搞 1 先关闭Delphi 2 右键 以管理员身份运行 对应版本的recompile exe 2
  • 图片情感分析(2):图像情感分析模型

    图像情感分析模型是基于卷积神经网络建立的 卷积神经网络的构建用了keras库 具体代码实现以及代码运行在下一篇贴出 模型包括3个卷积层 2个池化层 4个激活函数层 2个Dropout层 2个全连接层 1个Flatten层和最终分类层 图片初
  • Java创建数组的四种方式

    1 使用默认值来初始化 语法 数组元素类型 数组名称 new 数组元素类型 数组长度 EG int nums new int 5 创建了一个类型为int 名字为nums 长度为5的数组 2 先声明一个数组 再给值 语法 数据元素类型 数组名
  • 37 年来首次 FSF 允许非正式会员提名董事会候选人;Linux RamFS 文件系统移植到 Rust;Git 2.35 发布

    整理 宋彤彤 责编 屠敏 开源吞噬世界的趋势下 借助开源软件 基于开源协议 任何人都可以得到项目的源代码 加以学习 修改 甚至是重新分发 关注 开源日报 一文速览国内外今日的开源大事件吧 一分钟速览新闻点 成立 37 年来首次 FSF 允许
  • Spring boot配置logback日志打印到指定路径文件

    在实际项目开发中 一般都是使用log打印日志到指定路径 生成文件 而平时使用的System out pring 只能输出日志到控制台 当我们把项目打成war包部署到服务器上 会有不用的用户使用我们的应用 这个时候如果一个客户端出现了问题 那
  • 断弧图片数据集 数据集扩充 增强

    图像处理可以用到的数据 这是原始图像总共1356张 对应的XML文件是它的标签 此数据可以用来做图像目标检测 YOLOv4 v3 SSD faster rcnn 数据集增广 数据集扩充 数据集增强的常用方法与软件 https blog cs
  • 修改pycharm缓存文件路径

    Pycharm在使用过程中 Pycharm会生成大量缓存文件 而这些缓存文件默认存储在C盘的用户目录里面 导致C盘空间被占用 目标 将C盘用户目录下的 Pycharm2019转移到D盘 D cache pycharm 文件夹下 如下图 解决
  • div设置边角小三角形

    div class leftmsg div div class rightmsg div
  • 使用NCNN的INT8量化方式进行推理

    本文以NCNN框架为例 实践量化在推理中的巨大作用 加深对神经网络量化的理解 NCNN当前版本只支对称量化 下面以INT8精度为例介绍NCNN的量化使用方式 编译NCNN mkdir build cd build cmake 进入到buil
  • Java面试--常见集合

    Java面试 基础 ArrayList ArrayList的扩容机制 FailFast和FailSafe ArrayList和LinkedList HashMap 介绍一下put方法流程 1 7和1 8有何不同 负载因子默认值为何是0 75
  • CSDN编程竞赛 ——— 第六期之python

    CSDN编程竞赛报名地址 https edu csdn net contest detail 16 请不要删掉此地址 目录 前言 背景 大赛简介 参赛流程 参赛经历 解题思路 经验心得 资料分享 前言 背景 目前为止共参加过三次 不过没拿到
  • 20201013 矩阵2范数matlab求解

    这里是引用n norm X 返回矩阵 X 的 2 范数或最大奇异值 该值近似于 max svd X 示例 n norm X p 返回矩阵 X 的 p 范数 其中 p 为 1 2 或 Inf https ww2 mathworks cn he
  • java导出Excel增加下拉框选项,解决小数据量和大数据量下拉框选项的问题

    文章目录 java导出Excel增加下拉框选项 一 小数据量情况 二 大数据量情况 java导出Excel增加下拉框选项 java结合easyExcel 添加传参模型ConsumablesAddDTO 一 小数据量情况 仅供参考 二 大数据
  • 鸿蒙系统怎么退出,华为鸿蒙2.0系统升级了怎么退回EMUI11系统?操作教程详解[多图]...

    华为鸿蒙2 0系统升级了怎么退回EMUI11系统 很多用户升级了又不知道如何才能退回到原来的系统 下面就让安卓乐园小编为大家带来 2 0系统升级退回EMUI11系统操作教程详解 这次开启华为鸿蒙2 0系统手机开发者beta版公测招募的机型有
  • 遗传算法最通俗的讲解案例

    遗传算法 遗传算法求全局最优解或者近似优解 遗传算法GA可以用到数据挖掘领域 由于缺少一些详细的例子 导致难以理解 以下是一个大牛的遗传算法的详细例子 通过这个例子 我们可以详细而且直观的加深对遗传算法的理解 遗传算法的有趣应用很多 诸如寻
  • 机器学习 之 python实现 多元线性回归 梯度下降 普适算法与矩阵算法

    介于网上的多元线性回归梯度下降算法多为固定数量的因变量 如三元一次函数 y 1 x 1
  • 有向图问题1--深度优先、广度优先遍历和拓扑排序

    有向图基础 术语定义 一个顶点的出度为由该顶点指出的边的总数 一个顶点的入度为指向该顶点的边的总数 一条有向边的第一个顶点称为它的头 第二个顶点称为它的尾 数据结构 使用邻接表来表示有向图 其中v gt w表示为顶点v对应的邻接链表中包含一
  • 纯CSS实现背景色渐变

    这里简单介绍一下如何用纯CSS实现背景渐变色 一 关键词 1 linear gradient 首先我们要使用的就是CSS中的linear gradient 函数 它用于创建一个表示两种或多种颜色线性渐变的图片 其结果属于数据类型 是一种特别