CSS3 FlexBox 过渡

2024-04-06

在这个 codepen 示例中:http://codepen.io/DrYSG/pen/ovctn http://codepen.io/DrYSG/pen/ovctn我创建了三个弹性盒。我想要的效果是,当鼠标悬停在中间框上时,它的尺寸会增大(演示中的颜色变化只是为了帮助我了解悬停)。

在 FireFox v19 中,这几乎可以正常工作。但奇怪的是它选择了动画的开始和结束宽度。

在 Chrome v25 中,我遇到快速不稳定的状态振荡(闪烁)。确实不正确。

在 IE10 中,我得到了与 FireFox 相同的过渡,但过渡不平滑。


None

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

CSS3 FlexBox 过渡 的相关文章

  • 当鼠标悬停在伪元素上时触发CSS动画?

    我试图在伪元素悬停时触发 CSS 动画 我目前有 2 个视频 显示鼠标悬停在浏览器的 50 一侧 我想应用类似的效果来为某些文本添加动画效果 我想要 p 标签在移动时向上移动并淡入 p h1 同时以同样的方式标记 就像这个网站一样 http
  • 如何在 font Awesome 图标链接下方添加添加文本?

    我正在尝试在我的 Blogger 模板中的 font awesome Icons 下添加一些文本 这是我想要实现的目标的图像 我想要实现的外观图片 https i stack imgur com BVYlh png 但到目前为止我已经做到了
  • 是否可以使用 Flying Saucer (XHTML-Renderer) 将 css 解析为类路径资源?

    我正在尝试将资源打包到 jar 中 但我无法让 Flying Saucer 在类路径上找到 css 我无法轻松构建 URL 来无缝解决此问题 https stackoverflow com questions 861500 url to l
  • 从控制台检查 chrome 版本

    有没有办法从控制台检测 Google Chrome 的版本 我知道我可以解析用户代理字符串 但我更喜欢更简洁的方式 这是我目前拥有的 var uaStr navigator userAgent toLowerCase var index u
  • 如何动态突出显示网页上的字符串?

    我想创建带有 url 的页面 例如 http xyzcorp schedules 2015Aug24 Aug28 Jim Hawkins http xyzcorp schedules 2015Aug24 Aug28 Billy Bones
  • 如何适应特定子元素的宽度?

    problem 我正在尝试创建一个技能表 我无法问下一个问题为什么 所以我创建了一个新帐户并询问 当前状态 我想将元素的宽度与 meter 也就是说 如何设定区块的标准 meter 子元素 在上面的 gif 中 img meter 我想要保
  • Firefox Placeholder Before CSS 选择器不起作用

    我使用的是最新的firefox 30 0 我正在尝试在必填字段的占位符之前插入红色字体真棒星号 我在 Chrome 中工作没问题 但我在 FF 和 上遇到问题 这是一个说明我的问题的代码笔 http codepen io anon pen
  • 如何使用 vanilla JS 实现可维护的反应式 UI

    今天我遇到了一个问题 可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决 遗憾的是 无法使用它 以下 简化 情况 链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面 其
  • @font-face 和 font-variant 是个坏主意吗?

    如果我使用 font face字体和font variant small caps对于相同的选择器 字体将回退到 Safari 中的下一个系统默认字体 我该如何解决这个问题 我一开始在创建一个示例来复制您的问题时遇到了一些麻烦 这让我意识到
  • HTML 元素的默认背景颜色是什么?白色还是透明?

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co
  • Internet Explorer 中的锯齿状按钮边缘

    如何去除 Internet Explorer 中宽按钮的锯齿状边缘 例如 您还可以通过设置来消除 Windows XP 的按钮样式 以及 Windows 的所有其他版本 background color and or border colo
  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这
  • 如何在不阻止触摸启动的情况下防止“过度滚动历史导航”?

    我正在实现基于滑动的导航 但我在使用 Chrome 时遇到了麻烦 当页面向右拖动时 会触发新实现的功能 过度滚动历史导航 从而导致跳回 到 历史 1 为了防止这种情况 我必须打电话 preventDefault on touchstart
  • 如何使用C#与Chrome(Chrome扩展)通信?

    我想创建一个可以在我的 C 应用程序和扩展之间进行通信的桥梁 这是我真正想要的解释 我创建了一个扩展 它将获取 HTML 元素的详细信息 但每次启动 Chrome 时都会启动 除了这样做之外 有什么方法可以向我的 chrome 扩展发送消息
  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用
  • CSS 网格框架中的间距有什么作用?

    我正在深入研究 Web 开发 并且正在使用 Blueprint CSS 框架 其中包括网格系统 我有几个问题 水沟有什么用处 当然 它们不用于在列之间包含空间 因为您可以使用 margin CSS 属性来实现这一点 对吗 或者排水沟只是一种
  • chrome 扩展弹出窗口和背景 ajax

    我有一个要求 background html 每 10 分钟持续更新一次 当我单击弹出窗口时 它应该触发后台立即更新并在弹出窗口中显示结果 我有使用 ajax 工作的后台更新 并且我有弹出窗口触发后台以使用 ajax 工作进行立即更新 但是
  • 将特定字形与网络字体一起使用

    使用网络字体 我想使用字体功能设置 CSS 中的选项以及跨度类HTML 中 以便使用字体集中的特定替代字形 我需要以正确的语法使用哪些值 GID Unicode 才能定位特定的目标glyph内glyph备择方案 这些功能使用 OpenTyp
  • PDF 在 Safari 中隐藏 Jquery Modal

    这是与我有关的事情this https stackoverflow com questions 24052681 pdf hide jquery modal in ie问题 在 IE 中 我在对话框中使用 iframe 解决了问题 所以它工
  • Chrome 扩展:强制 popup.html 关闭

    我想知道是否可以强制 popup html 关闭 在弹出的 javascript 中 window close

