<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .wrap {

            width: 300px;

            height: 300px;

            margin: 10px auto;

            overflow: hidden;

        }

        .con {

            width: 300px;

            height: 300px;

            position: relative;

            border: 1px solid #ccc;

            padding: 5px;

        }

           .wrap1 {

               width: 300px;

               height: 300px;

               margin: 10px auto;

               overflow: hidden;

               position: relative;

           }

          .bg {

              position: absolute;

              width: 0px;

              height: 0px;

              border-radius: 150px;

              border: 250px solid #00c1de;

              top: -100px;

              left: -100px;

              animation: identifier 5s;

          }

        @-webkit-keyframes identifier {

            from {

                -webkit-transform: rotate(0deg);

            }

            to {

                -webkit-transform: rotate(720deg);

            }

        }

        @keyframes identifier {

            from {

                -webkit-transform: rotate(0deg);

            }

            to {

                -webkit-transform: rotate(720deg);

            }

        }

    </style>

</head>

<body>

<div class="wrap1">

    <div class="con">

        测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测

    </div>

    <div class="bg"></div>

</div>

<script>

    $(".bg").animate({"width": "300px", "height": "300px", "left": "-250px", "top": "-250px"}, 5000);

</script>

</body>

</html>

jq实现从容器中间扩散的方式显示文字的更多相关文章

  1. JQ关于浏览器宽高的获取方式

    JQ关于浏览器宽高的获取方式 alert($(window).height()); //浏览器时下窗口可视区域高度alert($(document).height()); //浏览器时下窗口文档的高度 ...

  2. 05_IOC容器装配Bean(注解方式)

    IOC容器装配Bean(注解方式) 1.使用注解方式进行Bean注册 xml 方式: <bean id="" class=""> spring2.5 ...

  3. 04_IOC容器装配Bean(xml方式)

    IOC容器装配Bean(xml方式) 1.Spring 提供配置Bean三种实例化方式 1)使用类构造器实例化(默认无参数) <bean id="bean1" class=& ...

  4. spring IOC容器实例化Bean的方式与RequestContextListener应用

    spring IOC容器实例化Bean的方式有: singleton 在spring IOC容器中仅存在一个Bean实例,Bean以单实例的方式存在. prototype 每次从容器中调用Bean时, ...

  5. Docker容器互访三种方式

    我们都知道docker容器之间是互相隔离的,不能互相访问,但如果有些依赖关系的服务要怎么办呢.下面介绍三种方法解决容器互访问题. 方式一.虚拟ip访问 安装docker时,docker会默认创建一个内 ...

  6. 进入Docker容器的4种方式

    进入Docker容器的4种方式 在使用Docker创建了容器之后,大家比较关心的就是如何进入该容器了,其实进入Docker容器有好几多种方式,这里我们就讲一下常用的几种进入Docker容器的方法. 进 ...

  7. 普通java类加入spring容器的四种方式

    今天在自己开发的工具类中使用了spring注入的方式调用了其他类,但是发生的报错,在整理了后今天小结一下. 首先简单介绍下spring容器,spring容器是整个spring框架的核心,通常我们说的s ...

  8. CountUp.js – 让数字以非常有趣的动画方式显示

    CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...

  9. 根据html容器大小和显示文字多少调节字体大小

    在做html相关的东西的时候经常会遇到这样的问题,容器大小(长x宽)固定,容器包含内容(特指文字)多少不固定,这个时候就让人很苦恼了,将字体大小设置成多少才合适呢?下面看看我的解决思路: 首先要知道网 ...

随机推荐

  1. ayer.prompt 怎样让输入值为空也可以向下执行

    http://fly.layui.com/jie/4227/ layer.prompt({title: '输入任何口令,并确认',formType: 1, //prompt风格,支持0-2value: ...

  2. Linux基础学习1--档案的属性和目录

    用命令 ls -al可以列出当前所有档案,和档案的各种情况 第一块是档案属性:一共10个,第一个代表档案类型 {d:目录,-:档案,l:连接档,b:接口设备,c:串行端口设备},接下来是三个一组,第一 ...

  3. oracle ROW_NUMBER() OVER (PARTITION BY COL1 ORDER BY COL2)

    工作中遇到的一个问题,需要对某列进行分组排序,取其中排序的第一条数据项 用到了ROW_NUMBER() OVER(PARTITION BY COL1 ORDER BY COL2)来解决此问题. 实例准 ...

  4. 【SSH网上商城项目实战25】使用java email给用户发送邮件

       转自: https://blog.csdn.net/eson_15/article/details/51475046 当用户购买完商品后,我们应该向用户发送一封邮件,告诉他订单已生成之类的信息, ...

  5. 最短路问题（dijkstral 算法）（优化待续）

    迪杰斯特拉算法是由荷兰计算机科学家狄克斯特拉于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向图中最短路径问题.迪杰斯特拉算法主要特点是以起始点为中心向 ...

  6. Hibernate入门（四）—— 查询

    一.Hibernate查询 1.Hibernate检索(查询)方式的分类 OID检索 :根据主键查询,get/load 对象导航检索 :通过一个对象获得其关联对象.[重点] Category cate ...

  7. display:table和display:table-cell的妙用

    display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到, ...

  8. JQuery漂浮广告代码

    <!doctype html><html><head><meta charset="utf-8"><title>jque ...

  9. 在linux中给你的应用做压力测试

    在linux中给你的应用做压力测试 作者: 立地 邮箱: jarvin_g@126.com QQ: 511363759 一.webbench 1.在Ubuntu中安装webbench —支持get,h ...

  10. ESP8266调试记录

    1.引脚图:使用STM32F103ZET6芯片的串口1  PA9-TX //PA10-RX(该串口挂载到APB2总线时钟)然后分别连接模块的RX和TX,供电使用3.3v(供电一定要稳)但不能超过5v ...