css-transitions 相关问题

CSS Transitions允许CSS值的属性更改在指定的持续时间内平滑发生。

基于状态变化的条件渲染时,React 转换不起作用

我有一个切换按钮来更改布尔状态。当状态切换时,我希望一个特定的块随着转换而出现/消失。但过渡不起作用。有什么吗...

回答 1 投票 0

过渡不适用于 HeadlessUI 的 Dialog 组件

我正在使用 Next.JS 14.1.3 我从 HeadlessUI 添加了 并设置了 TailwindCSS,但是当我尝试在页面上打开模态窗口时,尽管我提供了所有内容,但根本没有任何转换...

回答 1 投票 0

单击 html、css 和 javascript 中的 a 标签时如何创建视频过渡

我正在尝试使用隐藏且高度为 0% 的视频在 html 页面之间创建过渡。我不知道从哪里开始,希望在这个问题上得到一些指导。这是我的代码...

回答 1 投票 0

设置 CSS 过渡根据元素大小使用速度?

是否可以将 CSS 过渡设置为使用速度而不是持续时间? 现在,如果我想要一个将元素从另一个元素的左向右移动的类,速度会有很大差异。 如果我有

回答 3 投票 0

是否可以为变换选项设置不同的持续时间/延迟?

我想为我的 html 对象设置几个转换选项,但具有不同的持续时间和延迟。 如果我尝试使用类似的东西: -webkit-transition:-webkit-transform,不透明度; -webkit-tran...

回答 4 投票 0

为 CSS 转换指定自定义计时函数?

我现在经常使用 CSS 过渡,但发现它仅限于只能访问缓入、缓出等。 贝塞尔曲线选项似乎允许最多的控制,但即使这样也不允许......

回答 5 投票 0

如何创建CSS3弹跳效果

我正在尝试在动画末尾添加弹跳效果,而不使用任何第三方代码或javascript。我成功创建了动画,但无法实现反弹效果。 这就是……

回答 3 投票 0

如何固定这个水平手风琴中第四张幻灯片的宽度?

此水平手风琴中的幻灯片 1-3 效果很好,但是当您单击第四张幻灯片时,您将看到文本滑过空白区域并就位。背景也有点小...

回答 1 投票 0

使用 Ken Burns 效果向纯 CSS 背景幻灯片添加更多幻灯片

任何人都可以帮助我,或者至少告诉我如何向这个纯 CSS 幻灯片添加 2 张幻灯片吗? 这是原始链接:https://www.cssscript.com/pure-css-background-slideshow-ken-burns-effe...

回答 1 投票 0

隐式宽度过渡

隐式宽度(即向包含文本的元素添加填充,以便为父容器提供特定但隐式的宽度)是一件美妙的事情。然而,这显然会产生一些

回答 1 投票 0

CSS如何设置文本下方点下划线的自动长度

在 CSS 中,我希望在文本下方添加下划线,但文本可以根据用户输入而变短或变长,并且点下划线必须绘制到行尾(第 A4 页)。 ... 在 CSS 中,我希望在文本下方添加下划线,但文本可以根据用户输入而变短或变长,并且点下划线必须绘制到行尾(第 A4 页)。 <p style="font-size: 13px;"> I come from ៖ <u style="border-bottom: 1px dashed #999; text-decoration: none; width:100%;"> USA </u> </p> 我的代码仅返回带下划线的文本下方的虚线下划线。 1. 如果您希望整行加下划线, 您需要为文本设置width: 100%;,以便将边框绘制到行尾。 .underline{ width: 100%; border-bottom: 1px dashed #999; } <p class="underline"> I come from USA </p> 2. 如果您希望下划线从文本中间开始到行尾, 您可以使用 ul 和 li 并排放置文本的两个部分,然后使用 width: calc(100% - 100px); 来定位要添加下划线的文本部分。 100px 被减去是因为文本的第一部分没有下划线,因此如果文本的无下划线部分较长,则需要根据其宽度减去更大的部分。 .underline { width: calc(100% - 100px); border-bottom: 1px dashed #999; } ul { list-style-type: none; padding-left: 0; } li p { display: inline-block; } <ul> <li> <p> I come from </p> <p class="underline"> USA </p> </li> </ul>

回答 1 投票 0

如何用window.scrollTo()实现平滑效果

我可以使用以下命令滚动到 200px btn.addEventListener("点击", function(){ window.scrollTo(0,200); }) 但我想要一个平滑的滚动效果。我该怎么做?

回答 3 投票 0

如何使用JS文件添加转场

我正在开发一个网格布局项目。在此项目中,当您将鼠标悬停在元素上时,元素行会增加,因此大小也会增加。问题是这样做的时候变化非常快,我......

回答 1 投票 0

如何让 css 转换不影响我的 javascript

我有一个跟随光标的圆圈,当我将鼠标悬停在任何文本上时,我还使其展开。问题是当我尝试添加转换时:2s;到CSS使其顺利扩展。当我添加它时

回答 1 投票 0

CSS3 过渡 - 淡出效果

我正在尝试用纯CSS实现“淡出”效果。这是小提琴。我确实在网上研究了几个解决方案,但是,在阅读在线文档后,我试图弄清楚......

回答 9 投票 0

给定 y 得到贝塞尔曲线上的 x

我有一条贝塞尔曲线:(0,0)、(.25,.1)、(.25,1) 和 (1,1)。 此处以图形方式显示:http://cubic-bezier.com/#.25,.1,.25,1 我们看到x轴上是时间。 这是我的未知数。这是一个单位...

回答 3 投票 0

悬停时网格项目平滑过渡

我有这个表,默认情况下为 3 列 2 行 (3x2)。当 on :hover 发生时,它变成 2 列 3 行 (2x3) 默认---(3x2): | 🐱 猪 | 🐦 皮江 | 🐢 乌龟 | | 🐟 鱼 |...

回答 1 投票 0

为什么CSS背景过渡不平滑?

我正在尝试为我的标题背景图像设置动画,但过渡并不像我在教程中看到的那样顺利。 (忽略梯度) 动画:幻灯片10s无限; @关键帧幻灯片{ 0% { 背景...

回答 3 投票 0

为什么在使用 ese-in-out 时,过渡有效,而过渡出却不起作用?

我目前正在尝试编写苹果主页网页的代码,但我在下拉菜单转换方面遇到了问题。我正在尝试向下拉列表添加过渡,以便它可以缓入缓出。然而,只有

回答 1 投票 0

需要帮助使用 CSS 实现悬停时平滑的网格项目过渡

问题: 我要么傻,要么太傻,我可能把事情复杂化了。但我感到非常沮丧,所以我正在寻求帮助。所以我有这个表,默认情况下是 3 列 2 行(...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.