Question

我正在尝试使用悬停效果使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&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;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>

并且还更新了包含该元素的容器。日Thnx

Answer 1

假设只有一个元素，您只需更改border-radius上的:hover。

EXAMPLE HERE

div {
    width:100px;
    height:100px;
    background:red;
    transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;

}
div:hover {
    border-radius:50%;
}

CSS square to circle fade animation

1 个答案: