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宽)固定,容器包含内容(特指文字)多少不固定,这个时候就让人很苦恼了,将字体大小设置成多少才合适呢?下面看看我的解决思路: 首先要知道网 ...
随机推荐
- Python——第一个python程序helloworld
安装了Python的环境之后,就是编写Python的代码了. 首先,我们来写一个简单的“hello world” 新建一个空白的txt文本,将后缀改为.py 改了后缀之后即变为Python程序的图标 ...
- NET Core 应用程序 IIS 运行报错 502.3-Gateway
转自:http://www.zmland.com/forum.php?mod=viewthread&tid=941 将 NET Core 应用程序部署在 IIS 环境,默认配置下,如果任务执行 ...
- [javaSE] GUI（菜单）
菜单MenuBar Menu MenuItem 调用Frame对象的setMenuBar()方法,设置菜单,参数:MenuBar对象 import java.awt.FlowLayout; impo ...
- 关于springmvc中常用的注解，自己也整理一下
1.@Controller 在springMVC中@controller主要用在控制层的类上,之前只知道用注解开发的时候必须加一个@controller ,今天看了别的大佬整理的才知道为什么这么用,控 ...
- 原生canvas写的飞机游戏
一个原生canvas写的飞机游戏,实用性不大,主要用于熟悉canvas的一些熟悉用法. 项目地址:https://github.com/BothEyes1993/canvas_game
- [SCOI2009]粉刷匠
线性DP预处理+分组背包 首先设dp[i][j][0/1]表示该木板前i个格刷了j次且最后一次颜色为0/1的最大正确数 做下0/1的前缀和然后转移状态 dp[i][j][k]=max(dp[l][j] ...
- 【PyQt5 学习记录】002：添加部件及网格布局
#!/usr/bin/python3 # -*- coding:utf-8 -*- import sys from PySide2.QtWidgets import (QApplication, QW ...
- 理解webpack4.splitChunks之cacheGroups
cacheGroups其实是splitChunks里面最核心的配置,一开始我还认为cacheGroups是可有可无的,这是完全错误的,splitChunks就是根据cacheGroups去拆分模块的, ...
- bootstrap学习笔记细化(表单)
主要属性: class="form-inline" 水平排列 class="form-group" 组键 form-control 圆角方框发光 input-l ...
- 微服务架构之spring cloud zipkin
Spring Cloud Zipkin是微服务的链路跟踪组件,帮助详细了解一次request&response的总计时,及每个微服务的消耗时间.微服务名称.异常信息等等过程信息. (一) 版本 ...