纯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实现背景色渐变 的相关文章

  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p
  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许
  • 两种颜色边框

    客户想要两种颜色的边框以获得浮雕外观 我可以在一个元素上执行此操作吗 我希望避免堆叠两个具有单独边框的 DOM 元素 是的 使用outline财产 它充当您边界之外的第二个边界 但请注意 它可能会以一种奇怪的方式与边距 填充和阴影进行交互
  • CSS:缩放字体大小以适应父块元素的高度

    我发现的几乎每个问题和答案都谈到了视口大小 这确实不是我的问题 拿着这支笔 https codepen io njt1982 pen pZjZNM https codepen io njt1982 pen pZjZNM 我有一个非常基本的
  • IE7 显示问题:菜单中的表格

    我写了一个菜单样式 在 IE8 FF3 6 GC7 中运行良好 现在的问题是 我的老板希望它甚至可以在 IE7 上运行 我真的很努力地让它在 IE7 上运行 但无法获得相同的外观 menu css a outline none menu m
  • 从 Bootstrap 中删除字形

    如何从 bootstrap 3 中删除所有字形实例 看起来它已经大量嵌入到 css 文件中了 我正在努力使文件大小尽可能最小 只需简单地克隆引导程序https github com twbs bootstrap sass https git
  • 如何将背景图像仅应用于一个反应页面而不是整个应用程序?

    注册页面示例 register background image linear gradient to right ff5722 0 ff9800 100 margin top 150px important div div div div
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • 使用 Java 清理 CSS

    Java 中有没有一个好的库可以清理 CSS 样式表 我们希望允许管理员用户上传 CSS 样式表来控制他们管理的网站部分的外观 当然 我们不希望出现诸如background url javascript 之类的XSS攻击 因此我们正在寻找一
  • 将 2 个 Div 垂直居中另一个 Div

    我有 2 个 div 我想将它们垂直居中在另一个 div 内 目前我有 http jsfiddle net 5vpA3 1 http jsfiddle net 5vpA3 1 现在我明白这里发生了什么 但我希望左侧 div 在该容器内垂直对
  • 如何在 leaflet.js 中设置 layer.control 的样式?

    我正在尝试更改图层控件中的默认下拉菜单图标 我希望图标旁边有文字 有什么办法可以做到这一点吗 也许使用 JQuery 和 CSS 我正在开发一个基于此示例的传单项目 http leafletjs com examples layers co
  • 除非我在 HTML 中使用 标签加载图像,否则背景图像不会显示在 CSS 中

    我非常困惑为什么我的代码无法正确显示图像 这是我的代码 div p p div 只有图像的一小部分与文本一起显示 我很困惑为什么会发生这种情况 显示整个图像的唯一方法是在图像周围添加近 170 像素的填充 请有人帮忙 Thanks 你之前需
  • Windows Phone 8 中的 Webview 弹跳

    我需要知道是否有任何方法可以控制 Windows 8 中的 webview 弹跳属性 我已经尝试过 ms touch action none 它确实会停止弹跳 但会禁用应用程序中的整个滚动 我已尝试以下方法 但这些方法不起作用 backfa
  • Firefox 插件查找未使用的 CSS 样式[重复]

    这个问题在这里已经有答案了 可能的重复 识别未使用的 CSS 定义的工具 https stackoverflow com questions 135657 tool to identify unused css definitions 假设
  • 通过 SVG 背景传递鼠标事件

    我有两个 SVG 元素 每个元素覆盖整个屏幕 html body height 100 svg position absolute top 0 left 0 bottom 0 right 0
  • 呈现为 Flexbox 的有序列表不显示项目符号/小数(项目也呈现为 Flexbox)

    我有一个有序列表 ol 有它的display属性设置为flex 列表项也呈现为弹性框 这样做会导致项目符号 数字 不再显示 有什么办法可以让项目符号显示在ol有课 questions questions likert 在40px的区域pad
  • 如何在 Bootstrap 3 中制作进度条动画?

    我正在尝试为 Bootstrap 进度条设置动画 但我不知道该怎么做 我得到了宽度的值但是console log bar width 返回宽度px但不是 如内联所示style width 90 我用代码重新创建了一个 bootply Boo
  • 使用 jquery 提供附加功能时菜单未正确对齐

    I need to make a mega menu similar to one as show in image below 到目前为止 我已经能够在某种程度上使其发挥作用 例如jsFiddle 在这里 http jsfiddle ne
  • jQuery 覆盖默认验证错误消息显示(Css)弹出/工具提示等

    我试图用 div 而不是标签来覆盖默认的错误消息标签 我看过这个帖子 https stackoverflow com questions 309574 jquery validation how to not display errors

随机推荐

  • 增强现实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 函数 它用于创建一个表示两种或多种颜色线性渐变的图片 其结果属于数据类型 是一种特别