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

尝试用react tsx复制纯CSS堆叠卡，不知道如何继续

我正在尝试重新创建一个我在React tsx组件中用纯CSS制作的组件，但我不知道如何继续。这是 html/css ，它完全符合我的要求。我正在尝试重新创建一个我在 React tsx 组件中用纯 CSS 创建的组件，但我不知道如何继续。这里的 html/css 完全符合我的要求。 <body> <div class="left-content"> <h1>Headings</h1> <p>This section contains the headings and occupies the left 50% of the screen.</p> </div> <div class="container"> <ul id="cards"> <li class="card" id="card1"> <div class="card-body"> <h2>Card 1</h2> </div> </li> <li class="card" id="card2"> <div class="card-body"> <h2>Card 2</h2> </div> </li> <li class="card" id="card3"> <div class="card-body"> <h2>Card 3</h2> </div> </li> <li class="card" id="card4"> <div class="card-body"> <h2>Card 4</h2> </div> </li> </ul> </div> </body> CSS： body { background-color: #2E3537; font-family: 'Poppins', sans-serif; } :root { --cards: 5; --cardHeight: 87vh; --cardTopPadding: 0em; --cardMargin: 4vw; } .container { width: 50%; margin: 0; position: absolute; right: 0; } #cards { list-style: none; padding-left: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(var(--cards), var(--cardHeight)); gap: var(--cardMargin); padding-bottom: calc(var(--cards) * var(--cardTopPadding)); margin-bottom: var(--cardMargin); } .card { position: sticky; top: 0; padding-top: calc(var(--index) * var(--cardTopPadding)); } #card1 .card-body { background-color: #52B2CF; } #card2 .card-body { background-color: #E5A36F; } #card3 .card-body { background-color: #9CADCE; } #card4 .card-body { background-color: #D4AFB9; } .card-body { box-sizing: border-box; padding: 30px; border-radius: 50px; box-shadow: 0 0 30px 0 rgba(0,0,0,0.3); height: var(--cardHeight); display: flex; justify-content: center; align-items: center; transition: all 0.5s; } h2 { font-size: 8em; } .left-content { width: 50%; float: left; padding: 20px; color: white; box-sizing: border-box; position:fixed; } .left-content h1 { font-size: 3em; } .left-content p { font-size: 1.5em; } 这是我对 reatc tsx 组件的尝试： import React, { useEffect, useState } from 'react'; import { styled } from '@mui/system'; import { motion, useAnimation } from 'framer-motion'; import { useInView } from 'react-intersection-observer'; import placeholderImage from './placeholder.png'; // Assume you have a placeholder image import './ThirdSection.css'; const BigRow = styled('div')({ backgroundColor: '#00E186', color: 'white', minHeight: '100vh', display: 'flex', flexDirection: 'row', padding: '0', margin: '0', overflow: 'hidden', }); const TextSection = styled('div')({ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '1', width: '100%', paddingTop: '60px', // Adjust padding to account for the fixed navbar padding: '0', margin: '0', position: 'relative', }); const StackedCardsContainer = styled('div')({ flex: '1 1 60%', display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', // overflow: 'hidden', margin: '20px', position: 'relative', }); const Image = styled(motion.img)({ width: '80%', height: '80%', objectFit: 'cover', }); const TextContainer = styled('div')({ flex: '40%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh', padding: '2rem', textAlign: 'center', }); const AnimatedText = styled(motion.h1)({ fontSize: '5rem', fontWeight: 'bold', }); const HorizontalLine = styled('hr')({ width: '100%', borderTop: '1px solid white', margin: '2rem 0', }); const AnimatedH5 = styled('h5')({ fontSize: '1.5rem', fontWeight: 'normal', margin: '0rem 0', }); const ThirdSection: React.FC = () => { const [displayText, setDisplayText] = useState(''); const text = ' Subheading goes here.'; const controls = useAnimation(); const [ref, inView] = useInView({ threshold: 0.2, triggerOnce: true, }); useEffect(() => { if (inView) { controls.start('visible'); } }, [controls, inView]); const textVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 2 } }, }; useEffect(() => { let index = 0; const interval = setInterval(() => { setDisplayText((prev) => { if (index < text.length) { return prev + text[index]; } clearInterval(interval); return prev; }); index++; }, 2); return () => clearInterval(interval); }, [text]); return ( <BigRow ref={ref}> <TextSection> <TextContainer> <AnimatedText variants={textVariants} initial="hidden" animate={controls} > Big heading here </AnimatedText> <HorizontalLine /> <AnimatedH5>{displayText}</AnimatedH5> </TextContainer> <StackedCardsContainer> <div className="container"> <ul id="cards"> <li className="card" id="card1"> <div className="card-body"> <h2>Card 1</h2> </div> </li> <li className="card" id="card2"> <div className="card-body"> <h2>Card 2</h2> </div> </li> <li className="card" id="card3"> <div className="card-body"> <h2>Card 3</h2> </div> </li> <li className="card" id="card4"> <div className="card-body"> <h2>Card 4</h2> </div> </li> </ul> </div> </StackedCardsContainer> </TextSection> </BigRow> ); }; export default ThirdSection; 其中 ThirdSection.css 与之前的样式表相同。主要问题是bigrow父级需要overflow:hidden，否则卡片会溢出到父级中，但overflow:hidden会破坏动画。部分解决方案是 StackCardsContainer 具有溢出：滚动，但这看起来不太好，因为你有 2 个滚动条，而且 textSection 也没有固定。关于如何解决这个问题有什么建议吗？任何帮助将不胜感激！我对代码做了一些更改，使其工作方式与 html 代码的工作方式相同。希望有帮助。 tsx： const BigRow = styled('div')({ height:'100%', backgroundColor: '#00E186', color: 'white', display: 'flex', flexDirection: 'row', padding: '0', margin: '0', overflow: 'hidden', }); const TextSection = styled('div')({ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '1', width: '100%', paddingTop: '60px', // Adjust padding to account for the fixed navbar padding: '0', margin: '0', position: 'relative', }); const StackedCardsContainer = styled('div')({ flex: '1 1 60%', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow:'auto', height:'100%' }); const Image = styled(motion.img)({ width: '80%', height: '80%', objectFit: 'cover', }); const TextContainer = styled('div')({ flex: '40%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh', padding: '2rem', textAlign: 'center', }); const AnimatedText = styled(motion.h1)({ fontSize: '5rem', fontWeight: 'bold', }); const HorizontalLine = styled('hr')({ width: '100%', borderTop: '1px solid white', margin: '2rem 0', }); const AnimatedH5 = styled('h5')({ fontSize: '1.5rem', fontWeight: 'normal', margin: '0rem 0', }); export const ThirdSection: React.FC = () => { const [displayText, setDisplayText] = useState(''); const text = ' Subheading goes here.'; const controls = useAnimation(); const [ref, inView] = useInView({ threshold: 0.2, triggerOnce: true, }); useEffect(() => { if (inView) { controls.start('visible'); } }, [controls, inView]); const textVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 2 } }, }; useEffect(() => { let index = 0; const interval = setInterval(() => { setDisplayText((prev) => { if (index < text.length) { return prev + text[index]; } clearInterval(interval); return prev; }); index++; }, 2); return () => clearInterval(interval); }, [text]); return ( <BigRow ref={ref}> <TextSection> <TextContainer> <AnimatedText variants={textVariants} initial="hidden" animate={controls} > Big heading here </AnimatedText> <HorizontalLine /> <AnimatedH5>{displayText}</AnimatedH5> </TextContainer> <StackedCardsContainer> <div className="container"> <ul id="cards"> <li className="card" id="card1"> <div className="card-body"> <h2>Card 1</h2> </div> </li> <li className="card" id="card2"> <div className="card-body"> <h2>Card 2</h2> </div> </li> <li className="card" id="card3"> <div className="card-body"> <h2>Card 3</h2> </div> </li> <li className="card" id="card4"> <div className="card-body"> <h2>Card 4</h2> </div> </li> </ul> </div> </StackedCardsContainer> </TextSection> </BigRow> ); }; css： html,body,#root,.App{ height: 100%; } body { background-color: #2E3537; font-family: 'Poppins', sans-serif; } :root { --cards: 5; --cardHeight: 87vh; --cardTopPadding: 0em; --cardMargin: 4vw; } .container { width: 50%; margin: 0; position: absolute; right: 0; height: 100vh; padding: 20px; } #cards { list-style: none; padding-left: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(var(--cards), var(--cardHeight)); gap: var(--cardMargin); padding-bottom: calc(var(--cards) * var(--cardTopPadding)); margin-bottom: var(--cardMargin); } .card { position: sticky; top: 0; padding-top: calc(var(--index) * var(--cardTopPadding)); } #card1 .card-body { background-color: #52B2CF; } #card2 .card-body { background-color: #E5A36F; } #card3 .card-body { background-color: #9CADCE; } #card4 .card-body { background-color: #D4AFB9; } .card-body { box-sizing: border-box; padding: 30px; border-radius: 50px; box-shadow: 0 0 30px 0 rgba(0,0,0,0.3); height: var(--cardHeight); display: flex; justify-content: center; align-items: center; transition: all 0.5s; } h2 { font-size: 8em; } .left-content { width: 50%; float: left; padding: 20px; color: white; box-sizing: border-box; position:fixed; } .left-content h1 { font-size: 3em; } .left-content p { font-size: 1.5em; }

css reactjs react-typescript

回答 1 投票 0

更改 AntD 按钮的颜色（背景）

我知道还有其他类似的主题，但我想知道如何使我的情况发挥作用。到目前为止，我还无法利用现有信息使其发挥作用。我正在尝试修改

css reactjs antd

回答 3 投票 0

Ant Design 选择问题（在选择组件中显示步骤图标）

Ant design 选择问题我在 React 项目中遇到了 Ant Design Select 组件的问题。具体来说，“选择”下拉列表中意外出现了一个步骤图标，我...

javascript css reactjs antd

回答 1 投票 0

Iframe 调整 CORS 大小

是否可以将我的 tumblr 网站上的 iframe 大小调整为 100%？我已经尝试了很多选项，但仅使用 jQuery 我遇到了 CORS 问题，还尝试了以下插件： https://github.com/Sly777/Iframe-Height-Jq...

jquery html css iframe tumblr

回答 2 投票 0

将边框半径应用于 HTML 表格行时，可以看到额外的背景

我正在使用 HTML 表格，在其中将颜色应用于表格单元格。表格单元格具有边框半径属性。但是，应用边框半径后可以看到额外的背景。哈...

html css

回答 2 投票 0

高度等于 100% 不适用于 IFrame

接下来是 Stack Overflow 上的一些主题，例如：全屏iframe高度为100% 如何给 iframe 100% 高度 [重复] 使 Iframe 适合容器剩余高度的 100%...

html css iframe

回答 2 投票 0

SVG 需要 100vh，但在大中型屏幕上超过它

我正在创建一个网站，我还使用 adobe illustrator 创建了一个 SVG，作为该网站的背景或整个图像。问题是，当模拟手机或 ipad 时......

html css image svg frontend

回答 1 投票 0

iText PdfHtml 删除 HTML 表 TD 中的空格

我正在使用itext7.pdfhtml将html转换为A4 PDF。该库工作得很好，但我在 html 表 TD 中的一些白色间距方面遇到了麻烦。请参阅随附的屏幕，空白是

html css itext itext7 html-to-pdf

回答 1 投票 0

如何在 javascript 中更改按钮大小

我正在使用 javascript 在 chrome 扩展中创建按钮，但我找不到更改按钮大小的方法，这是代码。 var buttonShort = document.createElement("button");

javascript css button size

回答 5 投票 0

Angular Material 覆盖 SnackBar 组件的默认样式

我正在尝试覆盖 Angular Material 中小吃栏组件的默认最大宽度。 Angular Material应用的CSS如下所示： .mat-snack-bar-container { 边界半径：...

css angular angular-material2

回答 12 投票 0

悬停时交换图像而不影响布局

长话短说，我有一个下拉菜单，其中有 3 张图像作为香烟（250x34）。当我将鼠标悬停在它们上方时，它们会变成带有烟雾的香烟（250x222）。当思想悬停时，他们第二个图像推动......

javascript html css

回答 1 投票 0

afterSignInUrl 属性在 Clerk 中不起作用

在此输入图像描述我尝试在我的项目中使用 afterSignInUrl="/learn" 属性，但它不起作用，软件包已安装，并且我已经搜索了文档...

html css properties clerk

回答 1 投票 0

悬停时触发弹出窗口

我有一个表单，我想在将鼠标悬停在信息 div 上时显示弹出帮助框： info div和popover如下（父div是position:relative）：我有一个表单，我想在将鼠标悬停在信息 div 上时显示弹出帮助框：信息 div 和弹出窗口如下（父 div 是 position: relative）： <div popovertarget="function-help" class="absolute cursor-help right-1 top-0 bottom-0 m-auto rounded-full border-2 border-cyan-400 text-cyan-400 w-1 h-1 p-2 flex justify-center items-center">i</div> <div id="function-help" popover>Here's how to input a function:</div> 我知道如何使用按钮或输入来完成此操作，但如何使用 div 和悬停来完成此操作？如何在用户将鼠标悬停在信息 div 上时显示弹出窗口，并在用户离开时隐藏它？提前致谢！根据我的理解，当用户将鼠标悬停在 div 上时，您尝试使用 i 显示工具提示。如果是这种情况，您可以根据您的要求使用 EventListener 显示/隐藏 div var targetElement = document.querySelector('.icon'); var tooltip = document.getElementById('tooltip'); targetElement.addEventListener('mouseenter', function() { tooltip.style.display = 'block'; }); targetElement.addEventListener('mouseleave', function() { tooltip.style.display = 'none'; }); .container { position: relative; display: inline-block; } .container input { padding-left: 30px; } .container .icon { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 15px; height: 15px; border-radius: 50%; background-color: #39a9db; color: #fff; display: flex; justify-content: center; align-items: center; cursor: help; } .tooltip { display: none; position: absolute; background-color: #333; color: #fff; padding: 5px; border-radius: 5px; font-size: 12px; z-index: 1; right: 0px; top: 25px } <div class="container"> <h3>f(x) = </h3> </div> <div class="container"> <input type="text"> <div class="icon">i</div> <div class="tooltip" id="tooltip">This is a tooltip</div> </div> 我意识到我的困惑。 Popover API 是一项实验性功能，不具有广泛的浏览器兼容性。我的答案允许您在同一页面上有多个弹出窗口。它使用 querySelectorAll 来查找所有 popovertarget 元素。然后它循环遍历每个生成一个变量来保存弹出框元素。然后在鼠标悬停时显示它，在鼠标移开时隐藏它。我个人会使用一个模仿弹出窗口的插件，因为它将具有跨浏览器兼容性。 const popover = document.querySelectorAll("[popovertarget]"); popover.forEach((e) => { const target = document.querySelector("#" + e.getAttribute("popovertarget")); e.addEventListener("mouseover",()=>{ target.showPopover(); }); e.addEventListener("mouseout",()=>{ target.hidePopover(); }); }); <div popovertarget="function-help">popME</div> <div id="function-help" popover>Here's how to input a function:</div> 好的，感谢 @Sai Manoj 的有用回答，我知道我可以使用 div 的 mouseenter 和 mouseleave 方法来触发弹出窗口。这是我的代码： document.getElementById('info-tooltip').onmouseenter = _ => document.getElementById('function-help').showPopover() document.getElementById('info-tooltip').onmouseleave = _ => document.getElementById('function-help').hidePopover() .wrapper { position: relative; width: max-content; } label { display: inline-block; width: 10 rem; } #info-tooltip { position: absolute; top: 0; bottom: 0; right: 4px; cursor: help; margin: auto; border-radius: 100px; border: 2px solid cyan; color: cyan; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; } #function-help:popover-open { position: absolute; bottom: 0; inset: unset; } <div class="wrapper"> <label for="inputFunction">f(x) = </label> <input type="text" id="inputFunction"> <div id="info-tooltip" popovertarget="function-help">i</div> <div id="function-help" popover>Here's how to use this function:</div> </div> 请注意，您可以进一步设置弹出窗口的样式，但您最有可能希望使用 position: absolute（因为默认为 position: fixed）和 inset: unset。

javascript html css popover

回答 3 投票 0

css 相关问题

最新问题