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

效果图：

切图地址：

https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png

页面代码：

  1. <!DOCTYPE html>
  2. <%@ page language="java" contentType="text/html; charset=UTF-8"%>
  3. <%
  4.     String ctxPath = request.getContextPath();
  5.     request.setAttribute("ctxpath", ctxPath);//项目根路径
  6. %>
  7. <html>
  8. <head>
  9. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  10. <script src="${ctxpath}/js/jquery-1.11.3.min.js"></script>
  11. <%-- <link href="${ctxpath}/css/main.css" rel="stylesheet"> --%>
  12.    <title>首页</title>
  13. <style type="text/css">
  14. #tangyuan1{
  15.     /* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; */
  16.     /* animation:mymove 3s ease-in-out both; */
  17.     animation:mymove 3s linear infinite;
  18.     -moz-animation:mymove 3s linear infinite; /* Firefox */
  19.     -webkit-animation:mymove 3s linear infinite; /* Safari and Chrome */
  20.     -o-animation:mymove 3s linear infinite; /* Opera */
  21. }
  22. @keyframes mymove
  23. {
  24. /* from {transform:scale(1.1,1.1);}
  25. to {transform: scaleX(1) scaleY(1);} */
  26.     0% {
  27.         /* 水平翻转  */
  28.         /* -webkit-transform:rotateY(0deg);  */
  29.         /* 垂直翻转  */
  30.         /* -webkit-transform:rotateX(0deg);  */
  31.         /* 顺时针旋转  */
  32.         -webkit-transform:rotate(0deg);
  33.         /* 逆时针旋转  */
  34.         /* -webkit-transform:rotate(0deg);  */
  35.     }
  36.     100% {
  37.         /* 水平翻转 */
  38.         /* -webkit-transform:rotateY(360deg); */
  39.         -webkit-transform:rotate(360deg);
  40.     }
  41. }
  42.  
  43. @-moz-keyframes mymove /* Firefox */
  44. {
  45. /* from {transform:scale(1.1,1.1);}
  46. to {transform: scaleX(1) scaleY(1);} */
  47. 0% {
  48.         /* 水平翻转  */
  49.         /* -webkit-transform:rotateY(0deg);  */
  50.         /* 垂直翻转  */
  51.         /* -webkit-transform:rotateX(0deg);  */
  52.         /* 顺时针旋转  */
  53.         -webkit-transform:rotate(0deg);
  54.         /* 逆时针旋转  */
  55.         /* -webkit-transform:rotate(0deg);  */
  56.     }
  57.     100% {
  58.         /* 水平翻转 */
  59.         /* -webkit-transform:rotateY(360deg); */
  60.         -webkit-transform:rotate(360deg);
  61.     }
  62. }
  63.  
  64. @-webkit-keyframes mymove /* Safari 和 Chrome */
  65. {
  66. /* from {transform:scale(1.1,1.1);}
  67. to {transform: scaleX(1) scaleY(1);} */
  68.     0%  {
  69.         /* 水平翻转  */
  70.         /* -webkit-transform:rotateY(0deg);  */
  71.         /* 垂直翻转  */
  72.         /* -webkit-transform:rotateX(0deg);  */
  73.         /* 顺时针旋转  */
  74.         -webkit-transform:rotate(0deg);
  75.         /* 逆时针旋转  */
  76.         /* -webkit-transform:rotate(0deg);  */
  77.     }
  78.     100% {
  79.         /* 水平翻转 */
  80.         /* -webkit-transform:rotateY(360deg); */
  81.         -webkit-transform:rotate(360deg);
  82.     }
  83. }
  84.  
  85. @-o-keyframes mymove /* Opera */
  86. {
  87. /* from {transform:scale(1.1,1.1);}
  88. to {transform: scaleX(1) scaleY(1);} */
  89. 0% {
  90.         /* 水平翻转  */
  91.         /* -webkit-transform:rotateY(0deg);  */
  92.         /* 垂直翻转  */
  93.         /* -webkit-transform:rotateX(0deg);  */
  94.         /* 顺时针旋转  */
  95.         -webkit-transform:rotate(0deg);
  96.         /* 逆时针旋转  */
  97.         /* -webkit-transform:rotate(0deg);  */
  98.     }
  99.     100% {
  100.         /* 水平翻转 */
  101.         /* -webkit-transform:rotateY(360deg); */
  102.         -webkit-transform:rotate(360deg);
  103.     }
  104. }
  105. </style>
  106. <script type="text/javascript">
  107. $(function(){ //6210
  108.     // 0 270 540 810 1080 1890 2700 2970 3510 3780 4050 4320 5130 5940 6480 7290
  109.     //setInterval("tangyuan()",100);
  110.     setInterval("tangyuan1()",100);
  111.     //setInterval("indexChange()",1);
  112. });
  113. var count = 0;
  114. function tangyuan(){
  115.     count = count - 270;
  116.     if(count == -8370){
  117.         count = 0;
  118.     }
  119.     var ctxpath = '${ctxpath}';
  120.     //url(&quot;https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png&quot;)
  121.     //https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
  122.     $("#tangyuan").css("background","url("+ctxpath+"/img/baidu/baidu_tangyuan.png) "+count+"px"+" 0px no-repeat");
  123. }
  124.  
  125. var count1 = -8370;
  126. function tangyuan1(){
  127.     count1 = count1 + 270;
  128.     if(count1 == 0){
  129.         count1 = -8370;
  130.     }
  131.     var ctxpath = '${ctxpath}';
  132.     //url(&quot;https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png&quot;)
  133.     //https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
  134.     $("#tangyuan1").css("background","url("+ctxpath+"/img/baidu/baidu_tangyuan.png) "+count1+"px"+" 0px no-repeat");
  135. }
  136. </script>
  137. </head>
  138. <body>
  139. <!-- <div id="tangyuan" style="position: absolute; top: 0px; left: 50%; background: url(&quot;https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png&quot;) -2970px 0px no-repeat; cursor: pointer; width: 270px; height: 129px; margin-left: -135px;" title="团团圆圆乐元宵">
  140. </div> -->
  141. 汤圆不仅可以倒着挖<br/>
  142. 我还可以360°翻转着挖o(*￣︶￣*)o：<span style="color: red;">（大风车吱呀吱扭扭的转(￣▽￣)""）</span>
  143. <!-- background: url(&quot;https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png&quot;) -2970px 0px no-repeat; -->
  144. <div id="tangyuan1" style="position: absolute; top: 100px; left: 20%; cursor: pointer; width: 270px; height: 129px; margin-left: -135px;" title="团团圆圆乐元宵">
  145. </body>
  146. </html>

