<!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. 10.php引用(&)详解及注意事项

    <?php function &test() { static $b=0;//申明一个静态变量 $b=$b+1; echo $b; return $b; } $a=test();//这条 ...

  2. Response 和 Request

    1. request 对象和 response 对象均由服务器创建. 2. 服务器处理请求的流程: 服务器每次收到请求时, 都会为这个请求开辟一个新的线程; 服务器会把客户端的请求数据封装到 requ ...

  3. python基础之类的内置__setattr__,__delattr__,__getattr__和 二次加工标准类型（包装）

    一.内置attr:__setattr__,__delattr__,__getattr__ __setattr__ #添加/修改属性会触发它的执行 __delattr__ #删除属性的时候会触发 __g ...

  4. 2015-03-22——js常用的Array方法

    Array array.concat(item...);  //产生一个新数组如果item,是一个数组,那么它的每个元素会被分别添加(浅复制,只解析一层).示例:var a = [1, 3, 4];v ...

  5. windows下安装Composer提示缺少openssl的解决方法

    在Windows环境下安装Composer(注:Composer要求PHP版本在5.3.2+),你可能会遇到这种安装失败的情况:出错信息是 "The openssl extension is ...

  6. 关于CSDN 2016博客之星评选活动的感触

    一.前言 想想去年的这个时候还接到CSDN邀请,参加了"CSDN 2015博客之星"的评选活动, CSDN2015博客之星评选之拉票环节 而今年却没有接到CSDN的邀请,内心有点小 ...

  7. x265探索与研究（六）：main()函数

    x265探索与研究(六):main()函数 x265源代码的入口函数是main(),本文分析main()的主要功能. 首先给出main()函数的功能及其代码结构:其次给出main()函数源代码以及分析 ...

  8. JSP--JSP语法--指令--include(动态包含/静态包含)--九大隐式对象--四大域对象--JSP内置标签--JavaBean的动作元素--MVC三层架构

    一．JSP 原理:JSP其实就是一个servlet. Servlet负责业务逻辑处理,JSP只负责显示.开发中,JSP中不能有一行JAVA代码 二．JSP语法 1.    JSP模板元素:JSP中HT ...

  9. (转)RTP-H264封包分析

    rtp(H264)第一个包(单一NAL单元模式)————-sps 80 {V=10,p=0,x=0,cc=0000} 60 {m=0,pt=110 0000} 53 70{sequence numbe ...

  10. bootstrap datatable 参考文档

    start:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 扩展  http://issues.wenzhixin.net ...