我正在尝试使用悬停效果在 CSS 中实现从方形到圆形的淡入淡出。我的代码是这样的，但淡入淡出不适用。有人可以告诉我是否可能吗，我很确定可以做到，但我做得不正确:
#tab1{
float:left;
width:50px;
height:50px;
background-color:#ff0000;
left:0;
}
#tab1h{
background-color:#ff0000;
width:50px;
height:50px;
visibility:none;
position: relative;
opacity: 0;
border-radius:50%;
transition: 1s linear, opacity 0.5s linear;
-webkit-transition: visibility 1s linear, opacity 0.5s linear;
-moz-transition: visibility 1s linear, opacity 0.5s linear;
-o-transition: visibility 1s linear, opacity 0.5s linear;
}
#tab1:hover > #tab1h {
visibility:visible;
float:left;
opacity:1;
border-radius:50%;
}
#container{
text-align:left;
width:100%;
height:100%;
position:absolute;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Free Css Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="headerl">
Title
</div>
<div id="headerr">
<div class="showF">
<img src="img/fico.png" width="35px" height="35px"/>
<div class="hideF">
<iframe src="http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fana.gemescu&width&layout=standard&action=like&show_faces=true&share=true&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>
</div>
</div>
</div>
</div>
<div id="navigation">
<a href="index.html">
<div id="tab1">
<div id="tab1h">
Home
</div>
</div>
</a>
</div>
<div id="content">
<div>
<h1><strong>Contact Me.</strong></h1>
For any information please fill the form below to contact me! <br/>
Thank you!
<form method="post" style="margin-top:10%;">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" /></br>
<label for="Email">Email:</label>
<input type="text" name="Email" id="Email" /></br>
<label for="Message">Message:</label><br />
<textarea name="Message" rows="10" cols="20" id="Message"></textarea>
<input type="submit" name="submit" value="Submit" class="submit-button" />
</form>
</div>
</div>
</div>
<div id="footer">
<p>copywrite</p>
</div>
</div>
</body>
</html>
并且还更新了保存元素的容器。
最佳答案
假设只有一个元素，您只需更改 :hover 上的 border-radius 即可。
div {
width:100px;
height:100px;
background:red;
transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
}
div:hover {
border-radius:50%;
}
关于html - CSS 方形到圆形淡入淡出动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21357635/