CSS3 HTML5动画

来源：互联网发布：linux 查看总cpu使用率编辑：程序博客网时间：2024/05/21 16:57
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'index.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><style type="text/css">body{text-align: center;}.rota{width:360px;height:100px;position:relative;animation:my 3.5s infinite;-webkit-animation:my 3.5s infinite;background-image: url(http://browser.qq.com/image/btndownload_5.png);}@keyframes my{form{-webkit-transform: rotateY(-360deg) rotateX(360deg) rotateZ(0deg);}to{-webkit-transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg);}}@-moz-keyframes my{form{-webkit-transform: rotateY(-1062deg) rotateX(10deg) rotateZ(0deg);}to{-webkit-transform: rotateY(-1062deg) rotateX(10deg) rotateZ(0deg);}}@-webkit-keyframes my{form{-webkit-transform: rotateY(-100deg) rotateX(10deg) rotateZ(0deg);}to{-webkit-transform: rotateY(0deg) rotateX(10deg) rotateZ(0deg);}}.box{  background-color: #24C23E;  width: 258px;  height: 150px;  box-shadow: 19px 13px 0px 0px #eee;  animation:box2d 3.5s infinite; -webkit-animation:box2d 3.5s infinite; }  @-webkit-keyframes box2d{ form{-webkit-transform: skew(-351deg,0deg);} to{-webkit-transform: skew(-0deg,-351deg);} }</style>  </head>    <body>    <div class="rota">        </div>         <div class="box">        </div>  </body></html>
0 0