CSS Transition Logo来自右边

时间：2015-11-26 02:39:28

标签： html 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">
	<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>
</body>
</html>
再次，我已经在互联网上寻找一些东西，没有运气。这也应该是跨浏览器

2 个答案:

答案 0 :(得分：0)

试试这个并告诉我它是否有效：）

＆＃13;
＆＃13; 
window.addEventListener('load', function() {
  var logoContainer = document.getElementById('logoContainer');
  logoContainer.style.right = '0';
});
＆＃13; 
#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;
}
＆＃13; 
<!-- 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>
＆＃13;
＆＃13;
＆＃13;

告诉我，如果我还能做任何其他事情，你需要进行必要的调整才能使其发挥作用。

答案 1 :(得分：0)

Here is a great resource for css3 animations

我在这个例子中使用了“bounceInRight”动画。将班级animated添加到徽标容器div。

.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;
    }
}
相关问题
最新问题