模仿百度首页“元宵节汤圆”动图，并实现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. php开启CURL支持

    window下安装php_curl支持 1. 找到php.ini 修改extension=php_curl.dll 把前面的分号去掉2. 把 php_curl.dll libeay32.dll ssl ...

  2. Unity 自己旋转 方法

    transform.Rotate(Vector3.up * Time.deltaTime * 100);

  3. ABBYY FineReader双十一优惠享不停，战绩如何？

    随着双十一的火热来袭,购物达人也是不吝啬囊中票子,各种姿势剁手齐全,立誓过后吃土半月,双十一的好与不好?自己也是门清,反正真真的是促进消费了! 就ABBYYFineReader而言,此次的双十一力度就 ...

  4. .net基础总复习(3)

    第三天 2.单例模式 1)  将构造函数私有化 2)  提供一个静态方法,返回一个对象 3)  创建一个单例 3.XML 可扩展的标记语言 XML:存储数据 注意: XML严格区分大小写,并且成对出现 ...

  5. [COCI2007]PRAVOKUTNI

    题目大意:在一个平面上,有\(N\)个点,求这些点构成的直角三角形个数.解题思路:枚举直角顶点,对于每个点,将这个点当做原点,对其他点按极角排序,然后双指针扫一遍,判断弧度差即可. C++ Code: ...

  6. splay 文艺平衡树 (数据结构)

    题目大意:略 splay维护区间翻转裸题,为了减少不必要的麻烦,多插入两个点,分别是0和n+1 每次找区间的第K个值,就在splay上二分即可 顺便学了一下splay的完美建树,而且splay有一些小 ...

  7. [AtCoder Regular Contest 083] Bichrome Tree

    树形DP. 每个点有两个属性:黑色点的权值和,白色点权值和,一个知道另一个也一定知道. 因为只要子树的和它相等的点得权值和不超过x[u],u点的权值总能将其补齐. 设计状态f[u]表示以u为根的子树, ...

  8. [学习笔记] CS131 Computer Vision: Foundations and Applications：Lecture 1 课程介绍

    课程大纲:http://vision.stanford.edu/teaching/cs131_fall1718/syllabus.html 课程定位: 课程交叉: what is (computer) ...

  9. document.documentElement与body下clientHeight,scrollHeight等区别

    本次说明仅在chrom环境下,ie等其他浏览器可能不同 1获取显示屏高度(pc和移动端,屏幕分辨率px) window.screen.height => 这个好理解,不多说. 2获取浏览器可视窗 ...

  10. navicat连接SQL Sever数据库出现的问题

    1.navicat 连接sqlserver提示要安装 sql server native client 解决办法:在navicat安装目录下有个sqlncli_x64.msi文件,双击安装一直下一步就 ...