代码如下：

<!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. 由百度 “PHP薪资” 引发的思考

    昨天晚上睡觉的时候百度了一下 “PHP薪资”,看到了各种各样的答案,从百度知道到知乎,再到各个论坛……答案也是从 2k-16k 不等(不过说实话,2k是吓到我了),其中一些答案说到了在中国从事某一行业 ...

  2. Android开发工程师文集-Android知识点讲解

    前言 大家好,给大家带来Android开发工程师文集-Android知识点讲解的概述,希望你们喜欢 WebView讲解 一般通过Intent调用系统的浏览器: Uri uri = Uri.parse( ...

  3. [CocoaPods]CocoaPods安装详解

    安装CocoaPods之前先安装ruby: 1.安装ruby ruby官网rubygems.org已被屏蔽,替换当前镜像是否为国内镜像. $gem sources --add https://gems ...

  4. [CocoaPods]如何使用CocoaPods插件

    CocoaPods +插件 CocoaPods是一个由极少数维护者运营的社区项目,需要维护大量的表面区域.可以肯定地说CocoaPods永远不会支持Xcode支持的每个功能,即使这样,团队也必须对许多 ...

  5. Shell-10--if

  6. git简易使用

    git的安装以及GitHub的注册这里就不说了,这里直接从上传开始. 1. 登录github进入settings 2. 添加SSH KEY,添加方式查看第3步 3. 由于本地Git仓库和Github仓 ...

  7. day 75vue 脚手架学习 脚手架的使用

    前情提要: vue 自定化开发工具  (vue-cli的使用) 一:安装脚手架,以及准备 1: 下载地址, https://nodejs.org/en/download/ 2:如果下载成功,在cmd ...

  8. 2 jquery选择器

    一基本选择器 #id .class  elment  *  select1, select2, select3... 例 $("span, #two").css("bac ...

  9. HTML 滚动条样式修改

    <style> .innerbox{ overflow-y: auto; background-color: #f8f8f8; height: 200px; padding: 10px; ...

  10. 在mpvue中使用map如何避坑

    最近在做一个需求,当用户放大地图到某个级别时,自动显示marker的callout标签,当小于这个缩放级别时,则隐藏callout.然而在我实现的过程中,却发现一个严重的问题:当我操作marker数据 ...