css-transitions 相关问题

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

CSS Transition 动画消耗大量 CPU/GPU

我正在我的网站上实现一个小效果。 DOM 元素之一的大小随机变化。 const theDiv = document.getElementById("the-div"); 函数动画（）{ 常量值 = Math.floor(

html css performance css-transitions

回答 1 投票 0

如何在 CSS 中的图像悬停效果上创建图像叠加

我想创建类似的效果，如下图所示。它应该支持不同尺寸的图像和图像叠加。我已经成功创建了上述效果，但是图像

html css image css-transitions

回答 2 投票 0

链接上的 css3 过渡在加载时显示蓝色

在我的网站 (http://amosjackson.com) 上，导航链接使用 css 过渡来在用户将鼠标悬停在其上时更改颜色。尽管在样式表中将颜色设置为白色，但当页面

html css css-transitions

回答 4 投票 0

toggleClass 后不同的 CSS 过渡

大家好我最近制作了这支笔 https://codepen.io/alexyap/full/MmYvLw/，我被我的导航菜单难住了。当它过渡时它工作正常，但当它淡出时看起来很糟糕......

jquery css css-transitions

回答 1 投票 0

css3 高度过渡不起作用

我在使用 css3 过渡时遇到问题我怎样才能让过渡顺利它立即出现我希望当我将鼠标悬停在 div 框上时，它会慢慢改变其高度 html代码我在使用 css3 过渡时遇到问题我怎样才能让过渡平滑它立即出现我希望当我将鼠标悬停在 div 框上时，它会慢慢改变其高度 html代码 <div id="imgs"> <img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" /> <img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" /> <img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" /> <img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" /> <img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" /> <img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" /> <img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" /> <img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" /> <img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" /> <img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" /> <img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" /> <img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" /> </div> jsfiddle 我相信你需要设置一个指定的高度而不是自动。 http://jsfiddle.net/BN4Ny/ 这可以顺利扩展。但不确定你是否想要那种小的关闭打开效果。我刚刚分叉了你的 jsfiddle 并添加了指定的高度。这个解决方案不需要javascript，也没有需要预先确定容器高度的问题。这是通过使用 max-height 属性并将其值设置为较高值来实现的。 #imgs { border:1px solid #000; border-radius:3px; max-height:20px; width:100%; overflow:hidden; transition: 2s ease; } #imgs:hover { max-height:15em; } <div id="imgs"> <img src="https://picsum.photos/seed/picsum/400/600" /> </div> 您可以将图像放在列表项中，然后在 li 上进行转换，而不是在容器上使用设定的高度或使用 JS（这都是尴尬的解决方案）。如果所有图像的高度相似，则意味着容器内的内容仍然可以是动态的。例如... /* CLOSED */ div.container li { height:0px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} /* OPEN */ div.container:hover li { height:30px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} 以下是具体操作方法：http://jsfiddle.net/minitech/hTzt4/ 不幸的是，为了保持灵活的高度，JavaScript 是必需的。我正在使用这个方法：使用最大高度来过渡高度而不是直接高度... 例如： div { height: auto; max-height:0; } .toggle-above-div:hover div { max-height:0; } 使用 grid，您可以使用过渡，而无需向元素添加特定高度。 document.querySelector("button").addEventListener("click", e => { document.querySelector(".wrapper").classList.toggle("open") }) .content{ min-height: 0; text-align: justify; } .wrapper{ display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 200ms; width: 300px; } .wrapper.open { grid-template-rows: 1fr; } <button>Toggle</button> <div class="wrapper"> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quantum Aristoxeni ingenium consumptum videmus in musicis? Tum Quintus: Est plane, Piso, ut dicis, inquit. Duo Reges: constructio interrete. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Satis est tibi in te, satis in legibus, satis in mediocribus amicitiis praesidii. Quamquam tu hanc copiosiorem etiam soles dicere. Hoc est non modo cor non habere, sed ne palatum quidem. Non est ista, inquam, Piso, magna dissensio. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quod cum dixissent, ille contra. </div> </div>

html css css-transitions

回答 6 投票 0

如何让 CSS 关键帧在按下按钮时播放？

我有一个在 5 个关键帧中播放的 CSS 动画。但是，我想将这些关键帧绑定到一个按钮。。水{ 宽度：162px；高度：162 像素；背景颜色：#1D89E7；边界半径...

html css css-selectors css-animations css-transitions

回答 1 投票 0

尝试通过 JavaScript 执行 CSS 转换是行不通的

当我尝试通过 JavaScript 执行 CSS 转换时，它们对我不起作用。这是我的 HTML 代码当我尝试通过 JavaScript 执行 CSS 转换时，它们对我不起作用。这是我的 HTML 代码 <div class="search-icon"> <i class="fas fa-search search-icon-header"></i> <img src="images/close-icon.svg" alt="close-icon-search" class="close-icon-search"> </div> <div class="search-bar" id="search-bar"> <div class="search-container"> <form class="search-form"> <input type="text" placeholder="Search..."> <button type="submit"><i class="fas fa-search search-icon-action"></i></button> </form> </div> </div> 这是我在 JavaScript 中的函数： let isSearchBarOpen = false; function toggleSearchBar() { if (isSearchBarOpen) { searchBar.style.display = "none"; } else { searchBar.style.display = "flex"; searchBar.classList.add("search-bar-open") } isSearchBarOpen = !isSearchBarOpen; toggleSearchIcon(); } 当搜索栏打开时，会添加 .search-bar-open 类。现在是CSS： .search-bar { display: none; background-color: #000; color: #fff; position: absolute; top: 0; left: 0; right: 0; padding: 10px 5px; z-index: 1000; margin: 0 auto; transition: top 2s ease-in; } .search-bar-open { top:90px; } 单击搜索按钮时，会发生以下情况（或者如果我没记错的话应该发生）：该函数检查 isSearchBarOpen 是否为 true 或 false。如果 true（即，如果搜索栏打开），则会添加内联样式 (display:none) 隐藏搜索栏。如果是 false（即，如果搜索栏已关闭），则会添加内联样式 (display:flex) 以使其显示。此外，还添加了一个类 (.search-bar-open)。从那里，如果我们看一下 CSS…… 搜索栏打开时（显示时）会加载 .search-bar-open 类和 display:flex 内联样式。一方面，所述内联样式通过特定性覆盖通过 display:none 类应用的 .search-bar CSS 属性。此外，还添加了 .search-bar-open 类。现在，我假设，当应用.search-bar-open类时，应该发生.search-bar中规定的转换，即： a.我在top:0;… b. 2 秒后，ease-in… c.我已经准备好了top:90px;。我一定是误解了一些东西，因为它不起作用:-( 如果您使用 JS 使元素可见并添加类来触发转换，则它将不起作用，因为 JS 同时执行这两个操作。如果元素上的属性发生更改，则会触发转换，但像这样完成，top属性永远不会更改，当元素变得可见时它已经存在了。您可以在两者之间添加 JS 操作来触发浏览器“重排”。这样，浏览器首先使元素可见，在页面上绘制该元素，然后添加类以触发转换。 searchBar.style.display = "flex"; searchBar.offsetWidth; searchBar.classList.add("search-bar-open")

javascript html css css-transitions dom-manipulation

回答 1 投票 0

更改我的作品集网站的鼠标光标圆圈比例

我尝试寻找一些教程来创建自定义圆形光标，该光标也隐藏普通鼠标光标。我这样做了，我也有一个我想要的不同的混合模式。问题是我

javascript html css hover css-transitions

回答 1 投票 0

转换：translateZ 仅在转换完成后应用

我是否遇到了导致渲染错误的边缘情况，或者我是否编写了一些糟糕的CSS？为了复制这一点，我编写了以下演示： body 元素嵌套一个具有跨度的方形 div

css css-transitions css-transforms

回答 1 投票 0

背景滤镜模糊的过渡导致深色插入边框（仅限 Chrome 和 Windows）

在背景过滤器上的过渡期间，我注意到一个黑暗的插入阴影，仅在过渡期间可见。看来这只发生在 Windows（10 和 11）上基于 chrome/webkit 的浏览器中：我的