从右侧的CSS过渡标志

我想从右侧做我的标志com。我已经尝试了几乎所有的东西，请帮助。从右侧的CSS过渡标志

<!DOCTYPE html> 
 
<html lang="en"><head> 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
<meta http-equiv="content-language" content="en"> 
 
<title>StratHaxxs Co. Home </title> 
 
<link rel="stylesheet" type="text/css" href="index_files/style.css"> 
 
<link rel="stylesheet" type="text/css" href="index_files/animate.css"> 
 
<link rel="shortcut icon" href="index_files/icon.ico" type="image/x-icon"> 
 

 
</head> 
 
<body> 
 

 

 
<!-- LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO --> 
 
<div class="container"> 
 
    <img src="index_files/photo.jpg" alt="StratHaxxs Co. Logo" width="73" height="73" align="left" style="padding-top: 8px;padding-left:9px"> 
 
\t <img src="index_files/logo.jpg" alt="StratHaxxs Co. Logo" id="logo" width="500"> 
 
    </div> 
 
<!-- LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO --> 
 

 
    <div class="wrapper"> 
 
    <table class="container" style="border-collapse:collapse;" border="0" width="100%"> 
 
    <colgroup><col width="15%"><col width="85%"></colgroup> 
 
    <tbody><tr> 
 
    <td id="nav" class="each" width="18%"> 
 
\t  <br> 
 
    <b style="color:black;">Section</b><br> 
 
    <a href="" class="navlinks">&gt; Link</a><br> 
 
\t <br> 
 
\t <br><br> 
 
\t <br> 
 
\t <br> 
 
\t <div style="width:80%; height:18px; background-color:#FFFFFF; border:1px solid #3D5D80;"> 
 
\t <div > 
 
\t <span style="font-size:8px; color: #000000;">&nbsp;5%&nbsp;</span> 
 
\t </div></div> 
 
\t <br> 
 
\t <br> 
 
    </td> 
 
    <td id="txt" class="each" width="85%"> 
 
<div align="center"> <table class="news" border="0" width="100%"> 
 
    <colgroup><col width="70%"><col width="30%"></colgroup> 
 
    <tbody><tr> 
 
    <td class="topic">Topic</td> 
 
    <td class="date">Date</td> 
 
    </tr><tr> 
 
    <td colspan="2" class="text"><br> 
 
</td> 
 
    </tr><tr> 
 
    <td class="author">.: by <a href="" target="blank">Author</a></td> 
 
    <td class="comments">Comments</td> 
 
    </tr> </tbody></table> </div> 
 
<div align="center"> <table class="news" border="0" width="100%"> 
 
    <colgroup><col width="70%"><col width="30%"></colgroup> 
 
    <tbody><tr> 
 
    <td class="topic">Topic</td> 
 
    <td class="date">Date</td> 
 
    </tr><tr> 
 
    <td colspan="2" class="text"><br> 
 
</td> 
 
    </tr><tr> 
 
    <td class="author">.: by <a href="" target="blank">Author</a></td> 
 
    <td class="comments">Comments</td> 
 
    </tr> 
 
</tbody></table> 
 
<br> 
 
</div> 
 
</table> 
 
<div style="font-family:Verdana,sans-serif;font-size:9pt;text-align:center;padding:20px;color:#888;">© Copyright 2015 StratHaxxs Co.</div> 
 
</div> 
 
</body> 
 
</html>

再次，我已经看过所有在互联网上的东西，没有运气。这也应该是跨浏览器

来源

2015-11-26 StratHaxxs

你有任何的CSS？欢迎来到stackoverflow :) – www139

@ www139我应该发布它吗？ – StratHaxxs

你可以，但如果你这样做，只发布相关的CSS的问题。 – www139

Here is a great resource for css3 animations

我用这个例子的 “bounceInRight” 动画。将类animated添加到您的徽标容器格。

.animated { 
visibility: visible; 
float: right; 

    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-delay: 0.5s; 
    animation-delay: 0.5s; 
    -webkit-animation-name: bounceInRight; 
    animation-name: bounceInRight; 
} 

@-webkit-keyframes bounceInRight { 
    from, 60%, 75%, 90%, to { 
     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    } 

    from { 
     opacity: 0; 
     -webkit-transform: translate3d(3000px, 0, 0); 
     transform: translate3d(3000px, 0, 0); 
    } 

    60% { 
     opacity: 1; 
     -webkit-transform: translate3d(-25px, 0, 0); 
     transform: translate3d(-25px, 0, 0); 
    } 

    75% { 
     -webkit-transform: translate3d(10px, 0, 0); 
     transform: translate3d(10px, 0, 0); 
    } 

    90% { 
     -webkit-transform: translate3d(-5px, 0, 0); 
     transform: translate3d(-5px, 0, 0); 
    } 

    to { 
     -webkit-transform: none; 
     transform: none; 
    } 
} 

@keyframes bounceInRight { 
    from, 60%, 75%, 90%, to { 
     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    } 

    from { 
     opacity: 0; 
     -webkit-transform: translate3d(3000px, 0, 0); 
     transform: translate3d(3000px, 0, 0); 
    } 

    60% { 
     opacity: 1; 
     -webkit-transform: translate3d(-25px, 0, 0); 
     transform: translate3d(-25px, 0, 0); 
    } 

    75% { 
     -webkit-transform: translate3d(10px, 0, 0); 
     transform: translate3d(10px, 0, 0); 
    } 

    90% { 
     -webkit-transform: translate3d(-5px, 0, 0); 
     transform: translate3d(-5px, 0, 0); 
    } 

    to { 
     -webkit-transform: none; 
     transform: none; 
    } 
}

来源

2015-11-26 03:01:06 partypete25

完美，谢谢！ – StratHaxxs

试试这个，告诉我，如果它的工作原理:)

window.addEventListener('load', function() { 
 
    var logoContainer = document.getElementById('logoContainer'); 
 
    logoContainer.style.right = '0'; 
 
});

#logoContainer { 
 
    -o-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -webkit-transition: all 3s ease; 
 
    -ms-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
    position: absolute; 
 
    right: -100vw; 
 
    display: table; 
 
}

<!-- LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO --> 
 
<div class="container" id="logoContainer"> 
 
    <img src="index_files/photo.jpg" alt="StratHaxxs Co. Logo" width="73" height="73" align="left" style="padding-top: 8px;padding-left:9px"> 
 
    <img src="index_files/logo.jpg" alt="StratHaxxs Co. Logo" id="logo" width="500"> 
 
</div> 
 
<!-- LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO --> 
 

 
<div class="wrapper"> 
 
    <table class="container" style="border-collapse:collapse;" border="0" width="100%"> 
 
    <colgroup> 
 
     <col width="15%"> 
 
     <col width="85%"> 
 
    </colgroup> 
 
    <tbody> 
 
     <tr> 
 
     <td id="nav" class="each" width="18%"> 
 
      <br> 
 
      <b style="color:black;">Section</b> 
 
      <br> 
 
      <a href="" class="navlinks">&gt; Link</a> 
 
      <br> 
 
      <br> 
 
      <br> 
 
      <br> 
 
      <br> 
 
      <br> 
 
      <div style="width:80%; height:18px; background-color:#FFFFFF; border:1px solid #3D5D80;"> 
 
      <div> 
 
       <span style="font-size:8px; color: #000000;">&nbsp;5%&nbsp;</span> 
 
      </div> 
 
      </div> 
 
      <br> 
 
      <br> 
 
     </td> 
 
     <td id="txt" class="each" width="85%"> 
 
      <div align="center"> 
 
      <table class="news" border="0" width="100%"> 
 
       <colgroup> 
 
       <col width="70%"> 
 
        <col width="30%"> 
 
       </colgroup> 
 
       <tbody> 
 
       <tr> 
 
        <td class="topic">Topic</td> 
 
        <td class="date">Date</td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="2" class="text"> 
 
        <br> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td class="author">.: by <a href="" target="blank">Author</a> 
 
        </td> 
 
        <td class="comments">Comments</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </div> 
 
      <div align="center"> 
 
      <table class="news" border="0" width="100%"> 
 
       <colgroup> 
 
       <col width="70%"> 
 
        <col width="30%"> 
 
       </colgroup> 
 
       <tbody> 
 
       <tr> 
 
        <td class="topic">Topic</td> 
 
        <td class="date">Date</td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="2" class="text"> 
 
        <br> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td class="author">.: by <a href="" target="blank">Author</a> 
 
        </td> 
 
        <td class="comments">Comments</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      <br> 
 
      </div> 
 
    </table> 
 
    <div style="font-family:Verdana,sans-serif;font-size:9pt;text-align:center;padding:20px;color:#888;">© Copyright 2015 StratHaxxs Co.</div> 
 
</div>

告诉我，如果有什么我可以做的，你需要做的必要的调整来完成这项工作。

来源

2015-11-26 02:51:22 www139

http://youtu.be/LVOWC-eXKbI?hd=1不完全是我想要的 – StratHaxxs

你应该阅读关于CSS转换http://www.w3schools.com/css/css3_transitions .asp – www139

从右侧的CSS过渡标志

回答

相关问题