css-transitions 相关问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pulse</title> <style type="text/css"> body { padding: 300px; background-color: rgb(15, 19, 24); } .m { display: flex; justify-content: center; align-items: center; transition: all 0.8s ease-in-out; } .m * { transition: all 0.8s ease-in-out; } .m *:hover { animation: /*animation of all children*/ 0.4s ease 1s infinite normal both; } .m1 { width: 100px; height: 100px; background-color: rgb(255, 191, 29); border-radius: 100px; z-index: 2; animation: Pulses2 1.8s ease 1.2s infinite normal both; } .m2 { position: absolute; width: 100px; height: 100px; background-color: rgb(255, 191, 29); border-radius: 100px; z-index: 1; animation: Pulses1 1.8s ease-out 1s infinite normal forwards; } .m4 { position: absolute; width: 100px; height: 100px; background-color: rgb(255, 191, 29); border-radius: 100px; z-index: 0; animation: Pulses1 1.8s ease-out 1.4s infinite normal forwards; } .m3 { position: absolute; width: 100px; height: 100px; background-color: rgb(255, 241, 227); border-radius: 100px; z-index: -2; animation: Pulses3 1.8s ease 1s infinite normal forwards; filter: blur(6px); } @keyframes Pulses1 { from { transform: scale(0%); opacity: 100%; } to { transform: scale(280%); opacity: 0%; } } @keyframes Pulses2 { 0% { background-color: rgb(255, 191, 29); transform: scale(100%); } 50% { background-color: rgb(255, 243, 139); transform: scale(115%); } 100% { background-color: rgb(255, 191, 29); transform: scale(100%); } } @keyframes Pulses3 { 0% { transform: scale(990%); opacity: 0%; background-color: rgb(255, 176, 97);; } 20% { opacity: 0%; } 50% { transform: scale(400%); opacity: 2%; background-color: rgb(255, 176, 97); } 70% { opacity: 0%; } 100% { transform: scale(700%); opacity: 0%; background-color: rgb(255, 196, 57); } } </style> </head> <body> <div class="m"> <div class="m1"></div> <div class="m2"></div> <div class="m3"></div> <div class="m4"></div> </div> </body> </html> 这里 m 是父级，m1 到 m4 所有子级都有自己的动画。应用悬停过渡来提高每个元素的动画速度会导致每个元素单独响应。我希望将鼠标悬停在父元素上可以使子元素更快。我打算将所有子元素一起调用，但所有元素都有独特的动画。怎么办？不确定我的答案是否正是您所需要的。如果你想触发：悬停在影响子元素的父元素上尝试这样。由于您只想更改动画速度，因此仅使用动画持续时间。 .m:hover * { animation-duration: /*animation of all children*/ 0.4s; }

html css css-animations css-transitions

回答 1 投票 0

过渡效果在 html css 中悬停时不起作用

