模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）
效果图：
切图地址：
https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
页面代码：
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
String ctxPath = request.getContextPath();
request.setAttribute("ctxpath", ctxPath);//项目根路径
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${ctxpath}/js/jquery-1.11.3.min.js"></script>
<%-- <link href="${ctxpath}/css/main.css" rel="stylesheet"> --%>
<title>首页</title>
<style type="text/css">
#tangyuan1{
/* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; */
/* animation:mymove 3s ease-in-out both; */
animation:mymove 3s linear infinite;
-moz-animation:mymove 3s linear infinite; /* Firefox */
-webkit-animation:mymove 3s linear infinite; /* Safari and Chrome */
-o-animation:mymove 3s linear infinite; /* Opera */
}
@keyframes mymove
{
/* from {transform:scale(1.1,1.1);}
to {transform: scaleX(1) scaleY(1);} */
0% {
/* 水平翻转 */
/* -webkit-transform:rotateY(0deg); */
/* 垂直翻转 */
/* -webkit-transform:rotateX(0deg); */
/* 顺时针旋转 */
-webkit-transform:rotate(0deg);
/* 逆时针旋转 */
/* -webkit-transform:rotate(0deg); */
}
100% {
/* 水平翻转 */
/* -webkit-transform:rotateY(360deg); */
-webkit-transform:rotate(360deg);
}
} @-moz-keyframes mymove /* Firefox */
{
/* from {transform:scale(1.1,1.1);}
to {transform: scaleX(1) scaleY(1);} */
0% {
/* 水平翻转 */
/* -webkit-transform:rotateY(0deg); */
/* 垂直翻转 */
/* -webkit-transform:rotateX(0deg); */
/* 顺时针旋转 */
-webkit-transform:rotate(0deg);
/* 逆时针旋转 */
/* -webkit-transform:rotate(0deg); */
}
100% {
/* 水平翻转 */
/* -webkit-transform:rotateY(360deg); */
-webkit-transform:rotate(360deg);
}
} @-webkit-keyframes mymove /* Safari 和 Chrome */
{
/* from {transform:scale(1.1,1.1);}
to {transform: scaleX(1) scaleY(1);} */
0% {
/* 水平翻转 */
/* -webkit-transform:rotateY(0deg); */
/* 垂直翻转 */
/* -webkit-transform:rotateX(0deg); */
/* 顺时针旋转 */
-webkit-transform:rotate(0deg);
/* 逆时针旋转 */
/* -webkit-transform:rotate(0deg); */
}
100% {
/* 水平翻转 */
/* -webkit-transform:rotateY(360deg); */
-webkit-transform:rotate(360deg);
}
} @-o-keyframes mymove /* Opera */
{
/* from {transform:scale(1.1,1.1);}
to {transform: scaleX(1) scaleY(1);} */
0% {
/* 水平翻转 */
/* -webkit-transform:rotateY(0deg); */
/* 垂直翻转 */
/* -webkit-transform:rotateX(0deg); */
/* 顺时针旋转 */
-webkit-transform:rotate(0deg);
/* 逆时针旋转 */
/* -webkit-transform:rotate(0deg); */
}
100% {
/* 水平翻转 */
/* -webkit-transform:rotateY(360deg); */
-webkit-transform:rotate(360deg);
}
}
</style>
<script type="text/javascript">
$(function(){ //6210
// 0 270 540 810 1080 1890 2700 2970 3510 3780 4050 4320 5130 5940 6480 7290
//setInterval("tangyuan()",100);
setInterval("tangyuan1()",100);
//setInterval("indexChange()",1);
});
var count = 0;
function tangyuan(){
count = count - 270;
if(count == -8370){
count = 0;
}
var ctxpath = '${ctxpath}';
//url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png")
//https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
$("#tangyuan").css("background","url("+ctxpath+"/img/baidu/baidu_tangyuan.png) "+count+"px"+" 0px no-repeat");
} var count1 = -8370;
function tangyuan1(){
count1 = count1 + 270;
if(count1 == 0){
count1 = -8370;
}
var ctxpath = '${ctxpath}';
//url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png")
//https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
$("#tangyuan1").css("background","url("+ctxpath+"/img/baidu/baidu_tangyuan.png) "+count1+"px"+" 0px no-repeat");
}
</script>
</head>
<body>
<!-- <div id="tangyuan" style="position: absolute; top: 0px; left: 50%; background: url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png") -2970px 0px no-repeat; cursor: pointer; width: 270px; height: 129px; margin-left: -135px;" title="团团圆圆乐元宵">
</div> -->
汤圆不仅可以倒着挖<br/>
我还可以360°翻转着挖o(*￣︶￣*)o：<span style="color: red;">（大风车吱呀吱扭扭的转(￣▽￣)""）</span>
<!-- background: url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png") -2970px 0px no-repeat; -->
<div id="tangyuan1" style="position: absolute; top: 100px; left: 20%; cursor: pointer; width: 270px; height: 129px; margin-left: -135px;" title="团团圆圆乐元宵">
</body>
</html>