<!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. 跳出NSDate

    感觉任何语言关于时间的格式化处理,时区的处理都是多的,最近被NSDate的各种问题坑了好久 先看看关于NSDate自己的问题 1.NSDate NSDate获取当前时间 NSDate *date=[N ...

  2. python系列十六：Python3 面向对象

    #!/usr/bin/python #-*-coding:gbk-*- #Python3 面向对象 '''面向对象技术简介    类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了 ...

  3. 第19章—后端分页（PageHelper）

    spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...

  4. 关于增强for循环和普通for循环是否需要判断为null的情况

    1.增强for循环: public static void main(String[] args) { List<Object> list = null; for(Object s : l ...

  5. Visualizing mathematical functions by generating custom meshes using FireMonkey（很美）

    Abstract: This article discusses how you can generate your own 3-dimensional mesh for visualizing ma ...

  6. C#连接EXCEL和ACCESS字符串2003及2007版

    97-2003版本 EXCEL Provider=Microsoft.Jet.OLEDB.4.0;Data Source=文件位置;ExtendedProperties=Excel 8.0;HDR=Y ...

  7. Angular学习笔记—RxJS与Observable（转载）

    1. Observable与观察者模式的关系 其实这里讲的Observable就是一种观察者模式,只不过RxJS把Observable结合了迭代模式以及附件了很多的operator,让他变得很强大,也 ...

  8. Java并发—原子类，java.util.concurrent.atomic包(转载）

    原子类 Java从JDK 1.5开始提供了java.util.concurrent.atomic包(以下简称Atomic包),这个包中 的原子操作类提供了一种用法简单.性能高效.线程安全地更新一个变量 ...

  9. java 中JFinal getModel方法和数据库使用出现问题解决办法

    JFinal getModel方法(从页面表单中获取Model对象)+数据库存储问题 一.getmodel方法 1.在JConfig配置类中的数据库映射(存储到数据库时需要此配置) public vo ...

  10. 为Eclipse指定JVM

    运行eclipse时,报如下错误时,可以通过修改配置文件eclipse.ini来解决. Version 1.4.1_01 of the JVM is not suitable for this pro ...