模仿百度首页“元宵节汤圆”动图,并实现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(&quot;https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png&quot;)
//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(&quot;https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png&quot;)
//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(&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="团团圆圆乐元宵">
</div> -->
汤圆不仅可以倒着挖<br/>
我还可以360°翻转着挖o(* ̄︶ ̄*)o:<span style="color: red;">(大风车吱呀吱扭扭的转( ̄▽ ̄)"")</span>
<!-- background: url(&quot;https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png&quot;) -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>

模仿百度首页“元宵节汤圆”动图,并实现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. Asp.Net WebApi核心对象解析(下篇)

    在接着写Asp.Net WebApi核心对象解析(下篇)之前,还是一如既往的扯扯淡,元旦刚过,整个人还是处于晕的状态,一大早就来处理系统BUG,简直是坑爹(好在没让我元旦赶过来该BUG),队友挖的坑, ...

  2. ABP框架 - 数据传输对象

    文档目录 本节内容: DTO 必要性 领域层的抽象 数据隐藏 序列化和延迟加载问题 DTO 约定和验证 示例 DTO和实体间自动映射 使用特性和扩展方法进行映射 辅助接口和类 Data Transfe ...

  3. Maven工程中的右键team

    与资源库同步(S):在需要合并版本时使用 提交(C):本地代码写入源码库 更新(U):本地代码升级到服务器端版本 在点击更新时,请注意: 如果当前项目有改动(甚至是比原来多了一个空格),则此时无法更新 ...

  4. 缺少编译器要求的成员&ldquo;System.Runtime.CompilerServices.ExtensionAttribute..ctor&rdquo; 解决方案

    我自己使用的解决方法 错误产生环境及非完美解决办法 错误提示:缺少编译器要求的成员"System.Runtime.CompilerServices.ExtensionAttribute..c ...

  5. 解决jQuery对表单serialize后出现的乱码问题

    通过看jQuery源码可以知道,serialize方法是通过encodeURIComponent编码的,所以解决乱码的最笨方法:  1.重新分解序列化后的值  2.把分解的值重新decodeURICo ...

  6. 【开发】Dialog 对话框

    提示:Dialog 继承自 Panel,有大量的方法在 Panel 中已被定义,可以复用. Dialog API:http://www.jeasyui.net/plugins/181.html Pan ...

  7. WinSock网络编程基础(1)

    记录学习windows网络编程过程中遇到的问题和相关笔记 基本概念: Socket: socket起源于UNIX,Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.基于&qu ...

  8. quartz一次简单应用经历

    项目里使用到每月的第一天需要定时统计上一个月的某种数据,这个时候,我开始第一次知道任务调度这么一个专业词汇.也初次了解quartz这个任务调度框架.网上看了好几篇博文,有种quartz越看越难的感觉, ...

  9. VS2015 scanf 函数报错 error C4996: &#39;scanf&#39;

    错误提示:error C4996: 'scanf': This function or variable may be unsafe. Consider using scanf_s instead. ...

  10. Hadoop MapReduce编程 API入门系列之Crime数据分析(二十五)(未完)

    不多说,直接上代码. 一共12列,我们只需提取有用的列:第二列(犯罪类型).第四列(一周的哪一天).第五列(具体时间)和第七列(犯罪场所). 思路分析 基于项目的需求,我们通过以下几步完成: 1.首先 ...