- <!doctype html>
- <html>
- <head>
- <style>
- div {
- width: 400px;
- height:300px;
- background-color: #0080ff;
- font-size:3em;
- line-height:300px;
- text-align: center;
- color: #fff;
- -webkit-animation-name: rotate;
- -webkit-animation-duration:2s;
- -webkit-animation-iteration-count:1;
- -webkit-animation-timing-function:linear;
- -ms-animation-name: rotate;
- -ms-animation-duration:2s;
- -ms-animation-iteration-count:1;
- -ms-animation-timing-function:linear;
- -moz-animation-name: rotate;
- -moz-animation-duration:2s;
- -moz-animation-iteration-count:1;
- -moz-animation-timing-function:linear;
- }
- @-webkit-keyframes rotate {
- from {-webkit-transform: rotate(0deg);}
- to {-webkit-transform: rotate(360deg);}
- }
- @-ms-keyframes rotate {
- from {-ms-transform: rotate(0deg);}
- to {-ms-transform: rotate(360deg);}
- }
- @-moz-keyframes rotate {
- from {-moz-transform: rotate(0deg);}
- to {-moz-transform: rotate(360deg);}
- }
- </style>
- </head>
- <body>
- <div>Hello, HTML5!</div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/200520133458.html
来源: http://www.codesnippet.cn/detail/200520133458.html