CSS 过渡淡入

2024-03-26

我以前使用过 CSS 过渡,但我有一个独特的案例。我正在编写一个用于创建模式的自定义插件。本质上我是即时创建一个 divdocument.createElement('div')并将其附加到带有几个类的主体中。这些类定义颜色和不透明度。我想严格使用 CSS 以便能够在这个 div 中淡入淡出,但是使状态更改似乎很困难,因为它们需要一些用户交互。

尝试了一些高级选择器希望它能改变状态,尝试了媒体查询希望改变状态......寻找任何想法和建议,如果可能的话我真的想将其保留在CSS中


如今 CSS 关键帧支持非常好:

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
<h1 class="fade-in">Fade Me Down Scotty</h1>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 过渡淡入 的相关文章

随机推荐

  • 将 JSON 对象反序列化为 .NET HashSet

    以下是原始 JSON 数据的示例 Standards 1 1 我想将数据反序列化为 public class Model public HashSet
  • java.lang.ClassCastException:java.io.ObjectStreamClass无法转换为java.lang.String

    我在 tomcat 上运行 Web 应用程序时遇到以下堆栈跟踪错误 无法找到此异常的根本原因 Eclipse 32 bit Luna Release 4 4 0 Tomcat 32 bit 8 0 30 jdk1 8 0 66 Jan 01
  • 为什么只有打开 Fiddler 才能在 ASP.NET 中调用 API?

    我在索引控制器中调用 API 就像这样 一切正常 只要我打开 Fiddler public ActionResult Index Base model null var client new HttpClient var task clie
  • 仅增加特定网页上的请求超时

    是否可以仅增加一个特定网页的请求超时 我正在开发 ASP Net 4 0 我需要一个特定页面具有更长的请求超时 因为它负责启动一个长时间运行的进程 谢谢 使用Web config
  • 如何让多个div水平滚动?

    我希望我的图块位于同一行 并且如果图块超出容器的宽度 容器可以水平滚动 看下面的演示 图块被添加到下一行 所以我必须垂直滚动才能访问它们 如何使水平滚动起作用 并使所有图块保持在同一行 container width 600px max h
  • 停止 Outlook、Gmail 等中的自动超链接

    我的网络应用程序向用户发送电子邮件 该电子邮件包含一个用于进一步用户操作的链接 我们的安全标准要求电子邮件中的链接不可点击 但是 电子邮件客户端会识别电子邮件中的 https 并自动链接 URL 关于如何阻止电子邮件客户端自动链接的任何想法
  • (Android) 在内部存储中查找路径 /Android

    Android 中有没有返回内部存储上的数据路径的方法 我有 2 部 Android 智能手机 三星 s2 和 s7 edge 我在其中安装了应用程序 我想获取位于此路径中的 sqliteDB Android data applicatio
  • 我应该使用堆栈进行长期变量存储吗?

    根据 汇编语言循序渐进 第3版 中的 Storage for Short Term 第8章 堆栈应该被视为短期存放东西的地方 存储在堆栈中的项目没有名称 通常必须按照放入的相反顺序从堆栈中取出 后进先出 记住 后进先出 然而 据我所知 C
  • Java libjava.so 文件错误

    自从我尝试在安装了 java5 jre 的服务器上运行 java 命令以来已经一天了 问题是我总是得到 错误 找不到 libjava so 错误 找不到 Java 2 运行时环境 即使我从安装目录 usr lib java1 5 jre b
  • “NULL”列 (0,3) 的数字溢出

    我有一个表 Oracle 12 1 0 2 0 当我总结我得到的值时 ORA 01426 numeric overflow 01426 00000 numeric overflow Cause Evaluation of an value
  • 使用 vala 将 uris 插入 Gtk.Clipboard

    我目前正在尝试为我的应用程序实现复制和粘贴 问题是我只能根据文档将纯文本或图像复制到剪贴板Gtk Clipboard https valadoc org gtk 3 0 Gtk Clipboard html https valadoc or
  • 如何使用Go Sdk for docker运行docker run?

    我想运行下面的 docker 命令docker run ajaycs14 hello world p 1527 80 d 如何实现上述使用Docker Go SDK https godoc org github com moby moby
  • 填充缺失的数据 pandas

    我如何填写此日期框中缺失的数据 没有销售的日子里缺少值 如何填写在特定商店和日期售出 0 件商品的天数的缺失值 Input Dates Store Item Sales 2017 01 01 Chicago Apple 10 2017 01
  • 如何将 GitLab CI 文件变量传递给 Dockerfile 和 docker 容器?

    GitLab CI 允许向项目添加自定义变量 它允许使用类型的秘密变量file我指定的键是变量名称 值是文件的内容 例如证书的内容 然后在管道执行期间 内容将被保存为临时文件 调用变量名称将返回创建文件的路径 最终我需要将此文件复制到构建项
  • 如何避免 RealmSwift 中的迁移

    我只是使用 Realm 测试一些配置 因此我在领域类中添加和删除了变量和列表 因为我只是在测试 所以我不想经历迁移过程 我也没有任何会影响连续性的数据 有什么方法可以解决 Realm 自动请求迁移的问题吗 无论架构发生变化 有两种方法可以跳
  • 关于使用 flutter 在 Android 上投放 Facebook 应用安装广告的branch.io 归属问题?

    我们有应用程序安装归因 适用于 iOS 和 Android 上的有机链接 使用flutter branch sdk https pub dev packages flutter branch sdk 但是 对于 Facebook 应用安装广
  • 为什么我收到 Http/1.1 400 Bad request?

    这是我的代码片段 我正在尝试使用 HTTPOST 登录该网站 我不断收到 400 Bad Request 我尝试了各种组合 我尝试将用户名 密码作为标头而不是 NameValuePair 传递 但结果相同 我有什么遗漏的吗 HttpClie
  • JavaScript:2011 年我应该担心内存泄漏吗?

    JavaScript 中的内存泄漏这个话题并不经常被提及 然而 我偶然发现本文 http www ibm com developerworks web library wa memleak 写于 2007 年 作者指出 Internet E
  • 如何在java中更改Jaeger API的主机和端口

    我们选择使用 Jaeger API 来进行跟踪 在那里 我们使用 docker 在本地设置了 Jaeger 如下所述 sudo docker run d name jaeger p 5775 5775 udp p 6831 6831 udp
  • CSS 过渡淡入

    我以前使用过 CSS 过渡 但我有一个独特的案例 我正在编写一个用于创建模式的自定义插件 本质上我是即时创建一个 divdocument createElement div 并将其附加到带有几个类的主体中 这些类定义颜色和不透明度 我想严格