主页 / coding / 问题 / 79597275
Accepted
Eric Wang
Asked: 2025-04-29 04:52:15 +0800 CST

根据一个父维度定义两个元素维度

  • 772

:root {
    --success: #0c0;
}

button {
    border: 2px solid;
    border-radius: 10px;
    cursor: pointer;
    margin: 1em 0.5em;
    padding: 10px 15px;
    transition: transform 1s;
}

button:active {
    transform: scale(90%);
}

button.animated {
    background-color: transparent;
    overflow: hidden;
    position: relative;
    transition: color 1s, border-color 1s, transform 0.2s;
    z-index: 1;
}

button.animated:hover {
    border-color: transparent;
}

button.animated::after {
    border: 0;
    border-radius: 50%;
    content: "";
    height: 150%;
    left: -25%;
    opacity: 0;
    position: absolute;
    top: -25%;
    transform: scale(0.1);
    transform-origin: center;
    transition: all 1s;
    width: 150%;
    z-index: -1;
}

button.animated:hover::after {
    opacity: 1;
    transform: scale(1);
}

.text,
button.animated.background::after {
    background-color: white;
}

.background,
button.animated.text:hover{
    color: white;
}

button.animated.text {
    border-color: var(--muted);
}

.success.text,
button.animated.success.background:hover {
    color: var(--success);
}

.success.background,
button.animated.success.text::after {
    background-color: var(--success);
}

button.animated.success.text:hover,
button.animated.success.background {
    border-color: var(--success);
}
<button class="animated success background">Button</button>
<button class="animated success background">Longer button</button>

上面代码片段中的按钮具有椭圆形的背景效果，当您将鼠标悬停在按钮上时，该效果就会出现。目前，椭圆的尺寸与按钮的尺寸成比例。我希望椭圆是圆形，其宽度是按钮长边的 141.4%，或者，如果不可能的话，是按钮的宽度。我该如何实现？

html

2 个回答

  1. 这是一个使用背景和渐变的想法

    button {
  border: 2px solid red;
  border-radius: 10px;
  cursor: pointer;
  margin: 1em 0.5em;
  padding: 10px 15px;
  background:
   radial-gradient(circle closest-side,#fff 98%,#0000) 
    50% padding-box no-repeat red;
  background-size: var(--s,0%) 999px; /* the second value is a very big value */
  transition: .5s;
}
button:hover {
  --s: 110%; /* you can use 100% but a bit bigger is better */
}
    <button>Button</button>
<button>Longer button</button>

    • 1
  2. Best Answer

    :root {
    --success: #0c0;
}

button {
    border: 2px solid;
    border-radius: 10px;
    cursor: pointer;
    margin: 1em 0.5em;
    padding: 10px 15px;
    transition: transform 1s;
}

button:active {
    transform: scale(90%);
}

button.animated {
    background-color: transparent;
    overflow: hidden;
    position: relative;
    transition: color 1s, border-color 1s, transform 0.2s;
    z-index: 1;
}

button.animated:hover {
    border-color: transparent;
}

button.animated::after {
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 50%;
    content: "";
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    transform-origin: center;
    transition: all 1s;
    width: 142%;
    z-index: -1;
}

button.animated:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.text,
button.animated.background::after {
    background-color: white;
}

.background,
button.animated.text:hover{
    color: white;
}

button.animated.text {
    border-color: var(--muted);
}

.success.text,
button.animated.success.background:hover {
    color: var(--success);
}

.success.background,
button.animated.success.text::after {
    background-color: var(--success);
}

button.animated.success.text:hover,
button.animated.success.background {
    border-color: var(--success);
}
    <button class="animated success background">Button</button>
<button class="animated success background">Longer button</button>

    解决了！我添加了aspect-ratio: 1 / 1;，仅将宽度设置为 142%，然后简单地使用left: 50%;、top: 50%;和transform: translate(-50%, -50%)将背景平移到按钮的中心。也添加了transform: translate(-50%, -50%)，:hover::after这样当按钮悬停时，圆圈就会保持居中。

    • 1

相关问题