<!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. IO 包中的其他类

    打印流 PrintWriter 和 PrintWriter 直接操作输入流和文件 序列流 SequenceInputStream 对多个输入流进行合并 操作对象 ObjectInputStream 和 ...

  2. 安装Centos 7操作系统

    一.安装前准备 VMware workstation.CentOS-7-x86_64 系统镜像. 二.开始新建虚拟机 选择典型-下一步  选择稍后安装操作系统-下一步  选择LINUX-CentOS ...

  3. MySQL数据库的设计和表创建

    首先,我们使用Navicat Premium编辑器创建一个用户,同时设置用户权限,MySQL默认有一个root用户,拥有最高权限 下面,我们先创建一个用户: ①CREATE USER  'aaa'@' ...

  4. php smarty模板引擎

    <?php /* 一.什么是smarty? smarty是一个使用PHP写出来的模板PHP模板引擎,它提供了逻辑与外在内容的分离,简单的讲, 目的就是要使用PHP程序员同美工分离,使用的程序员改 ...

  5. python逆向工程：通过代码生成类图

    python逆向工程:通过代码生成类图 大致过程 现在有一个core包,里面有python的代码. 通过core包,生成python的类图,如下: 实施步骤: 1.首先安装graphviz,一个画图工 ...

  6. SAP 后台job

    SAP 如何定义后台job 有两种方 1是se38执行可执行程序后,菜单栏‘程序’--->'后台执行',输入输出设备,ENTER两次后,选择开始时间(立刻执行,或定义日期时间,也可周期执行..) ...

  7. 关于C# yield 你会使用吗？

    假设有这样一个需求:在一个数据源(下面代码arry)中把其中大于4的数据取出来遍历到前台,怎么做?(不使用linq) , , , , , , , , , }; 第一种情况:  不使用yield的情况下 ...

  8. Pimpl Idiom /handle body idiom

    在读<Effective C++>和项目源代码时,看到pImpl Idiom.它可以用来降低文件间的编译依赖关系,通过把一个Class分成两个Class,一个只提供接口,另一个负责实现该接 ...

  9. beego——ORM使用方法

    先来看一个简单示例: models.gp package main import ( "github.com/astaxie/beego/orm" ) type User stru ...

  10. yum速查

    yum命令是在Fedora和RedHat以及SUSE中基于rpm的软件包管理器,它可以使系统管理人员交互和自动化地更细与管理RPM软件包, 能够从指定的服务器自动下载RPM包并且安装,可以自动处理依赖 ...