随机推荐

  • jQuery 简单值与 .val() 出现问题

    我有以下代码 document ready function alert font someClass val 这里有一个Fiddle http jsfiddle net 2wwzD 1 用它 有谁知道为什么我无法返回字体标签的值 我是否假
  • 求树的深度?

    我对二叉树和递归非常陌生 我的程序是找到树的高度 但我有点困惑为什么我的程序不起作用 struct Node int value Node left Node right int heightOfTree Node node if node
  • 当属性名称为参数时如何查询属性值?

    通常我们可以查询属性值 例如 Match n Product where n name iPhone X return n 但是 就我而言 我不知道应该匹配哪个属性 但我只知道值 在这种情况下属性名称就变成了一种变量 我想要这样的东西 Ma
  • 如何收到 wifi 网络状态变化的通知?

    我正在编写一个通过 wifi 连接到 telnet 服务器的应用程序 我有一个管理套接字连接的服务 一切正常 但当手机休眠时 它会断开 wifi 无线电 这会导致套接字连接中断 并抛出 SocketException 我觉得我应该能够设置一
  • 如何在 Windows 中使用命令提示符创建多个空文件

    我正在开发一个项目 需要创建多个空文件 过去 我使用过 touch 命令 但这只能让我一次创建一个文件 有没有办法在 Windows 中使用命令提示符创建多个空文件 我感谢您提出的任何建议或解决方案 谢谢你 A FOR循环将允许您创建任意数
  • alias_method 和 class_methods 不能混合使用吗?

    我一直在尝试修补全局缓存模块 但我不明白为什么这不起作用 有没有人有什么建议 这是错误 NameError undefined method get for module Cache from irb 21 in alias method
  • 使用 Dataset API 在 Tensorflow 中批量滑动窗口

    有没有办法修改一批图像的组成 目前 当我创建例如大小为 4 的批次 我的批次将如下所示 Batch1 Img0 Img1 Img2 Img3 第2批 Img4 Img5 Img6 Img7 我需要修改批次的组成 以便它只会转移到下一个图像一
  • 运行 .net 应用程序而不安装 .net 客户端配置文件?

    我在framework 4 0中构建了一个c net应用程序 我不反对为客户端的电脑安装 net 但是在客户端安装它太大了 这不可能有一些小的安装程序或redist包吗 安装并有助于轻松运行 net 应用程序 因为仅为小型应用程序安装完整的
  • 在 Go 中不睡眠的情况下测试异步结果

    我的代码中有相当多的组件具有持久的 go 例程 用于侦听事件以触发操作 大多数时候 他们没有理由 除了测试之外 在完成该操作后发回通知 但是 我的单元测试正在使用 sleep 来等待这些异步任务完成 Send notification ev
  • JUnit 4 与 TestNG - 更新 2013 - 2014 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 JUnit 4 和 TestNG 曾经具有可比性 这两个测试框架有何优缺点 我今天比较了 TestNG 和 JUnit4 以我有限的测试框架经验
  • 将区间表示法解析为 Guava Range

    我需要将包含标准间隔表示法 即 8 100 6 10 等 的字符串解析为 Guava Range 对象 我将如何在 Java 中做到这一点 是否有一个实用程序包可以将字符串解析为构建 Guava Range 对象所需的组件 如果我们看一下这
  • 无法读取未定义的属性“native-element”

    我用的是离子2 我需要获取 HTML 元素值 其实我用的是viewchild 这是我的html模板代码 div class messagesholder last callFunction div p class chat date cha
  • 检索已排序的可手动实例内的隐藏标头

    使用时手动表 http handsontable com 似乎很难从上下文菜单中检索行的标题 考虑以下数据源 var data function return 1212 roman i ii iii 3121 numeric 1 2 3 4
  • 在 JavaScript 中覆盖对象的括号 [index] getter/setter?

    我目前正在构建一个双向链表 http en wikipedia org wiki Doubly linked list执行 我正在尝试 或希望 做的是使用 setter getter 来设置列表中的元素 就像在数组中一样 var index
  • 如何使 svg 元素(例如矩形)scrollIntoView?

    我在图形面板中有一个 svg svg 中的所有节点都在另一个面板中列出 我希望通过单击节点列表中的节点 svg 可以滚动到该节点 每个节点都是一个矩形 但我发现只有上边框在视图中 而节点的其余部分仍然在视图之外 有什么办法可以解决这个问题吗
  • 有人有使用 Python Zeep 和 Mock 对 SOAP API 进行单元测试的示例吗?

    我正在构建一个使用 Python zeep 访问第三方 SOAP API 的 Python 应用程序 我想使用模拟响应来实现一些单元测试 因为我并不总是有一个实时服务器来运行我的测试 我是单元测试的新手 不太确定从哪里开始 我见过使用模拟与
  • Java 因实现访问权限较弱的接口方法而出现错误

    当我编译这段代码时 interface Rideable String getGait public class Camel implements Rideable int x 2 public static void main Strin
  • 在codeigniter中上传doc和docx文件

    大家好 我在 codeigniter 中上传 doc 和 docx 文件时遇到麻烦 我检查了 config mime php 中的 mime 类型 谁能告诉我有什么问题吗 以下是我的 mime php 文件 doc gt applicati
  • Fabric js 或 imagick 从图像中删除白色

    我遇到了这种情况 我很难在谷歌上搜索并解释 我们公司在铝上打印照片 我们为客户提供两种选择 第一个选择是将他们的照片打印在铝上 就像 他们把照片给了我们 所以如果照片有白色 背景 图片以白色背景打印 简单的 像那样 第二个选项是我们可以打印
  • CSS3 FlexBox 过渡

    在这个 codepen 示例中 http codepen io DrYSG pen ovctn http codepen io DrYSG pen ovctn我创建了三个弹性盒 我想要的效果是 当鼠标悬停在中间框上时 它的尺寸会增大 演示中