Question

我想创建一个＆＃34; X＆＃34; css跨度和位置绝对，但跨度不会居中，即使它们应该。

容器的font-size为1px。以及height的{{1}}和width。因此，我可以使用100em作为父母大小的1％。

我在跨度上使用1em来旋转它而不改变起点。元素以20％transform-origin: 0px 5em;和top（20em）开头，以left（顶部和左侧）结束。

要获得所需的80%，我只需计算：width（毕达哥拉斯定理）（60因为开始和结束20 - 100-20 * 2）

但由于某种原因，X显然没有居中。你知道我做错了吗？

＆＃13;

Square root( square of (60) * 2)

＆＃13;

body
{
    margin: 0px;
}
.check
{
    font-size: 1px;
    position: relative;
    height: 100em;
    width: 100em;
    background-color: white;
    border-radius: 50%;
    transition: .3s;
    box-shadow: 0px 0px 10px red inset;
}



.check span
{
    position: absolute;
    display: block;
    height: 10em;
    width: 0px;
    background-color: #00FF00;
    transition:.3s;
}
.check.red span
{
    background-color: #FF0000;
    transform-origin: 0px 5em;
    transform: rotate(45deg);
    top: 20em;
    left: 20em;
}
.check.red span:nth-of-type(2)
{
    transform: rotate(135deg);
    top: 20em;
    left: 80em;
}





.check.red:hover span
{
    width: 84.852813742em;
}

＆＃13;

Answer 1

这不是一个自动解决方案，但改变你的CSS中的一些值我解决了它：

body
{
    margin: 0px;
}
.check
{
    font-size: 1px;
    position: relative;
    height: 100em;
    width: 100em;
    background-color: white;
    border-radius: 50%;
    transition: .3s;
    box-shadow: 0px 0px 10px red inset;
}



.check span
{
    position: absolute;
    display: block;
    height: 10em;
    width: 0px;
    background-color: #00FF00;
    transition:.3s;
}
.check.red span
{
    background-color: #FF0000;
    transform-origin: 0px 5em;
    transform: rotate(45deg);
    top: 18em;
    left: 22em;
}
.check.red span:nth-of-type(2)
{
    transform: rotate(135deg);
    top: 18em;
    left: 78em;
}





.check.red:hover span
{
    width: 78em;
}

<body>
    <div class="check red">
        <span></span>
        <span></span>
    </div>
</body>

Answer 2

您可以采取一些措施让这里的生活更轻松。

首先，您可以使用百分比转换原点，这意味着您不需要自己计算它您也可以使用百分比进行定位，然后使用变换（再次使用百分比）进行偏移，无论大小如何都可以居中您还可以使用百分比设置十字的宽度，这将使其大小与其父级相同。

更新：使用背景渐变将十字架从顶部更改为动画，而不是中心。

.check
{
    position: relative;
    height: 200px;
    width: 200px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0px 0px 10px red inset;
}

.check span
{
    position: absolute;
    display: block;
    height: 20px;
    width: 0%;
    background: linear-gradient(to right, white 50%, red 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    top: 50%;
    left: 50%;
    transform-origin: center;
    transition: background 0.3s ease;
}
.check.red span
{
    transform: translate(-50%, -50%) rotate(-45deg);
}

.check.red span:last-child
{
    transform: translate(-50%, -50%) rotate(-135deg);
}

.check.red:hover span
{
    background-position: right bottom;
    width: 70%;
}

<div class="check red">
  <span></span>
  <span></span>
</div>

Answer 3

试试这个使用margin-top:-0.5rem;

.check span
{
    position: absolute;
    display: block;
    height: 10em;
    width: 0px;
    background-color: #00FF00;
    transition:.3s; margin-top:-0.5rem;
}

body
{
    margin: 0px;
}
.check
{
    font-size: 1px;
    position: relative;
    height: 100em;
    width: 100em;
    background-color: white;
    border-radius: 50%;
    transition: .3s;
    box-shadow: 0px 0px 10px red inset;
   
}



.check span
{
    position: absolute;
    display: block;
    height: 10em;
    width: 0px;
    background-color: #00FF00;
    transition:.3s; margin-top:-0.5rem;
}
.check.red span
{
    background-color: #FF0000;
    transform-origin: 0px 5em;
    transform: rotate(45deg);
    top: 20em;
    left: 20em;
}
.check.red span:nth-of-type(2)
{
    transform: rotate(135deg);
    top: 20em;
    left: 80em;
}





.check.red:hover span
{
    width: 84.852813742em;
}

<body>
    <div class="check red">
        <span></span>
        <span></span>
    </div>
</body>

跨度位置绝对不以顶部和左侧为中心

3 个答案: