5、css3 自动动画渐变背景

news2024/11/26 3:27:44

效果例图:(因gif图片太大,而csdn只能上传小于5m图片,所以无法上传)

1、首先上传html代码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./3.css">
    <title>Document</title>
</head>

<body>
    <div class ="text">
        CSS 渐变酷炫背景动画效果
    </div>
</body>
</html>

 2、上传核心CSS3代码:

body{
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-size: 400%;
    background-image: linear-gradient(90deg,#2c3e50,#27ae60,#b9aa29,#2980b9,#e74c3c,#8e44ad);
    animation: bganimation 15s infinite;
}
.text{
    color: white;
    text-align: center;
    text-transform: uppercase;
    padding: 30vh;
    font-size: 22px;
}
@keyframes bganimation{
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}

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

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

相关文章

TDesign环境搭建-后台模板的安装和使用-构建web管理端后台系统

TDesign环境搭建-后台模板的安装和使用-构建web管理端后台系统 一、安装Nodejs 下载&#xff1a;nodejs 注意&#xff0c;目前前端代码使用的vue3做为脚手架进行开发&#xff0c;需要强制依赖node版本为16及以上 二、模板安装 2.1 安装脚手架&#xff1a;cli nodejs安装好之…

基于51单片机多功能防盗报警proteus仿真( proteus仿真+程序+设计报告+原理图+讲解视频)

基于51单片机多功能防盗报警系统 1. 主要功能&#xff1a;2. 讲解视频&#xff1a;3. 仿真4. 程序代码5. 设计报告6. 原理图7. 设计资料内容清单&&下载链接 基于51单片机多功能防盗报警系统( proteus仿真程序设计报告原理图讲解视频&#xff09; 仿真图proteus8.9及以上…

Linux下的Git应用

1、卸载 2、安装 3、创建并初始化 4、配置 (附加删除语句) 5、查看(tree .git/) 6、增加和提交

关于d3js生成节点画布的个人笔记

实现功能 根据鼠标位置生成节点根据节点位置通过鼠标拖拽生成连线实现自定义线段颜色功能删除节点以及连线功能实现单个节点拖动功能实现整条线路的拖动功能 界面如下&#xff1a; 主要模块介绍 绘制连线 const line svg.selectAll(".line").data(links, d >…

BUUCTF Crypto RSA详解《1~32》刷题记录

文章目录 一、Crypto1、 一眼就解密2、MD53、Url编码4、看我回旋踢5、摩丝6、password7、变异凯撒8、Quoted-printable9、篱笆墙的影子10、Rabbit11、RSA12、丢失的MD513、Alice与Bob14、大帝的密码武器15、rsarsa16、Windows系统密码17、信息化时代的步伐18、凯撒&#xff1f;…

加密金字塔的秘密:「高层」的回报你无法想象

原文标题&#xff1a;《The Secrets of the Crypto Pyramid!》 撰文&#xff1a;DUO NINE⚡YCC 编译&#xff1a;Chris&#xff0c;Techub News 本文来源香港Web3科技媒体&#xff1a;Techub News 意外成为一名 KOL 让我有机会深入了解这个领域的运作机制。在这个行业的幕后…

【xilinx】vivado中的xpm_cdc_gray.tcl的用途

背景 【Xilinx】vivado methodology检查中出现的critical Warning-CSDN博客 接上篇文章&#xff0c;在vivado进行 methodology检查时出现了严重警告&#xff0c;顺着指示查到如下一些问题 TIMING #1 Warning An asynchronous set_clock_groups or a set_false path (see con…

【Python】解决由于PYTHONPATH配置错误导致的ModuleNotFoundError: No module named ‘xxx‘错误

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

智慧楼宇:城市生活的新篇章

在城市的喧嚣与繁华中&#xff0c;楼宇不仅是我们工作与生活的场所&#xff0c;更是智慧科技发展的前沿阵地。当传统的建筑遇上智慧的火花&#xff0c;便诞生了令人瞩目的智慧楼宇。 山海鲸可视化搭建的智慧楼宇数字孪生系统 一、智慧楼宇&#xff0c;定义未来生活 智慧楼宇不…

利用WMI横向移动

一. WMI介绍和使用 1. WMI介绍 WMI是Windows在Powershell还未发布前&#xff0c;微软用来管理Windows系统的重要数据库工具&#xff0c;WMI本身的组织架构是一个数据库架构&#xff0c;WMI 服务使用 DCOM或 WinRM 协议, 在使用 wmiexec 进行横向移动时&#xff0c;windows 操…

生活杂货品牌首合作!The Green Party与数图共同探索品类空间管理全新策略!

数图服务业态再扩展&#xff0c;生活杂货品牌首合作&#xff0c;近日&#xff0c;数图与国内知名品牌The Green Party&#xff08;绿光派对&#xff09;展开合作&#xff0c;双方本着创新共赢的原则&#xff0c;携手共进&#xff0c;共同探索和实践品类空间管理领域的全新路线&…

Flink搭建

目录 一、standalone模式 二、Flink on Yarn模式 一、standalone模式 解压安装Flink [rootbigdata1 software]# tar -zxvf flink-1.14.0-bin-scala_2.12.tgz -C /opt/module/ [rootbigdata1 module]# mv flink-1.14.0/ flink-standalone 2.进入conf修改flink-conf.yaml job…

STM32_HAL_看门狗

介绍 STM32的"看门狗"&#xff08;Watchdog&#xff09;是一种硬件安全特性&#xff0c;用于监控STM32微控制器的正常操作。当系统出现故障或异常时&#xff0c;看门狗能够检测到这些情况&#xff0c;并采取相应的措施&#xff0c;通常是重置微控制器&#xff0c;以…

关系数据库:关系模式

文章目录 基本概述关系的相关名词术语笛卡儿积与关系关系的类型 关系模式总结 基本概述 关系的相关名词术语 关系&#xff1a;简单来说&#xff0c;就是一张二维表格。属性(Attribute)&#xff1a;也称字段或列&#xff0c;在现实世界中&#xff0c;要描述一个事务常常取若干…

私域加持业务 快消门店运营新玩法

两个月前&#xff0c;某快消品企业的李总急切地联系了纷享销客&#xff0c;希望能找到解决终端门店运营难题的有效方法。 Step1、连接终端门店&#xff0c;导入私域进行深度维系与运营 一、与终端门店建立联系 为了与众多门店老板建立紧密的联系&#xff0c;并将他们转化为企…

ERV-Net:一种用于脑肿瘤分割的高效3D残差神经网络| 文献速递-深度学习肿瘤自动分割

Title 题目 ERV-Net: An efficient 3D residual neural network for brain tumor segmentation ERV-Net&#xff1a;一种用于脑肿瘤分割的高效3D残差神经网络 01 文献速递介绍 脑肿瘤在全球范围内是致命的&#xff0c;与其他类型的肿瘤相比。胶质瘤是最具侵略性的脑肿瘤类…

pyinstaller将py文件打包成exe

pyinstaller将py文件打包成exe 一、为什么需要将python文件打包成exe文件?二、具体操作步骤一、为什么需要将python文件打包成exe文件? python文件需要在python环境中运行,也就是需要安装python解释器。有时我们自己写的python程序需要分享给自己的朋友、同事或者合作伙伴,…

两数之和 II - 输入有序数组,三数之和

题目一&#xff1a; 代码如下&#xff1a; vector<int> twoSum(vector<int>& numbers, int target) {int left 0;int right numbers.size() - 1;vector<int> ret;while (left < right){int tmp numbers[left] numbers[right];if (tmp target){r…

flink 操作mongodb的例子

简述 该例子为从一个Collection获取数据然后插入到另外一个Collection中。 Flink的基本处理过程可以清晰地分为以下几个阶段&#xff1a; 数据源&#xff08;Source&#xff09;&#xff1a; Flink可以从多种数据源中读取数据&#xff0c;如Kafka、RabbitMQ、HDFS等。Flink会…

SpringBoot案例,通关版

项目目录 此项目为了伙伴们可以快速入手SpringBoot项目,全网最详细的版本,每个伙伴都可以学会,这个项目每一步都会带大家做,学完后可以保证熟悉SpringBoot的开发流程项目介绍:项目使用springboot mybatis进行开发带你一起写小项目先把初始环境给你们第一步新建springboot项目返…