Question

我发现了这个并认为它很酷。问题是，在旋转之前或之后，我似乎无法将文本置于圆圈中心。当前的颜色并不重要，因为我改变它们只是为了能够在修改代码时看到差异。我提前为CSS代码的长度道歉。如果有人知道如何使它更短，我可以说是全部的耳朵。我也希望在旋转之后将这些单词设为“可点击”，但还没有想出那个“

HTML

<ul class="ca-menu">
    <li>
        <a href="#">
            <span class="ca-icon">Home Page</span>
            <div class="ca-content">
                <h2 class="ca-main"></h2>
                <h3 class="ca-sub"></h3>
            </div>
        </a>
    </li>
    ...
</ul>

CSS

.ca-menu li{
    width: 200px;
    height: 200px;
    /*Circle Size*/
    border: 10px solid #E8FF02;
    /*border color before spin*/
    overflow: hidden;
    position: relative;
    float:left;
    background: #005B8E;
    /*background before spin*/
    margin-right: 10px;
    box-shadow: 5px 5px 2px rgba(0,0,0,0.2);
    border-radius: 125px;
    /*circle vs square*/
    transition: all 400ms linear;
}

.ca-menu li:last-child{
    margin-bottom: 0px;
}

.ca-menu li a{
    text-align: left;
    display: block;
    width: 100%;
    height: 100%;
    color: #BEFC00;
    /*text color before spin*/
    position:relative;
}

.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 20px;
    text-shadow: 0px 0px 10px #101254;
    line-height: 50px;
    position: center;
    padding-left: 45px;
    width: 50px;
    left: 20px;
    text-align: center;
    transition: all 900ms linear;
}

.ca-content{
    position: absolute;
    left: 120px;
    width: 370px;
    height: 60px;
    top: 20px;
}

.ca-main{
    font-size: 15px;
    color: #000;
    transition: all 300ms linear;
}
.ca-sub{
    font-size: 14px;
    color: #000;
    transition: all 300ms linear; 
}

.ca-menu li:hover{
    background: #930016;
    border-color: #2BF802;
    transform: rotate(360deg);
    /* colors after spin*/
}

.ca-menu li:hover .ca-icon{
    color: #0100B3;
    font-size: 20px;
/*text size after spin*/
}

.ca-menu li:hover .ca-main{
    display: none;
}

.ca-menu li:hover .ca-sub{
    opacity: 8.0;
}

.ca-menu{
    padding: 100;
    margin: 100px auto;
    width: 250px;
    /*circle position from top*/
}

Answer 1

一个简单的解决方法是调整单词line-height的{{1}}，以匹配父级ca-icon的高度，其高度为.ca-menu li。

200px

JS Fiddle here了解此更改的作用。

Answer 2

->在旋转中输入大文本而不是更改设计时，请进行检查。

->请附上我的以下代码，然后检查并输入大字体不变设计。

->与您的代码相同，但我对CSS进行了一些更改。

.ca-menu li{
    width: 200px;
    height: 200px;
    /*Circle Size*/
    border: 10px solid #E8FF02;
    /*border color before spin*/
    overflow: hidden;
    position: relative;
    float:left;
    background: #005B8E;
    /*background before spin*/
    margin-right: 10px;
    box-shadow: 5px 5px 2px rgba(0,0,0,0.2);
    border-radius: 125px;
    /*circle vs square*/
    transition: all 400ms linear;
    display: table;
}

.ca-menu li:last-child{
    margin-bottom: 0px;
}

.ca-menu li a{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    color: #BEFC00;
    /*text color before spin*/
    position:relative;
}

.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 20px;
    text-shadow: 0px 0px 10px #101254;
    line-height: 27px;
    width: 50px;
    left: 20px;
    text-align: center;
    transition: all 900ms linear;
}

.ca-content{
    position: absolute;
    left: 120px;
    width: 370px;
    height: 60px;
    top: 20px;
}

.ca-main{
    font-size: 15px;
    color: #000;
    transition: all 300ms linear;
}
.ca-sub{
    font-size: 14px;
    color: #000;
    transition: all 300ms linear; 
}

.ca-menu li:hover{
    background: #930016;
    border-color: #2BF802;
    transform: rotate(360deg);
    /* colors after spin*/
}

.ca-menu li:hover .ca-icon{
    color: #0100B3;
    font-size: 20px;
/*text size after spin*/
}

.ca-menu li:hover .ca-main{
    display: none;
}

.ca-menu li:hover .ca-sub{
    opacity: 8.0;
}

.ca-menu{
    padding: 100;
    margin: 100px auto;
    width: 250px;
    /*circle position from top*/
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Stack</title>
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body> 
         <ul class="ca-menu">
    <li>
        <a href="#">
            <span class="ca-icon">Home Page Home Page</span>
            <div class="ca-content">
                <h2 class="ca-main"></h2>
                <h3 class="ca-sub"></h3>
            </div>
        </a>
    </li>
    ...
</ul>
    </body>
</html>

在旋转之前和之后的圆圈中心文本

2 个答案: