css-transitions 相关问题

是否有可能为 ::before 最后一个词应用不同的背景颜色例如：` .测试::之前{ 内容：'堆栈溢出'；红色; } 是否有可能为 ::before 最后一个词应用不同的背景颜色例如：` <style> .test::before{ content : 'stack overflow'; color: red; } </style> <p class="test"></p> ` 在上面提到的示例中，我想为“溢出”文本添加不同的颜色，有什么想法吗？要渲染您想要可视化的输出，这可能是一种方法： .test::before { content: 'stack'; } .test::after { content: ' overflow'; color: red; } <p class="test"></p> 但这不合适。如果您的内容只是装饰性的，为什么不将其放入<span>？使用 data-text 和 :after with content: attr(data-text) ，使用普通 CSS 完全可以设置最终单词的样式，无需使用 javascript。 <h1 data-text="overflow">stack overflow</h1> h1 { color: #154734; } h1:after{ content: attr(data-text); color: #BD8B13; transform: translateX(-100%); position: absolute; } 演示

javascript html css css-transitions

回答 2 投票 0

非特定值的顺风宽度过渡

我有一个用 Tailwind 和 Vue js 3 设计的按钮。这个按钮包含一个经典的“登录”文本。我想实现当用户点击并触发加载状态时，按钮sh...

vuejs3 tailwind-css css-transitions

回答 1 投票 0

当我使用过渡集更改 css 背景属性时，为什么我的背景会闪烁白色？

我的背景代码如下：。接触 { @include背景（线性渐变（#3e72ab，#39699d））；颜色：#fff；显示：无；高度：500px；过渡：背景...

javascript jquery css css-transitions

回答 2 投票 0

以圆圈等距离旋转图标

我使用圆形中间图像和围绕中间圆形图像旋转的 3 个图标，现在 3 个图标未均等对齐，每个图标需要相等的距离 120 度。我尝试在关键帧上工作...

javascript html css animation css-transitions

回答 1 投票 0

尝试在 JS 中访问 CSS 属性值，无法在“DOMContentLoaded”事件之外使用它

我正在尝试访问场景中元素的过渡持续时间属性。问题是，当尝试在没有“DOMContentLoaded”事件侦听器的情况下获取它时，它返回 0 或空白字符串...

javascript html css css-transitions

回答 1 投票 0

尝试在 JS 中访问 CSS 属性值，无法在“DOMContentLoaded”事件之外使用它

我正在尝试访问场景中元素的过渡持续时间属性。问题是，当尝试在没有“DOMContentLoaded”事件侦听器的情况下获取它时，它返回 0 或空白字符串...

javascript html css css-transitions

回答 1 投票 0

使用 jQuery 水平滚动到目标

尝试通过创建一些超级简单且语义化且仅与锚链接一起使用的东西来彻底改变轮播世界。它大部分工作正常，但它跳转到 href 而不是滚动

jquery css-transitions carousel horizontal-scrolling

回答 1 投票 0

跳至 CSS 动画末尾

我已经实现了一个具有开始和结束状态的CSS3动画。一旦达到结束状态，动画就会停止并且不再重复。我需要做的是有一个“跳到结束”链接，通过...

css css-transitions css-animations

回答 2 投票 0

如何有效地在悬停时为 CSS 变量颜色变化设置动画？

我正在开发一个网络项目，我使用 CSS 变量定义了几种颜色（--primary-color、--secondary-color 等）。我想在悬停时平滑地动画这些颜色的变化......

html css css-transitions

回答 1 投票 0

用于布局更改的 CSS 过渡（当 DOM 中显示其他元素时）？

当显示新块时，其他块可能会在页面上移动。当显示另一个块时，是否可以使用 CSS 过渡来动画块的移动？初始状态：

html css css-transitions

回答 3 投票 0

动画Flexbox顺序以实现平滑滚动无限滚动

我正在尝试制作一个无限滚动轮播。假设它有三个项目，HTML 是：我正在尝试制作一个无限滚动轮播。假设它有三个项目，HTML 是： <html> <div class="buttons"> <div class="button button-left" data-direction="left">LEFT </div> <div class="button button-right" data-direction="right">RIGHT </div> </div> <div class="post-carousel"> <div class="carousel-slides"> <div class="carousel-slide red" data-placement="1" style="order: 1">ONE</div> <div class="carousel-slide blue" data-placement="2" class="blue" style="order: 2">TWO</div> <div class="carousel-slide" data-placement="3" style="order: 3">THREE</div> </div> </div> CSS 类似于： .post-carousel { margin: 0 auto 40px; outline: 1px solid black; width: 640px; } .buttons { display: flex; justify-content: space-between; width: 620px; margin: auto; } .button { background-color: #fff; border: 1px solid green; z-index: 2; padding: 4px; width: 45px; } .carousel-slides { column-gap: 10px; display: flex; flex-flow: row nowrap; padding: 10px 0; margin: 0 10px; } .carousel-slide { background-color: lightgreen; border-radius: 16px; outline: 1px solid var(--RISD-Blue-Med-Light, #d6e2ff); display: flex; flex-direction: column; flex: 200px 0 0; font-size: 12px; gap: 16px; height: 50px; justify-content: flex-start; max-width: 280px; outline: 2px solid green; padding: 24px 0; text-align: center; } .carousel-slide.red { background-color: red; } .carousel-slide.blue { background-color: blue; } JS 是： document.querySelectorAll('.buttons .button').forEach((button) => { button.addEventListener('click', (event) => { slide(event.target.getAttribute('data-direction')); }); }); const slide = (direction) => { const allSlides = document.querySelectorAll( '.carousel-slides .carousel-slide' ); if ('right' === direction) { allSlides.forEach((el) => { el.style.order--; if (el.style.order < 1) { el.style.order = allSlides.length; } }); } else if ('left' === direction) { allSlides.forEach((el) => { el.style.order++; if (el.style.order > allSlides.length) { el.style.order = 1; } }); } }; 代码笔如下： https://codepen.io/phil-green-CTI/pen/abrKNKw?editors=1111 单击右侧或左侧按钮可对弹性框中的项目重新排序，并将最后一个放入第一个（或第一个放入最后一个）。这可行，但我的问题是我希望过渡平滑，以便它们很好地滚动到位，而不是仅仅重新定位。理想情况下，当第一个成为最后一个（或反之亦然）时，我希望它也从 div 边缘滚动（或从屏幕上滚动）。我该怎么做？您需要先滑动它们，然后更新顺序。您可以通过 js 或 css 中的动画/过渡来设置它使用 CSS 和延迟禁用焦点的示例，以便您可以再次单击以再次触发动画。这是一个 P.O.C. ;) document.querySelectorAll(".buttons .button").forEach((button) => { button.addEventListener("click", (event) => { slide(event.target.getAttribute("data-direction")); setTimeout(() => { event.target.blur(); }, "500"); }); }); const slide = (direction) => { const allSlides = document.querySelectorAll( ".carousel-slides .carousel-slide" ); if ("right" === direction) { allSlides.forEach((el) => { el.style.order--; if (el.style.order < 1) { el.style.order = allSlides.length; } }); } else if ("left" === direction) { allSlides.forEach((el) => { el.style.order++; if (el.style.order > allSlides.length) { el.style.order = 1; } }); } }; .post-carousel { margin: 0 auto 40px; outline: 1px solid black; width: 640px; overflow: hidden; box-shadow: 0 0 0; } .buttons { display: flex; justify-content: space-between; width: 620px; margin: auto; } .button { background-color: #fff; border: 1px solid green; z-index: 2; padding: 4px; width: 45px; } .carousel-slides { column-gap: 10px; display: flex; flex-flow: row nowrap; padding: 10px 0; margin: 0 10px; } .carousel-slide { background-color: lightgreen; border-radius: 16px; outline: 1px solid var(--RISD-Blue-Med-Light, #d6e2ff); display: flex; flex-direction: column; flex: 200px 0 0; font-size: 12px; gap: 16px; height: 50px; justify-content: flex-start; max-width: 280px; outline: 2px solid green; padding: 24px 0; text-align: center; transition: order 0s 0.5s; transform: translateX(0%); } .carousel-slide.red { background-color: red; } .carousel-slide.blue { background-color: blue; } .buttons:has(.button-left:focus)~.post-carousel div.carousel-slide { animation: slideleft 0.6s linear; } .buttons:has(.button-left:focus)~.post-carousel div.carousel-slide { animation: slideleft 0.6s linear; } .buttons:has(.button-right:focus)~.post-carousel div.carousel-slide { animation: slideright 0.6s linear; } .buttons:has(.button-right:focus)~.post-carousel div.carousel-slide[style="order: 1;"] { box-shadow: 416px 0 silver; transition: 0; } .buttons:has(.button-left:focus)~.post-carousel div.carousel-slide[style="order: 3;"] { box-shadow: -416px 0 silver; transition: 0; } @keyframes slideleft { to { transform: translateX(216px); } } @keyframes slideright { to { transform: translateX(-216px); } } <div class="buttons"> <div class="button button-left" tabindex="0" data-direction="left">LEFT </div> <div class="button button-right" tabindex="0" data-direction="right">RIGHT </div> </div> <div class="post-carousel"> <div class="carousel-slides"> <div class="carousel-slide red" data-placement="1" style="order: 1">ONE</div> <div class="carousel-slide blue" data-placement="2" class="blue" style="order: 2">TWO</div> <div class="carousel-slide" data-placement="3" style="order: 3">THREE</div> </div> </div>

javascript css flexbox css-transitions

回答 1 投票 0

CSS 过渡在悬停时不起作用

我遇到了问题。当我将鼠标悬停在图像上时，会出现黑色叠加层，但 CSS Transition 属性不起作用。这是 HTML：我遇到了问题。当我将鼠标悬停在图像上时，会出现黑色叠加层，但 CSS Transition 属性不起作用。这是 html： <div class="col-md-12"> <div class="collection-category"> <img src="http://dummyimage.com/600x400/#C1C1C1/fff" /> <a href="#"> <div class="overlay_wrap"> <div class="overlay"> <h2 class="collection_title">Headline One</h2> </div> </div> </a> </div> </div> CSS 是： .collection-category { display: block; overflow: hidden; margin: 10px 0; position: relative; } .collection-category img { width: 100%; max-height: 250px; } .collection_title { display: table-cell; vertical-align: middle; font-size: 28px; } .overlay_wrap { position: absolute; top: 0; bottom: 0; left: 0; right: 0; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .overlay { display: none; background: rgba(2, 2, 2, 0.61); color: #FFF; text-align: center; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .collection-category:hover>a>.overlay_wrap>.overlay { display: table; height: 100%; width: 100%; } 这是 JSFiddle http://jsfiddle.net/cnbvoe32/ 任何帮助将不胜感激。提前致谢。这是因为你无法从display: none过渡到display: table。相反，您可以通过将初始显示设置为 opacity 以及 table 然后转换为 opacity: 0 来转换 opacity: 1 属性：更新示例 .overlay { display: table; background: rgba(2, 2, 2, 0.61); color: #FFF; text-align: center; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; opacity: 0; height: 100%; width: 100%; } .collection-category:hover>a>.overlay_wrap>.overlay { opacity: 1; } 只是路过，因为我正在寻找相同的解决方案。我不知道你是否还在乔什身边，但非常感谢！ Chat GPT 没有注意到我将显示设置为表格。我所有减缓过渡的尝试都是徒劳的。我不知道该表不会受到转换的影响。

html css hover css-transitions

回答 2 投票 0

将缓入与缓出相匹配

我有两个带有动画的元素。第一个元素动画持续 1 秒，并具有三次贝塞尔曲线 (0.5, 0, 0.5, 1)（缓入和缓出）。第二个元素动画开始 0.5s

css animation css-animations css-transitions bezier

回答 1 投票 0

使用“display”属性的“allow-discrete”值转换手风琴内容

我有一个手风琴，其中内容在视觉上隐藏并使用网格模板行上从 0fr 到 1fr 值的转换来显示。它的灵感来自 Kevin Powell 在其 YouTube 频道上提出的解决方案...

css css-transitions accordion

回答 1 投票 0

CSS 动画在 wow js 中无法正常工作

我已经为我的项目集成了wow.js，但我遇到了动画问题。仅当我从 anima 粘贴 css 类时，我用来为 div 制作动画的动画类才起作用......