CSS/HTML |菜单过渡：圆形到方形答案

【问题标题】：CSS/HTML | Menu transition: Circle to squareCSS/HTML |菜单过渡：圆形到方形
【发布时间】：2015-03-31 01:38:48
【问题描述】：

我尝试制作简单的 css-dropdownmenu。我的目标是创建一个过渡，如果你将鼠标悬停在主菜单元素上，一个点就会变成一个正方形。点我的意思是一个非常小的圆圈，直到悬停才能看到，然后变成一个正方形。我的菜单已经能够将正方形变成具有不同颜色的圆形，但我想不出反之亦然的方法，特别是因为圆形首先必须“隐藏”直到悬停。

这是我目前所拥有的：http://jsfiddle.net/eaqw4m38/3/

HTML: 测试

<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#s1">Menu 1</a>
                <span id="s1"></span>
                <ul class="subs">
                    <li><a href="#">Header a</a>
                        <ul>
                            <li><a href="#">Submenu I</a></li>
                            <li><a href="#">Submenu II</a></li>
                            <li><a href="#">Submenu III</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Header b</a>
                        <ul>
                            <li><a href="#">Submenu I</a></li>
                            <li><a href="#">Submenu II</a></li>
                            <li><a href="#">Submenu III</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#s2">Menu 2</a>
                <span id="s2"></span>
                <ul class="subs">
                    <li><a href="#">Header c</a>
                        <ul>
                            <li><a href="#">Submenu I</a></li>
                            <li><a href="#">Submenu II</a></li>
                            <li><a href="#">Submenu III</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Header d</a>
                        <ul>
                            <li><a href="#">Submenu I</a></li>
                            <li><a href="#">Submenu II</a></li>
                            <li><a href="#">Submenu III</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
            <li><a href="#">Menu 5</a></li>
            <li><a href="http://www.google.com">Google</a></li>
        </ul>
    </div>
</body>

我无法通过搜索找到适合我的问题的任何内容。提前感谢您的回答:) 保罗

编辑：我现在知道如何添加这样的圆圈并使其透明，但是如何将其添加到过渡中？问题是我必须反对： 1. menuelement 的正方形 2. 圆圈

当正方形悬停时，我如何对圆进行动画处理，而且我必须将字体保持在圆的顶部

【问题讨论】：

标签： html drop-down-menu css-transitions geometry

【解决方案1】：

Jsfiddle：http://jsfiddle.net/u2ykjdbo/

只需在元素开始时应用边框半径（当它们没有悬停时），然后在元素悬停时应用背景和新颜色，同时将边框半径更改为 0。随着颜色的变化，您将看看从圆形到方形的过渡。

代码（省略未更改的选择器）：

#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
    border-radius: 50%;
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #EC7970;
    color: #000000;
    border-radius: 0;
}

【讨论】：

重点是我实际上希望圆圈从 a 标签的底部中心出现。一方面，如果不将其设置为相对（然后它会放大 a 标签），我无法将其居中，另一方面，我在将其移动到 a 标签后面时遇到问题，因此它被圆圈覆盖