28172 sujets

CSS et mise en forme, CSS3

Pousser joliement une div

Bonjour,

Je cherche à faire bouger une div, d'un point fixe à un autre, sur un onmouseover, avec un visuel progressif et fluide.
Y a t il une solution en css ?

Bonne journée
Regarde du côté des CSS-transition ! Smiley cligne 


<!DOCTYPE html>
<html lang="en">  
  <head>  
    <meta charset="UTF-8"/>  
    <title>Test CSS transition
    </title>  
  </head>  
  <body>    
    <div class="slide styling" id="css-transitions">      
      <style>
        #transitions-box-2 {
        -webkit-transition: margin-left 1s ease-in-out;
        -moz-transition: margin-left 1s ease-in-out;
        -o-transition: margin-left 1s ease-in-out;
        transition: margin-left 1s ease-in-out;
        }         
        .transitions .left {
        margin-left: 0;
        }
        .transitions .right {
        margin-left: 780px;
        }
        .transitions div {
        width: 20px;
        height: 20px;
        background: blue;
        }       
      </style>      
      <header>
      <center><h1>CSS Transitions</h1></center>
      </header>          
      <section>   
        <h2>Basic transition</h2>   
        <button onclick="transitionLeft(1)">Left</button>                   
        <button onclick="transitionRight(1)">Right</button><br /><br />   
        <div class="transitions example"><div id="transitions-box-1"></div></div>   
        <br />   
        
        <hr />       
         
        <h2>Slide transition</h2> 
        <button onclick="transitionLeft(2)">Left</button>            
        <button onclick="transitionRight(2)">Right</button><br /><br />     
        <div class="transitions example"><div id="transitions-box-2"></div></div>  
        <br />          
                  
        <script defer>
          function transitionLeft(no) {
            document.getElementById('transitions-box-' + no).className = 'left';
          }
          function transitionRight(no) {
            document.getElementById('transitions-box-' + no).className = 'right';
          }
        </script>          
      </section>        
    </div>  
  </body>
</html>

Modifié par jikoo (24 Dec 2011 - 00:42)
Sujet clos
Aller à