PHP前端开发

使用CSS3通过关键帧向左移动动画

百变鹏仔 3个月前 (09-20) #CSS
文章标签 关键

您可以尝试运行以下代码,使用 CSS3 来通过关键帧向左移动动画

示例

实时演示

<html>   <head>      <style type = "text/css">         h1 {            -moz-animation-duration: 3s;            -webkit-animation-duration: 3s;            -moz-animation-name: slidein;            -webkit-animation-name: slidein;         }         @-moz-keyframes slidein {            from {               margin-left:100%;               width:300%            }            75% {               font-size:300%;               margin-left:25%;               width:150%;            }            to {               margin-left:0%;               width:100%;            }         }         @-webkit-keyframes slidein {            from {               margin-left:100%;               width:300%            }            75% {               font-size:300%;               margin-left:25%;               width:150%;            }            to {               margin-left:0%;               width:100%;            }         }      </style>   </head>   <body>      <h1>Tutorials Point</h1>      <p>This is an example of animation left with an extra keyframe to make text changes.</p>      <button onclick = "myFunction()">Reload page</button>      <script>         function myFunction() {            location.reload();         }      </script>   </body>