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

ID:13204 / 打印

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

您可以尝试运行以下代码,使用 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>
上一篇: CSS border-top-right-radius 属性
下一篇: 如何使用 jQuery 添加和删除 CSS 类到元素?

作者:admin @ 24资源网   2024-10-18

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。