代码如下：

<!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.2;

width:250px;

height:250px;

}

}

</style>

</head>

<body>

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

</body>

</html>

　　

CSS3圆圈动画放大缩小循环动画效果的更多相关文章

  1. iOS8上放大缩小的动画

    CGAffineTransformMakeScale这个方法我们以前经常使用,但是在IOS8上出现问题了 [UIView animateWithDuration:0.3 animations:^{ b ...

  2. css3 放大缩小代码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. keyframes 放大缩小动画

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

  4. 【Visual C++】游戏编程学习笔记之六：多背景循环动画

    本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44264153 作者:ZeeCod ...

  5. CSS3实现放大缩小动画

    HTML <div> <div style="height: 35px;width:300px;background:orangered;border-radius: 4p ...

  6. 写多个物件css3循环动画案例原理

    div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: ...

  7. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  8. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  9. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

随机推荐

  1. HTML+CSS实现页面豆腐块布局和图片居中

    <!DOCTYPE html> <html> <head lang="en"> <meta http-equiv="Conten ...

  2. LabVIEW（十三）：同一个控件的输入和输出转换

    1.实现功能:读取某些文件的数据并将这些数据显示在一个界面上,对界面上的数据进行修改后,将修改后的数据保存到源文件中. 2.显示功能: 程序框图右键>文件I/O>读取分隔符电子表格> ...

  3. 利用ngnix解决跨域问题

    一,定义 跨域是指从一个域名的网页去请求另一个域名的资源,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制.跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就 ...

  4. 词向量：part 2 CBoW、Skip-Gram、Negative Sampling、Hierarchical Softmax、GloVe、fastText、doc2vec

  5. 学习react

    推荐资源: 一位react的最初构建者写的学习react的建议,这是翻译过的http://www.360doc.com/content/16/0129/07/13518188_531384175.sh ...

  6. Java gc中的那些事

    我们已经知道Java堆是被所有线程共享的一块内存区域,所有对象实例和数组都在堆栈进行内存分配.为了进行高效的垃圾回收,虚拟机把堆内存划分成新生代年代(旧一代)和永久代(永久代)3个区域. 新生代 新生 ...

  7. [P4921] 情侣？给我烧了！

    回顾一下错排公式 错排问题: 设n位错排数为D[n].考虑元素1的位置,设置为k(有n-1中 ):在考虑元素k的位置, 若为1,则转换为n-2位的错排:否则,视元素k为元素1(不能放在位置1),转换为 ...

  8. Linux学习笔记之八————vim编辑器常用命令总结

    <1>从命令行模式到插入模式 i  :在光标前插入 a :在光标后插入 I  :在光标所处在的行的行首 A :在光标所处在的行的末尾 o  :在光标所处在的行的下一行 行首 O :在光标所 ...

  9. Spring Boot初识（2）- Spring Boot整合Mybaties

    一.本文介绍 首先读这篇文章之前如果没有接触过Spring Boot可以看一下之前的文章,并且读这篇文章还需要你至少能写基本的sql语句.我在写这篇文章之前也想过到底是选择JPA还是Mybaties作 ...

  10. centos适用的国内yum源：网易、搜狐

    默认的yum源是centos官网的,速度慢是不用说了.所以使用yum安装东西之前需要把yum源改为国内的.参考 http://mirrors.163.com/.help/centos.html 和 h ...