jq实现从容器中间扩散的方式显示文字
<!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实现从容器中间扩散的方式显示文字的更多相关文章
- JQ关于浏览器宽高的获取方式
JQ关于浏览器宽高的获取方式 alert($(window).height()); //浏览器时下窗口可视区域高度alert($(document).height()); //浏览器时下窗口文档的高度 ...
- 05_IOC容器装配Bean(注解方式)
IOC容器装配Bean(注解方式) 1.使用注解方式进行Bean注册 xml 方式: <bean id="" class=""> spring2.5 ...
- 04_IOC容器装配Bean(xml方式)
IOC容器装配Bean(xml方式) 1.Spring 提供配置Bean三种实例化方式 1)使用类构造器实例化(默认无参数) <bean id="bean1" class=& ...
- spring IOC容器实例化Bean的方式与RequestContextListener应用
spring IOC容器实例化Bean的方式有: singleton 在spring IOC容器中仅存在一个Bean实例,Bean以单实例的方式存在. prototype 每次从容器中调用Bean时, ...
- Docker容器互访三种方式
我们都知道docker容器之间是互相隔离的,不能互相访问,但如果有些依赖关系的服务要怎么办呢.下面介绍三种方法解决容器互访问题. 方式一.虚拟ip访问 安装docker时,docker会默认创建一个内 ...
- 进入Docker容器的4种方式
进入Docker容器的4种方式 在使用Docker创建了容器之后,大家比较关心的就是如何进入该容器了,其实进入Docker容器有好几多种方式,这里我们就讲一下常用的几种进入Docker容器的方法. 进 ...
- 普通java类加入spring容器的四种方式
今天在自己开发的工具类中使用了spring注入的方式调用了其他类,但是发生的报错,在整理了后今天小结一下. 首先简单介绍下spring容器,spring容器是整个spring框架的核心,通常我们说的s ...
- CountUp.js – 让数字以非常有趣的动画方式显示
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...
- 根据html容器大小和显示文字多少调节字体大小
在做html相关的东西的时候经常会遇到这样的问题,容器大小(长x宽)固定,容器包含内容(特指文字)多少不固定,这个时候就让人很苦恼了,将字体大小设置成多少才合适呢?下面看看我的解决思路: 首先要知道网 ...
随机推荐
- Tomcat源码分析——类加载体系
前言 Tomcat遵循J2EE规范,实现了Web容器.很多有关web的书籍和文章都离不开对Tomcat的分析,初学者可以从Tomcat的实现对J2EE有更深入的了解.此外,Tomcat还根据Java虚 ...
- JS类型和类 小记录
七种数据类型 number 记住二进制是0b开头 八进制0开头,后来ES5添加了0o开头 十六进制是0x开头 string var s = ' + ' // 无回车符号 或 var s = ` ` / ...
- js 获取当前标签 jquery1.11.4
.<input type="checkbox" onchange='allstu(this);return false;' /> 2.<input type=&q ...
- 述一个程序员的技能：系统安装（win7版）idea配置
idea配置:http://www.phperz.com/article/15/0923/159043.html 作为一名计算机专业出身的程序员,组装电脑和安装系统是基本技能.打造一个安全稳定高效的开 ...
- springboot----logback日志
默认情况下,Spring Boot 配置 ERROR, WARN, INFO 三种日志级别.如果需要 Debug 级别的日志.在 src/main/resources/application.prop ...
- HDU2048 神，上帝以及老天爷 错排
http://acm.hdu.edu.cn/showproblem.php?pid=2048 这是一道错排的题目 错排如下:http://baike.baidu.com/link?url=U2_H-4 ...
- DLL文件
Dll文件的全称是Dynamic Link Library,中文意思为动态链接库,DLL文件是不可执行文件,其是一个包含由多个程序同时使用的代码和数据的库,动态链接提供了一种方法,使进程可以调用不属于 ...
- php格式化保留2位小数
<td align="center"><?php echo sprintf("%.2f",$v[r][red_bag_money]);?> ...
- MySQL与PHP的连接教程步骤（图文）
本篇文章我们介绍一下PHP与MySQL的整合,既然是与MySQL整合,那么我们首先肯定是要安装MySQL.下面我们就介绍下MySQL的安装方法. 第一步,下载MySQL.下载PHP可以去PHP中文网下 ...
- 在 ubuntu 上运行 php 脚本
在 ubuntu 上运行 php 脚本 一.配置运行环境 1.要在 ubuntu 上运行 php 脚本,需要安装 Apache2 和 PHP 具体步骤,请参考:Ubuntu 搭建Web服务器(MySQ ...