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宽)固定,容器包含内容(特指文字)多少不固定,这个时候就让人很苦恼了,将字体大小设置成多少才合适呢?下面看看我的解决思路: 首先要知道网 ...
随机推荐
- DataSet常用简单方法
Clear移除表中所有行来清除任何数据的DataSet Clone赋值该DataSet的结构但不复制数据 Copy赋值DataSet的结构和数据 Dispose释放DataSet对象 Equals确定 ...
- C# List用Lambda表达式排序
降序: lstroot.Sort((x,y)=>y.static_count.CompareTo(x.static_count)); 升序: lstroot.Sort((x,y)=>x.s ...
- Cheatsheet: 2017 06.01 ~ 06.30
.NET Porting a .NET Framework library to .NET Core Performance Improvements in .NET Core High-perfor ...
- 十、spark graphx的scala示例
简介 spark graphx官网:http://spark.apache.org/docs/latest/graphx-programming-guide.html#overview spark g ...
- SSM实现图片上传管理操作
Spring MVC 实现文件上传 时序图 利用 Spring MVC 实现文件上传功能,离不开对 MultipartResolver 的设置.MultipartResolver 这个类,你可以将其视 ...
- Java Swing实战（四）按钮组件JButton及其事件监听
接下来为面板添加保存按钮,并为按钮绑定事件监听. /** * @author: lishuai * @date: 2018/11/26 13:51 */ public class WeimingSyn ...
- MySQL Community Server 5.5.56 ZIP Archive 绿色解压版 window安装步骤
MySQL Community Server 5.5.56 ZIP Archive 绿色解压版 window安装步骤 首先 准备好启动配置文件my.ini [mysqld] #设置字符集为utf8 ...
- 借助 Filter 生成静态页面缓存问题
如果有些 jsp 页面,在一次 jsp 页面生成后 html 后, 就不太可能需要更新.可以使用缓存机制来解决这个问题. 解决思路如下 1. 定义一个文件夹 pagestaticize,用来存放 j ...
- hdu 1075 What Are You Talking About 字典树模板
What Are You Talking About Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 102400/204800 K ...
- select实现三级联动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...