模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）
模仿百度首页“元宵节汤圆”动图，并实现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>
