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 过渡淡入 的相关文章

  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript
  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ
  • div 中的中心文本?

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical
  • Sass:@use 出错,未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb
  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 如何使使用 css 调整大小的图像在 IE 中看起来不错?

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 如何检测一个或多个 JS/CSS 库加载失败(例如 CDN)?

    Premise 我找到了这两个答案 但我不明白如何将它系统地应用于许多库 检测并记录外部 JavaScript 或 CSS 资源加载失败的情况 https stackoverflow com questions 5683824 detect
  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 响应式图像 - srcset 和尺寸属性 - 如何正确使用两者:基于设备像素比和基于视口的选择一起?

    到目前为止 我经常读到这个问题 并且它也发生在我自己的项目中 这里介绍一下我到目前为止所发现的关于 srcset 和 size 属性的内容 关于如何使用有两种不同的可能性srcset 属性 来源 w3c http w3c github io
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad

随机推荐

  • 将 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 并将其附加到带有几个类的主体中 这些类定义颜色和不透明度 我想严格