Question

我有两件事我想解决。

移动文字，链接上的hover。
（较小）span元素不相等（或者圆圈季度不相等，但由于width和height匹配，因此不应该这样做。）

可以通过提供链接position: absolute来解决第一个问题，但不是是一个选项。该组件在flexbox中使用，absolute将杀死它。

body{
            margin: 0;
        }
p{
  position: relative;
}
a{
            transition: all .2s ease-in-out;
            display:block;
            box-sizing: border-box;
            /* position: absolute; */
            font: 18px Monaco, MonoSpace;
            color: #FFF;
        }
        a:hover{
            transform: scale(1.1);
        }

        a#top-left-circle{
            width: 90px;
            height: 90px;
            background: #006699;
            border-radius: 0 0 90px 0;
            -webkit-border-radius: 0 0 90px 0;
            border: 2px dashed #fff;
            box-shadow: -1px -1px 3px 5px rgba(0, 102, 153, 0.7), 2px 2px 6px 4px rgba(10, 10, 0, 0.5);


        }
        span {
            font: 14px Monaco, MonoSpace;
            line-height: 150px;
            height: inherit;
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: top center;
        }
.char1 { transform: rotate(-15deg); }
        .char2 { transform: rotate(-30deg); }
        .char3 { transform: rotate(-45deg); }
        .char4 { transform: rotate(-60deg); }
        .char5 { transform: rotate(-75deg); }

<div>
    <a href="#skills" id="top-left-circle" class="panel" aria-label="Hello">
        <span class="char1" aria-hidden="true">H</span>
        <span class="char2" aria-hidden="true">H</span>
        <span class="char3" aria-hidden="true">H</span>
        <span class="char4" aria-hidden="true">H</span>
        <span class="char5" aria-hidden="true">H</span>
    </a>
</div>

Answer 1

简单：添加到您的a元素

transform: translateZ(0);

告诉他：

“嘿兄弟，准备好进行改造！”

所以当你在:hover 转换时，它会回复你

“我知道hahaaaaa！”

<强> jsBin demo

Here's a demo on how to radially rotate characters in a circle

随着变换而移动的文字增长

1 个答案: