5、css3 自动动画渐变背景

效果例图:(因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.mzph.cn/news/845003.shtml

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

相关文章

【鸟哥】Linux笔记-硬件搭配

在Linux这个系统当中&#xff0c;几乎所有的硬件设备文件都在/dev这个目录内。打印机与软盘呢&#xff1f;分别是/dev/lp0, /dev/fd0。 几个常见的设备与其在Linux当中的文件名&#xff1a; 如果你的机器使用的是跟网际网络供应商 &#xff08;ISP&#xff09; 申请使用的云端…

二叉树的构建和遍历(oj题)

一、题目链接 https://www.nowcoder.com/practice/4b91205483694f449f94c179883c1fef?tpId60&&tqId29483&rp1&ru/activity/oj&qru/ta/tsing-kaoyan/question-ranking 二、题目思路 利用先序遍历的方法&#xff0c;构建二叉树。为了保证在递归中&#xf…

USB主机模式——Android

理论 摘自&#xff1a;USB 主机和配件概览 | Connectivity | Android Developers (google.cn) Android 通过 USB 配件和 USB 主机两种模式支持各种 USB 外围设备和 Android USB 配件&#xff08;实现 Android 配件协议的硬件&#xff09;。 在 USB 主机模式下&#xff0…

Redis 中的 Zset 数据结构详解

目录 用法 1. 增 2. 删 3. 查 4. 交&#xff0c;并 编码方式 应用场景 Redis 中的 Zset&#xff08;有序集合&#xff09;是一种将元素按照分数进行排序的数据结构。与上篇写的SetRedis 中的 Set 数据结构详解不同&#xff0c;Zset 中的每个元素都关联一个浮点数类型的…

Jmeter的线程组之间传递参数

使用jemter做接口测试&#xff0c;有时候需要会遇到不同线程组之间调用相同变量的情况&#xff0c;最多见的就是token的传递&#xff0c;网上有很多处理方法&#xff0c;这里只记录setProperty的办法&#xff0c;一招鲜走遍天&#xff01; 首先我有两个线程组&#xff1a; 线程…

vm:为虚拟机配置多个虚拟网卡(ubuntu20.04)

前言&#xff1a; 环境&#xff1a;虚拟机 ubuntu 20.04 要求&#xff1a;如标题&#xff0c;但是这里针对的是 ubuntu 20.04&#xff0c;对于其他操作系统&#xff0c;可以找一下其他操作系统对应的配置文件是什么 vm 添加虚拟网卡 首先进入 vm&#xff1a; 点击设置&#xf…

JVM监控-JMX探针的安装和使用

jvm监控的搭建和使用 ​ Java Management Extensions&#xff08;JMX&#xff09;是一种Java标准&#xff0c;用于管理和监控Java应用程序&#xff0c;特别是分布式系统。它提供了一种标准化的方式来管理应用程序的各种方面&#xff0c;包括性能监控、配置更改、事件通知等。目…

nodemcu32s 和 mini D1 组局域网并用 webSocket 通信

实现思路 使用 mini D1 来搭建一个 webSocket 服务&#xff0c;然后使用 nodemcu32 连接&#xff0c;然后就可以进行通信了。 服务端代码&#xff08;mini D1&#xff09; 在代码中主要是需要控制好 loop 函数中的延时&#xff0c;也就是最后一行代码 delay&#xff0c;如果…

JS-51-Node.js10-yarn

一、yarn的简介 Yarn 是一款 JavaScript 的包管理工具&#xff08;npm的代替方案&#xff09;&#xff0c;是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。 正如 Yarn 官网的介绍&#xff0c;Yarn 的具有速度快 、安全 、可靠 的优点&#x…

MathType2025数学公式编辑器有哪些新增功能?

在当今科技飞速发展的时代&#xff0c;数学、科学和工程教育领域对于精确性和效率的要求日益增高。随着教育数字化的不断深入&#xff0c;传统的教学方式和科研手段正逐渐被新型的数字工具所取代。在这一过程中&#xff0c;MathType作为一款强大的数学公式编辑器&#xff0c;其…

多维时序 | Matlab实现SA-BP模拟退火算法优化BP神经网络多变量时间序列预测

多维时序 | Matlab实现SA-BP模拟退火算法优化BP神经网络多变量时间序列预测 目录 多维时序 | Matlab实现SA-BP模拟退火算法优化BP神经网络多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现SA-BP模拟退火算法优化BP神经网络多变量时间序列预…

React-组件通信

组件通信 概念&#xff1a;组件通信就是组件之间的数据传递&#xff0c;根据组件嵌套关系的不同&#xff0c;有不同的通信方法 父传子 基础实现 实现步骤&#xff1a; 1.父组件传递数据-在子组件标签上绑定属性 2.子组件接收数据-子组件通过props参数接收数据 props说明 1.…

哪个牌子的无线麦克风好用?全网揭秘无线麦克风一拖二哪个牌子好

​在浩瀚的音频产品海洋中&#xff0c;如何挑选一款适合自己的无线领夹麦克风&#xff1f;这确实是一个值得深思的问题。今天&#xff0c;我为你精心推荐这几款无线领夹麦克风&#xff0c;它以其卓越的音质、稳定的性能和便捷的无线连接&#xff0c;赢得了众多用户的青睐。无论…

独家首发 | 基于多级注意力机制的并行预测模型

基于Transformer-BiGRUGlobalAttention-CrossAttention的并行预测模型! 往期精彩内容&#xff1a; 时序预测&#xff1a;LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较-CSDN博客 VMD CEEMDAN 二次分解&#xff0c;Transformer-BiGRU预测模型-CSDN博客 独家原创 | 基…

机器学习算法手撕(一):KD树

import math import matplotlib.pyplot as pltclass Node:def __init__(self, data, leftNone, rightNone):self.data dataself.left leftself.right right# 创建KDTree类 class KDTree:def __init__(self, k):self.k kdef create_tree(self,dataset,depth):if not dataset…

辅导男朋友转算法岗的第2天|self Attention与kv cache

文章目录 公式KV CacheMHA、MQA、GQA 面试题为什么除以 d k \sqrt{d_k} dk​ ​Multihead的好处decoder-only模型在训练阶段和推理阶段的input有什么不同&#xff1f;手撕必背-多头注意力 公式 $ \text{Output} \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right) \times …

C#,JavaScript实现浮点数格式化自动保留合适的小数位数

目标 由于浮点数有漂移问题&#xff0c;转成字符串时 3.6 有可能得到 3.6000000000001&#xff0c;总之很长的一串&#xff0c;通常需要截取&#xff0c;但按照固定长度截取不一定能使用各种情况&#xff0c;如果能根据数值大小保留有效位数就好了。 C#实现 我们可以在基础库里…

【错题集-编程题】过桥(BFS)

牛客对应题目链接&#xff1a;过桥 (nowcoder.com) 一、分析题目 类似层序遍历的思想。 二、代码 //值得学习的代码 #include <iostream>using namespace std;const int N 2010;int n; int arr[N];int bfs() {int left 1, right 1;int ret 0;while(left < right)…

JDK环境配置、安装

DK环境配置&#xff08;备注&#xff1a;分32位与64位JDK&#xff0c;32位电脑只能按照32位JDK&#xff0c;64位电脑兼容32、64位JDK&#xff09; 一、检查自己电脑是否安装过JDK 1.在电脑屏幕左下角&#xff0c;输入命令提示符CMD&#xff0c;打开命令提示符应用 2.在打开界…

vivo X200系列即将发布:首发将搭载天玑最新芯片9400

随着智能手机技术的不断进步&#xff0c;vivo作为全球知名的智能手机制造商&#xff0c;一直在为用户带来创新和惊喜。最近&#xff0c;vivo的粉丝们有理由感到兴奋&#xff0c;因为最新的消息称&#xff0c;vivo X200系列即将发布&#xff0c;并且将首发搭载天玑最新的9400处理…