<!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. PHP调用百度api生成短网址&根据短网址恢复长网址

    接口api文档地址:http://dwz.cn/#/apidoc?_k=i9ev5p 代码demo header("Content-type: text/html; charset=utf- ...

  2. e.pageX、e.clientX、e.screenX、e.offsetX的区别以及元素的一些CSS属性

    e.pageX,e.pageY:返回的值是相对于文档的定位,文档的左上角为(0,0),向右为正,向下为正,IE不支持: e.clientX,e.clientY:返回的值是相对于屏幕可见区域的坐标,如果 ...

  3. jquery datatables 学习笔记

    最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables. 功能是很强大,但是网上的例子比较少.在经过一段时间的努力可算是搞出来了. 官网地址:http: ...

  4. Java面试宝典之----java基础(含答案)

    一 JAVA基础 1. JAVA中的几种基本数据类型是什么,各自占用多少字节. int        32bit   short   16bitlong     64bit   byte     8b ...

  5. Excel2010条件格式的位置

    以下是excel2010的条件格式设置方法(英文版) 具体使用方法可以参考 http://office.microsoft.com/zh-cn/excel-help/HA102809768.aspx

  6. JavaScript高级编程———数据存储（cookie、WebStorage）

    JavaScript高级编程———数据存储(cookie.WebStorage) <script> /*Cookie 读写删 CookieUtil.get()方法根据cookie的名称获取 ...

  7. Tarjan系列1

    tajan的dfs树系列算法: 求解割点,桥,强连通分量,点双联通分量,边双联通分量: tajan是一个dfs,把一个图变成一个dfs树结构, dfs树结构,本质是通过一个没有任何要求的dfs把图的边 ...

  8. [SCOI2016]背单词——trie树相关

    题目描述 Lweb 面对如山的英语单词,陷入了深深的沉思,”我怎么样才能快点学完,然后去玩三国杀呢?“.这时候睿智的凤老师从远处飘来,他送给了 Lweb 一本计划册和一大缸泡椒,他的计划册是长这样的: ...

  9. ps入门教程:photoshop工作界面

    请大家安装好PS(这不是废话嘛……),然后将PS的界面熟悉一下,消除对PS的惧怕心理~~学会新建文件和保存文件,学会设置参考线. 安装完毕后,打开PS,就进入了PS的操作界面,我们来看一下[图1.1] ...

  10. less教程

    平时在工作中,偶尔会遇到老大让你修改原来写好的样式,如果修改的多的话,修改起来是非常麻烦的.他不像js一样,定义变量.函数,需要修改某些值,直接修改方法就行了.less的出现,恰恰帮我们解决了这个问题 ...