CSS广场淡入淡出动画

我想在CSS中使用悬停效果从广场淡入淡出。我的代码如果是这样的，但淡化不适用。有人可以告诉我，如果有可能，我敢肯定是可以做到的，但我不会做正确：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

来源

2014-01-25 Victor

你可以发布你的HTML吗？你是试图在形状之间淡入淡出，还是试图在两个单独的元素之间淡入淡出？ –

之间2分隔元素更喜欢。我有一个方形的链接，想要将它转换为一个圆时...我刚刚开始学习CSS中的淡入淡出动画... – Victor

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

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%; 
}

来源

2014-01-25 23:35:38

您也可以通过添加一个'transform'旋转它真的很快，而它成为一个圆圈：http://jsfiddle.net/4VPC7/1/ – Joeytje50

它似乎是你的榜样，但不是在我的网站。如果孔位置位于包含孔洞内容的绝对位置的容器上，它是否也算在内？而且非常好的技巧，非常有用:) – Victor

@ЗапорожанВиктор不，这应该不会有所作为。如果你发布你的HTML，我会用你发布的CSS来看看它。 –

CSS广场淡入淡出动画

回答

相关问题