模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）的更多相关文章

  1. 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）

    模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...

  2. css模仿百度首页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. python学习之matplotlib绘制动图（FuncAnimation()参数）

    1.函数FuncAnimation(fig,func,frames,init_func,interval,blit)是绘制动图的主要函数,其参数如下: a.fig 绘制动图的画布名称 b.func自定 ...

  4. 模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

  5. 基于Retrotfit2.1+Material Design+ijkplayer开发的一个APP（新闻，gif 动图，视频播放）

    此项目主要目的还是为了练习框架的使用,仅供学习用途. 数据来源 新闻 直接用的聚合数据提供的接口:https://www.juhe.cn/docs/api/id/235gif动图 通过jsoup爬的某 ...

  6. html+css 百度首页练习

    这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口 ...

  7. 7个GIF动图帮你瞬间理解三角函数

    7个GIF动图帮你瞬间理解三角函数 蝌蚪五线谱 百家号04-2120:53 图片来源:IMGUR 三角函数是数学中研究三角形的一个分支,专门阐述三角形的角度和对应边的关系. 有趣的是,定义边角关系的三 ...

  8. 怎样录制简单GIF动图

    看到视频里的精彩画面,想用动图的形式保存下来,应该如何录制呢,今天就介绍一款小巧实用,操作简单的软件,GifCam 2.0 汉化绿色版.相比其它的录制软件,它是免费无水印又可以在线录制的. 本来学习一 ...

  9. python抓取不得姐动图（报错 urllib.error.HTTPError: HTTP Error 403: Forbidden）

    抓取不得姐动图(报错) # -*- coding:utf-8 -*- #__author__ :kusy #__content__:文件说明 #__date__:2018/7/23 17:01 imp ...

随机推荐

  1. Extjs Grid 各种Demo

    grid的一个渲染效果 Ext.define('cfWeb.view.accountSetting.OrgManageView',{ alias : 'widget.orgManageView', e ...

  2. python中数字的排序

    lst = [2,22,4,7,18]for j in range(len(lst)): #记录内部排序的次数 i = 0 while i < len(lst)-1: if lst[i] > ...

  3. C#中显现串口通信SerialPort类

    SerialPort类的常用属性 名 称 说 明 BaseStream 获取 SerialPort 对象的基础 Stream 对象 BaudRate 获取或设置串行波特率 BreakState 获取或 ...

  4. .NET CORE MVC网站体验

    安装SDK https://www.microsoft.com/net/download/core 运行命令行工具 mkdir coremvc cd coremvc dotnet new 文件建立成功 ...

  5. Java NIO（三）通道

    概念 通道(Channel)由java.nio.channels包定义的.channel表示IO源与目标打开的连接,类似流,但不能直接访问数据,只能与Buffer进行交互 通道类似流,但又有不同: 既 ...

  6. es6总结（二）

    1.es6三种声明方式: a.var 全局声明 b.let  局部变量声明 c.const     常量声明 2.变量的解构赋值 a.数组的解构赋值 等号左边与右边形式统一  let [a,[b,c] ...

  7. null和undifned的区别

    null和undifned的区别 1 从类型方面:null的类型是对象,undified的类型是undified. 2 从定义方面:null是一个表示"无"的对象,转为数值时为0: ...

  8. iOS 内网内测应用发布

    之前测试时,iOS 开发会把测试版本上传到蒲公英上,可以很方便的获取.后来认为不安全,万一测试版泄露了会有风险,就又回到了解放前,测试跑到开发那里编包.想过把手机越狱安装开发的编的 ipa 包,这样测 ...

  9. signature验证/salt验证/token验证的作用

    1.salt验证: salt是随机生成的一串字符,salt验证的作用是将生成的salt与加密的密码密文拼接后再次加密存储  这样可以是存储在数据库中的密码更加安全 2.signature验证: I.将 ...

  10. 自定义一个简单的web框架

    from wsgiref.simple_server import make_server def book(request):     #视图函数 return [b'<h1> book ...