CSS3旋转/放大/移动动画效果代码

左手的ㄟ右手 2024-03-16 07:24 27阅读 0赞

效果一：360°旋转 修改rotate(旋转度数)

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>.img</code><code>1</code>&nbsp;<code>{ </code> <code>transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>-webkit-transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>-moz-transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>-o-transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>}</code> <code>.img</code><code>1:</code><code>hover&nbsp;{ </code> <code>transform:&nbsp;rotate(</code><code>360</code><code>deg);</code> <code>-webkit-transform:&nbsp;rotate(</code><code>360</code><code>deg);</code> <code>-moz-transform:&nbsp;rotate(</code><code>360</code><code>deg);</code> <code>-o-transform:&nbsp;rotate(</code><code>360</code><code>deg);</code> <code>-ms-transform:&nbsp;rotate(</code><code>360</code><code>deg);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

效果二：放大 修改scale(放大的值)

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>.img</code><code>2</code>&nbsp;<code>{ </code> <code>transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>-webkit-transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>-moz-transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>-o-transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>}</code> <code>.img</code><code>2:</code><code>hover&nbsp;{ </code> <code>transform:&nbsp;scale(</code><code>1.2</code><code>);</code> <code>-webkit-transform:&nbsp;scale(</code><code>1.2</code><code>);</code> <code>-moz-transform:&nbsp;scale(</code><code>1.2</code><code>);</code> <code>-o-transform:&nbsp;scale(</code><code>1.2</code><code>);</code> <code>-ms-transform:&nbsp;scale(</code><code>1.2</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

效果三：旋转放大 修改rotate(旋转度数) scale(放大值)

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>.img</code><code>3</code>&nbsp;<code>{ </code> <code>transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>-webkit-transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>-moz-transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>-o-transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>}</code> <code>.img</code><code>3:</code><code>hover&nbsp;{ </code> <code>transform:&nbsp;rotate(</code><code>360</code><code>deg)&nbsp;scale(</code><code>1.2</code><code>);</code> <code>-webkit-transform:&nbsp;rotate(</code><code>360</code><code>deg)&nbsp;scale(</code><code>1.2</code><code>);</code> <code>-moz-transform:&nbsp;rotate(</code><code>360</code><code>deg)&nbsp;scale(</code><code>1.2</code><code>);</code> <code>-o-transform:&nbsp;rotate(</code><code>360</code><code>deg)&nbsp;scale(</code><code>1.2</code><code>);</code> <code>-ms-transform:&nbsp;rotate(</code><code>360</code><code>deg)&nbsp;scale(</code><code>1.2</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

效果四：上下左右移动 修改translate(x轴,y轴)

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>.img</code><code>4</code>&nbsp;<code>{ </code> <code>transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>-webkit-transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>-moz-transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>-o-transition:&nbsp;All&nbsp;</code><code>0.4</code><code>s&nbsp;ease-in-out;</code> <code>}</code> <code>.img</code><code>4:</code><code>hover&nbsp;{ </code> <code>transform:&nbsp;translate(</code><code>0</code><code>,&nbsp;</code><code>-10px</code><code>);</code> <code>-webkit-transform:&nbsp;translate(</code><code>0</code><code>,&nbsp;</code><code>-10px</code><code>);</code> <code>-moz-transform:&nbsp;translate(</code><code>0</code><code>,&nbsp;</code><code>-10px</code><code>);</code> <code>-o-transform:&nbsp;translate(</code><code>0</code><code>,&nbsp;</code><code>-10px</code><code>);</code> <code>-ms-transform:&nbsp;translate(</code><code>0</code><code>,&nbsp;</code><code>-10px</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>