<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS3圆圈动画放大缩小循环动画效果</title>

<style>

.dot {

margin:150px auto;

width:200px;

height:200px;

background-color:#E3E3E3;

border-radius: 50%;

box-shadow: 0 0 10px rgba(0,0,0,.3) inset;

-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/

-webkit-animation-duration: 2s;/*动画持续时间*/

-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/

-webkit-animation-delay: 0s;/*动画延迟时间*/

-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/

-webkit-animation-direction: alternate;/*定义动画方式*/

}

@keyframes ripple {

0% {

opacity:0.35;

width:190px;

height:190px;

}

100% {

opacity: 0.9;

width:250px;

height:250px;

}

}

</style>

</head>

<body>

    <div class="dot"></div>

</body>

</html>

css3 放大缩小代码的更多相关文章

  1. keyframes 放大缩小动画

    本次项目中动画放大缩小代码小结 .fix .phone{ -moz-animation: myfirst 1s infinite; -webkit-animation: myfirst 1s infi ...

  2. CSS3圆圈动画放大缩小循环动画效果

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  3. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  4. css3 animation(左右摆动) (放大缩小)

    左右摆动: @-webkit-keyframes roundRule{ 0%, 100%{ -webkit-transform: rotate(-15deg); } 50%{ -webkit-tran ...

  5. hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

  6. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  7. WPF布局之让你的控件随着窗口等比放大缩小，适应多分辨率满屏填充应用

    一直以来,我们设计windows应用程序,都是将控件的尺寸定好,无论窗体大小怎么变,都不会改变,这样的设计对于一般的应用程序来说是没有问题的,但是对于一些比较特殊的应用,比如有背景图片的,需要铺面整个 ...

  8. C# GDI绘制矩形框，鼠标左键拖动可移动矩形框，滚轮放大缩小矩形框

    最近工作需要,要做一个矩形框,并且 用鼠标左键拖动矩形框移动其位置.网上查了一些感觉他们做的挺复杂的.我自己研究一天,做了一个比较简单的,发表出来供大家参考一下.如觉得简单,可路过,谢谢.哈哈. 先大 ...

  9. Canvas实现图片放大缩小移动操作

    对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过.最近做项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大.缩小.移动功能.这里就很合适使用html5的 ...

随机推荐

  1. Oracle database精装版11gR2入门详细连接教程

    对于11g本身比较简单,适合学习者使用,对电脑要求相对较低. 自己一个人单机学习使用. 工具/原料   Oracle Database Express Edition 11g Release 2安装包 ...

  2. Java 语言基础之函数

    函数的定义: 函数就是定义在类中的具有特定功能的一段独立小程序 函数也称为方法 函数定义格式: 修饰符 返回值类型 函数名(参数类型 形式参数1, 参数类型 形式参数2,...) { 执行语句; re ...

  3. for and range()

    pyhon 中 for 循环可以遍历任何序列的项目,如一个字典或者一个字符. for 循环格式一般如下: for <variable-变量> in <sequence-序列>: ...

  4. 流畅的python 符合python风格的对象

    对象表示形式 每门面向对象的语言至少都有一种获取对象的字符串表示形式的标准方式.Python 提供了两种方式. repr() 以便于开发者理解的方式返回对象的字符串表示形式.str() 以便于用户理解 ...

  5. python线程间数据共享(示例演示)

    ``` import threading data_list = [] def task(arg): data_list.append(arg) print(data_list) def run(): ...

  6. servlet 通过 FileItem 实现多文件上传

    [本文简介] 一个servlet 多文件上传的简单例子. [依赖包] commons-fileupload-1.3.1.jar commons-io-2.2.jar [依赖包下载] commons-f ...

  7. EasySQLMAIL使用实践系列

    原文:http://blog.sina.com.cn/s/articlelist_5713986487_0_1.html 通过sql语句发送微信消息(转) 使用EasySQLMAIL的外部接口功能实现 ...

  8. corethink功能模块探索开发（十六）后台搜索功能

    效果图: 代码很简单,就是添加搜索框,搜索字段,在初始化页面查询的时候添加查询条件. 1.添加搜索框 添加到删除按钮后边. ->setSearch('请输入设备名称/MAC/宿舍号', U('i ...

  9. 使用ansible 完成yum安装lamp环境

    使用ansible 完成yum安装lamp环境 [root@node2 ~]# cd /etc/ansible/playbook/[root@node2 playbook]# lslamp[root@ ...

  10. Sql case when 小例

    SELECT I.uname, C.consume, O.name,O.dis_count,O.memberType, D.name,D.dis_count,D.up,D.down, CASE WHE ...