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宽)固定,容器包含内容(特指文字)多少不固定,这个时候就让人很苦恼了,将字体大小设置成多少才合适呢?下面看看我的解决思路: 首先要知道网 ...
随机推荐
- 深入理解 flex 布局以及计算_Flexbox, Layout
起因 对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文 ...
- Android Studio 连接 逍遥模拟器
1.启动 逍遥模拟器: 2.打开 Android Studio 项目: 3.命令行 adb connect 127.0.0.1:21503 C:\Users\Administrator>adb ...
- Web前端图形滑块检验组件实现
组件渲染图形: 初始化: ...
- ssm项目快速搭建（注解）
dao层配置 dao层配置注意事项: 1.Mapper.xml 文件中的 namespace 与 mapper 接口的类路径相同 2.Mapper.xml 接口方法名和 Mapper.xml 中定义的 ...
- [LeetCode]3Sum Closest题解
3sum Closest: Given an array S of n integers, find three integers in S such that the sum is closest ...
- UGUI——重写Image类实现进度条
目的: 游戏中经常会用到进度条,但是美术给的图片用filled一拉伸就很难看,如下图 第一种模式是九宫格模式,第二种是filled.而我们需要的是两种可结合的. 如何实现: 新建一个类,继承image ...
- MyBatis学习(三)---MyBatis和Spring整合
想要了解MyBatis基础的朋友可以通过传送门: MyBatis学习(一)---配置文件,Mapper接口和动态SQL http://www.cnblogs.com/ghq120/p/8322302. ...
- Spring入门（四）— 整合Struts和Hibernate
一.Spring整合Struts 1. 初步整合 只要在项目里面体现spring和 strut即可,不做任何的优化. struts 环境搭建 创建action public class UserAct ...
- Dubbo 体验（一）
最近新加入一个项目组,所使用的是Dubbo,采用的架构是分布式架构,数据库采用MySQL分片.之前也接触过一下,但为了能更好融入团队,所以找Dubbo官网看文档. 才发现Dubbo的官网已搬去apac ...
- Bootstrap Modal多个弹出层顺序
Bootstrap Modal多个弹出层顺序与div的顺序关联.后来者居上:即div靠后的modal层弹出的时候会在上层. 比如上图所示,模态框2弹出的时候会在模态框1上面.