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宽)固定,容器包含内容(特指文字)多少不固定,这个时候就让人很苦恼了,将字体大小设置成多少才合适呢?下面看看我的解决思路: 首先要知道网 ...
随机推荐
- 微信小程序 c#后台支付结果回调
又为大家带来简单的c#后台支付结果回调方法,首先还是要去微信官网下载模板(WxPayAPI),将模板(WxPayAPI)添加到服务器上,然后在打开WxPayAPI项目中的example文件下的 Nat ...
- golang学习之slice基本操作
slice的增删改查: //删除 func remove(slice []interface{}, i int) []interface{} { // copy(slice[i:], slice[i+ ...
- 十五、curator recipes之DistributedQueue
简介 curator实现了先入先出的分布式消息队列,它采用的是zookeeper的持久化有序节点. 官方文档:http://curator.apache.org/curator-recipes/dis ...
- 内嵌Jetty输出debug日志
Slf4jLog logger = new Slf4jLog(); logger.setDebugEnabled(true); Log.setLog(logger); log4j2.xml中配置如下章 ...
- 【SSH网上商城项目实战24】Struts2中如何处理多个Model请求
转自: https://blog.csdn.net/eson_15/article/details/51465067 1. 问题的提出 Struts2中如果实现了ModelDriven<m ...
- Hive & SparkSQL 比较
Hive 在 Hadoop 集群上所有数据的访问都是通过 Java 编写的 MapReduce 作业来完成的,这些让 Java 程序员来完成没有问题. 但是对 SQL 程序员来说,写 MapRedu ...
- 使用命令行编译打包运行自己的MapReduce程序 Hadoop2.6.0
使用命令行编译打包运行自己的MapReduce程序 Hadoop2.6.0 网上的 MapReduce WordCount 教程对于如何编译 WordCount.java 几乎是一笔带过… 而有写到的 ...
- Zookeeper + Guava loading cache 实现分布式缓存
1. 概述 项目中,创建的活动内容存入redis,然后需要用到活动内容的地方,从redis去取,然后参与计算. 活动数据的一个特点是更新不频繁.数据量不大.因为项目部署一般是多机器.多实例,除了red ...
- ionCube 安装
有些程序在php环境下运行需要安装ionCube Loader的扩展支持,得到如下提示 Site error: the ionCube PHP Loader needs to be installed ...
- Ubuntu增加一个用户并给普通用户赋予root权限的方法
1.添加用户,首先用adduser命令添加一个普通用户,命令如下: #adduser tommy //添加一个名为tommy的用户#passwd tommy //修改密码Changing pass ...