`当鼠标悬停在 .bg-gradient 上时，我想做一些缓慢的平滑过渡，当我从悬停中删除光标时也一样，但它来得很快，悬停时很快就消失了` `.asc { 高度：500px; 背景位置...

html css background hover css-transitions

回答 1 投票 0

过渡效果是从左上角开始，但需要从左上角开始

过渡效果是从左上角开始，但需要从左上角开始基本上我试图使它像一个小的加载栏，当我将鼠标悬停在块上时加载。 .

html css css-transitions

回答 2 投票 0

CSS - 转换

HTML \\\\ CSS .buttonFrame { 位置：相对；宽度：55 像素；身高... HTML \<div class="buttonFrame"\>\<div class="btn"\>\</div\>\</div\> CSS .buttonFrame { position: relative; width: 55px; height: 20px; border-radius: 12px; border: 2px solid black; overflow: hidden; top: 30%; left: 45%; z-index: 100px; } .btn { border-radius: 12px; width: 0%; height: 0%; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100% ); background-position: 0 0; transition: width 2s, height 2s; /* Added height transition */ } .buttonFrame:hover .btn { /* Changed to target .btn on hover of .buttonFrame */ width: 100%; /* Adjusted width for hover effect */ height: 100%; /* Adjusted height for hover effect */ background-position: 0 0; /* transform: scaleX(2); */ } 过渡效果是从左上角核心开始，但需要从左上角开始我尝试了互联网和人工智能的几种方法，但没有任何效果。基本上我试图使它像一个小的加载栏，当我将鼠标悬停在块上时加载。正如 A Haworth 在评论中提到的，仅在悬停和过渡时设置 height 会使其从 0 更改为 100%。您可以将其删除并将 height 添加到按钮。另外，z-index没有计量单位，应该是z-index:100; 保留您的代码： .buttonFrame { position: relative; width: 55px; height: 20px; border-radius: 12px; border: 2px solid black; overflow: hidden; top: 30%; left: 45%; /* z-index: 100px; */ z-index: 100; } .btn { border-radius: 12px; width: 0%; height: 0%; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%); background-position: 0 0; /* transition: width 2s, height 2s; */ transition: width 2s; height: 100%; } .buttonFrame:hover .btn { width: 100%; /* height: 100%; */ /* background-position: 0 0; */ } <div class="buttonFrame"> <div class="btn"></div> </div> 请注意，您可以使用 after 用一个元素来制作它。这是仅包含所需属性的片段。 .btn { width: 55px; height: 20px; border: 2px solid black; overflow: hidden; } .btn, .btn:after { border-radius: 12px; } .btn:after { display: block; content: ""; width: 0%; transition: width 2s; height: 100%; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%); } .btn:hover:after { width: 100%; } <div class="btn"></div>

html css styles css-transitions

回答 1 投票 0

通过剪辑路径圆形过渡/动画让叠加 div 变得可见

我有两个填满了整个页面。第一个 div（蓝色）最初显示，第二个 div（黄色）隐藏（显示：无）。如果我点击蓝色 div，我想显示黄色我有两个<div>填满了整个页面。第一个 div（蓝色）最初显示，第二个 div（黄色）隐藏 (display:none)。如果我单击蓝色 div，我想显示黄色叠加 div。然后，如果我点击黄色 div，我希望它消失。到目前为止，如果我只是使用 jQuery 在 display:block 和 display:none 之间切换，就可以了。然后我就可以在两个 div 之间切换了。如何为从 display:none 切换到 display:block 时的情况添加过渡效果（在最好的情况下，反之亦然）？我想要一个开/关圆圈！我不知道这在纯 CSS 加 JavaScript 加 jQuery 中是否可行。如果可以的话，我猜可能会围绕clip-path和transition展开？如果可能的话，我想避免仅仅为了这个动画效果而使用繁重的第三方库。请看我的草图：非常感谢您的建议！您可以为 clip-path 属性设置动画。您只需确保在两种情况下都使用 circle （或者至少对于两种状态都使用相同的）。我使用 75vmax 作为最终的圆圈大小，但这只是目测。为了 100% 确定整个屏幕被覆盖，您可能应该根据您的屏幕尺寸或您希望圆圈覆盖的区域进行计算。您可以轻松找到在线的数学计算。 let card = document.querySelector('.card'); card.addEventListener('click', e => card.classList.toggle('card--overlay')); .card { position: relative; width: 100vw; height: 100vh; background-color: blue; } .card.card--overlay .overlay { clip-path: circle(75vmax at 50% 50%); } .overlay { position: absolute; inset: 0; background-color: yellow; clip-path: circle(0% at 25% 75%); transition: clip-path 1s ease; } <div class="card"> <div class="overlay"></div> </div>

html jquery css css-transitions clip-path

回答 1 投票 0

从第 2 页导航到第 1 页期间页脚可见

离子页脚按钮不会正确消失。这是第2页的代码：从第 1 页导航到第 2 页，然后从第 2 页导航回第 1 页时，离子页脚按钮不会正确消失。这是第2页中的代码： <ion-footer padding> <button ion-button block round color="primary">Add to Order</button> </ion-footer> 我在 github 上发现了完全相同的问题，建议添加标签ion-toolbar 但这对我不起作用：背面的离子页脚应该在 willLeave 上消失，而不是 didLeave 导航转换期间页脚可见 ion-footer-bar 和 ion-header-bar 的导航动画如有任何评论/答案，我们将不胜感激！创建一个新类，例如 .app-footer，其 CSS 属性与 ion-footer 相同，并将 HTML 放在 ion-content 中，如下所示： HTML <ion-content> <page code> <div class="app-footer">...</div> </ion-content> SCSS .app-footer { left: 0; bottom: 0; position: absolute; z-index: 10; display: block; width: 100%; } 最后，我让它工作，用填充将按钮包裹在 div 标签中解决了我的问题： <ion-footer> <div padding> <button ion-button block round color="primary" [disabled]="items.length === 0" (click)="onContinueClick()"> Continue </button> </div> </ion-footer> 如果有人在新版本中仍然遇到此问题。我刚刚覆盖了 ion-footer 的属性，它起作用了。在@Alex Steinberg解决方案的帮助下解决了这个问题，但修改了他的方法。 ion-footer { left: 0; bottom: 0; position: absolute; } 在 ionic 版本 6 上我遇到了同样的问题，对于那些面临同样问题的人来说，对我有用的解决方案是将 ion-footer 的内容包含在 ion-content 中代码示例： <ion-footer> <ion-content> Your footer content </ion-content> </ion-footer> 就我而言，我还必须设置离子页脚的高度，例如： ion-footer{ height: 6rem; }

ionic-framework ionic3 css-transitions

回答 4 投票 0

在 Wordpress 中使用 JavaScript 平滑显示/隐藏滚动的 div

我是js新手，我一直遇到使用js onscroll显示和隐藏div的问题。幸运的是我能够弄清楚这一点，但现在我的问题是当 div 显示和隐藏它时非常 ab...

javascript css wordpress css-transitions

回答 1 投票 0

是否可以使用CSS仅用这张图片制作动画效果？

我想使用“皮卡丘”运行的图像，而不必创建gif（因为它更重），并且我想使用他在css中运行的效果。我该如何使用这个鳕鱼...

html animation styles css-transitions

回答 1 投票 0

为什么 CSS 转换在从函数运行时不起作用？

我有一个问题。所以我想做一个不透明度的过渡，所以我做了一个函数来显示带有此过渡的div，然后设置它的不透明度，但是它不起作用。我的代码片段...

javascript html css css-transitions

回答 1 投票 0

文字装饰过渡效果

我正在尝试将文本装饰颜色过渡效果应用于链接的子元素。以下是该标记的示例：我正在尝试将 text-decoration-color 过渡效果应用于链接的子元素。这是该标记的示例： <div class="post"> <a href="/" class="post-link"> <div> <h1>Post name</h1> <div> Lorem ipsum... </div> </div> </a> </div> 整个帖子部分是一个易于点击的链接，但悬停时我只想在 <h1> 下划线。所以我将 post-link 下划线颜色设置为不透明度 0。悬停时将不透明度设置为 1。 .post-link { color: #000; text-decoration: underline solid rgba(12, 11, 10, 0); transition: text-decoration-color 0.2s; } .post-link:hover h1 { text-decoration: underline; text-decoration-color: rgba(12, 11, 10, 1); } 但是，这似乎不起作用。悬停时会出现下划线，但没有过渡效果。要实现悬停时文本装饰颜色的过渡效果，您应该将过渡属性应用于.post-link类而不是text-decoration-color。这是更正后的 CSS： .post-link { color: #000; text-decoration: underline solid rgba(12, 11, 10, 0); transition: text-decoration-color 0.2s; /* Add transition here */ } .post-link:hover h1 { text-decoration-color: rgba(12, 11, 10, 1); } 这样，当鼠标悬停在链接上时，过渡效果将平滑应用。

css css-transitions

回答 1 投票 0

任何人都可以帮助我在react.js中的onClick事件上实现SVG的平滑过渡吗？

我想要一个汉堡图标，在 onClick 事件中它会变成“X”图标。但我无法实现平稳过渡，有人可以帮助我吗？反应从'react'导入React，{useState}；导入...

javascript css reactjs svg css-transitions

回答 1 投票 0

使用tailwindcss和vuejs添加到动态隐藏属性的过渡

我使用 tailwind css 和 nuxt 创建 UI 布局。侧边栏在 md 断点处始终可见，并在移动设备上隐藏，仅在单击菜单按钮时才可见。这很好用...

vuejs3 tailwind-css css-transitions vuejs-transition

回答 1 投票 0

Vue3 过渡：相互独立地控制幻灯片淡入和幻灯片淡出

我正在尝试在我的项目中实现评论部分。每个评论都有自己的鹅毛笔编辑来回答。这背后的原因是在我的移动版本上我想显示固定在

javascript css vue.js vuejs3 css-transitions

回答 1 投票 0

动画 grid-auto-rows 属性

我有一个简单的 css 网格，其中有 X 个网格项。网格项目的数量可以变化，它们的大小也可以变化。我需要创建一个简单的扩展器，因此只有一定数量的行将被 vi...

css css-transitions css-grid

回答 1 投票 0

通过 JavaScript 应用 CSS 转换

document.getElementById("getStartedButton").addEventListener("click", function() { document.querySelector(".description").classList.add("隐藏描述"); // 添加隐藏描述的类医生...

javascript html css css-transitions

回答 1 投票 0

css-transitions 相关问题

最新问题