如何制作 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 那样) 的相关文章

随机推荐

  • 从向量中删除向量::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