如何制作 HTML/CSS/JS 变色背景(如 Kahoot.it 那样)

2024-05-09

如何使用 html 和 css 以及可能的 javascript 制作类似于 waht 的颜色变化/褪色背景https://kahoot.it https://kahoot.it has?


你应该学会检查和获取

@keyframes bgcolor {
    0% {
        background-color: #45a3e5
    }

    30% {
        background-color: #66bf39
    }

    60% {
        background-color: #eb670f
    }

    90% {
        background-color: #f35
    }

    100% {
        background-color: #864cbf
    }
}

body {
    -webkit-animation: bgcolor 20s infinite;
    animation: bgcolor 10s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何制作 HTML/CSS/JS 变色背景(如 Kahoot.it 那样) 的相关文章

  • 如何从 pdf C# 中获取具有特定颜色的文本

    我必须将 pdf 文件中的数据放入特定的数据库结构中 这要求我能够从 pdf 文件中获取某些数据 由于 pdf 没有任何标签等 我想知道是否可以根据颜色获取文本 比如说我想要所有的红色文本 或者我想要文档中的所有斜体文本 这在 C 中可能吗
  • 使用画布仅删除文本而不删除图像

    我正在尝试删除画布元素中的文本 而不丢失Background Image of the Canvas Element 我想我需要保存Imagesrc并把它还给Canvas Element之后clearRect 但我不知道该怎么做 我希望有人
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不
  • 调整文本区域大小

    我需要使用文本区域来显示一些文本 问题是 如果我放置 4 5 行文本 就会出现滚动条 如何使用 CSS HTML 使文本区域与其内容一样大 没有滚动条 文本区域不需要动态更改其大小 我仅使用它来显示文本 我也可以使用禁用的文本区域 我希望文
  • Textmate“注释”命令对于 css 代码无法正常工作

    当我在 TextMate 中切换 CSS 源代码的注释时遇到一些问题 Using the shortcut CMD I activate the Comment Line Selection command from the source
  • 如何使用 a-href 标签链接回文件夹? [复制]

    这个问题在这里已经有答案了 好吧 我在文件夹中有一个页面 该页面称为 jobs html 该文件夹简称为 jobs 它是我的 网站 文件夹的子文件夹 在 main 文件夹的主目录中是我的 home html 文件 当我尝试做的时候 a hr
  • 网站 YouTube 嵌入视频不断播放

    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po
  • 如何为背景图像添加边距?

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • 如何使用 JavaScript 获取没有 HTML 元素的纯文本?

    我的 HTML 中有 1 按钮和一些文本 如下所示 function get content I don t know how to do in here
  • W3C 验证器:“握手警报:unrecognized_name”

    我正在尝试验证我的网站W3C Nu Html 检查器 https validator w3 org nu doc https 3A 2F 2Fwww healthdrop in 2F但我遇到了以下错误 不知道为什么 IO 错误 握手警报 u
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • Google Chrome 106 可拖动导致元素消失

    使用拖放元素时 绝对定位元素中包含的大多数其他元素都会从屏幕上消失 如果我调整窗口大小 这些元素会出现 但在开始拖动时会再次消失 我在最新版本的 Google Chrome 106 和 Beta 版本 107 0 5304 18 以及现在的
  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di
  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d

随机推荐

  • 从向量中删除向量::end

    当我使用时它工作正常吗 什么也不做 vector
  • 带括号的上下文管理器

    我试图了解新的新内容带括号的上下文管理器Python 3 10 中的功能 新功能中的顶部项目here https docs python org 3 10 whatsnew 3 10 html 我的测试示例是尝试编写 with open f
  • 在php中的字符串数组中查找字符串的开头[重复]

    这个问题在这里已经有答案了 我知道我们有 php in array 函数 但我正在寻找一种方法来查找以特定字符串开头的字符串数组中的值 例如找到 search string div 1 div 在这样的数组中 array sample gt
  • 如何在 rspec 中模拟实例变量

    我有两节课OneClass and AnotherClass class OneClass def initialize args another member AnotherClass new end def my method if a
  • 变量作为 bash 数组索引?

    bin bash set x array counter 0 array value 1 array 0 0 0 for number in array do array array counter array value array co
  • 如果启用持久化,当数据存在于缓存中时,什么算作读操作?

    如果监听器断开连接超过30分钟 例如 如果用户离线 您将需要支付读取费用 就好像您已经离线一样 发出了全新的查询 如果启用持久性 这仍然适用吗 情况一 App离线时间超过30分钟 启用持久性并从缓存中读取数据 从缓存中读取文档算作读操作吗
  • FieldPath 字段名称不能包含“.”当尝试使用 AGGREGATE 时

    我的查询有什么问题吗 db table aggregate match gt expr gt and gt eq gt size gt events 4 events 0 updated gt lt gt 2019 05 05 我越来越 M
  • Linux TCP服务器:在接受连接之前读取客户端的IP地址

    Related C Winsock API如何在接受连接之前获取连接客户端IP https stackoverflow com questions 716209 c winsock api how to get connecting cli
  • 帮助需要在可选条件下编写正则表达式[关闭]

    我有一个日志文件包含如下内容 log Using data from yyyy mm dd 2011 8 3 0 files queued for scanning Warning E test H ndler pdf File not F
  • 漏洞利用开发 - GETS 和 Shellcode

    试图了解更多有关利用开发和构建 shellcode 的信息 但遇到了一个我不明白背后原因的问题 为什么我无法运行 execve bin sh 等 shellcode 并生成可以与之交互的 shell 另一方面 我可以创建一个反向 bind
  • 实体框架在连接后返回不同的记录

    考虑我们有这两个实体和一个自定义对象 public class Entiy1 public int Id get set public int DestinationId get set public string Name get set
  • CSS 未在 Spring Boot 中加载

    我是 spring 框架工作和 spring boot 的新手 我正在尝试使用 CSS javascript js 添加静态 html 文件 文件结构是 我的 html 文件头看起来像这样
  • 静态文件配置不正确

    我已经在 Heroku 上部署了简单的博客应用程序 它运行在Django 1 8 4 我在静态文件方面遇到了一些问题 当打开我的应用程序时 我看到Application Error页面 所以我尝试调试它并发现当我提交到 Heroku 时它无
  • 用于开发/生产环境的备用 grunt.js 任务

    我真的很希望能够拥有一个开发 grunt 文件并使用相同的文件作为脚本的生产版本 我已经尝试过建议 但是当尝试调用 dev prod 参数时 我的脚本将会失败 我相信答案是针对旧版本的 grunt 或者可能是我正在使用的插件 module
  • Pip install 导致此错误“ cl.exe' failed with exit code 2 ”

    我已经阅读了有关此错误的所有其他问题 但令人沮丧的是 没有一个给出有效的解决方案 如果我跑pip install sentencepiece在命令行中 它给出了以下输出 src sentencepiece sentencepiece wra
  • Swift 4 使用随机密钥解码嵌套 JSON [重复]

    这个问题在这里已经有答案了 我是 Swift 4 的新手 正在尝试从 Wikipedia API 解码此 JSON 我正在努力定义一个结构 因为我发现的所有示例 教程都仅嵌套 1 2 层深度 除此之外 当其中一个密钥是随机的时 如何解码数据
  • 为什么 Internet Explorer 不喜欢这个 jQuery?

    在调试一些在 IE 中不起作用的 jQuery 时 我发现了以下错误消息 var item item itemArray itemIndex find a text trim Object doesn t support this prop
  • AngularJS - 转到上一个/下一个模式

    我正在使用 Angular 构建一个应用程序 其中有一个项目列表 使用 ng repeat 通过单击每个项目 我可以打开一个模式以查看更详细的描述 现在 为了切换到另一个模式 我必须关闭前一个模式 转到列表 然后单击打开另一个模式 我想在单
  • Rails 资产 - 保留许可证注释

    如何防止 Uglifier 删除某些文件中的某些注释 我希望缩小和压缩代码 但我也希望许可注释保持不变 来自 uglifyJS 的文档 nc or no copyright 默认情况下 uglifyjs 将在生成的代码中保留初始评论标记 假
  • 如何制作 HTML/CSS/JS 变色背景(如 Kahoot.it 那样)

    如何使用 html 和 css 以及可能的 javascript 制作类似于 waht 的颜色变化 褪色背景https kahoot it https kahoot it has 你应该学会检查和获取 keyframes bgcolor 0