四种方式实现波浪效果（CSS效果）
一）第一种方法
（1）HTML结构
<body>
<div class="animate wave">
<div class="w1"></div>
<div class="w2"></div>
<div class="w3"></div>
<div class="w4"></div>
</div>
</body>
（2）CSS样式
<style type="text/css">
html{
font-size: 20px;
}
body{
background:#444;
}
@-webkit-keyframes opac{
from {
opacity: 1;
width:0;
height:0;
top:50%;
left:50%;
}
to {
opacity : 0;
width:100%;
height:100%;
top:0;
left:0;
}
}
.animate .w2{
-webkit-animation-delay:1s;
}
.animate .w3{
-webkit-animation-delay:2s;
}
.animate .w4{
-webkit-animation-delay:3s;
}
.wave{
width: 22.7rem;
height: 22.7rem;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
.wave *{
border:1px solid #fff;
position:absolute;
border-radius:50%;
-webkit-animation:opac 4s infinite;
}
</style>
（二）第二种方法
（1）HTML结构
<body>
<div class="circle">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
</body>
（2）CSS样式
<style>
body{
background:gold;
} .circle {
position:absolute;
left:0;
top:0;
right: 0;
margin: 0 auto;
width:90px;
height:90px }
.circle div {
position:absolute;
top:50%;
left:50%;
background:#fff;
width:90px;
height:90px;
margin-left:-45px;
margin-top:-45px;
opacity:1;
border-radius:90px;
animation: 1.2s linear infinite;
-webkit-animation: 1.2s linear infinite;
-ms--webkit-animation: 1.2s linear infinite;
-moz--webkit-animation: 1.2s linear infinite;
-o--webkit-animation: 1.2s linear infinite;
/* 此部分是上面动画的分开表示方法，推荐使用简写的方式-webkit-animation-duration:1.2s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-ms-animation-duration:1.2s;
-ms-animation-timing-function:linear;
-ms-animation-iteration-count:infinite;
-moz-animation-duration:1.2s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-o-animation-duration:1.2s;
-o-animation-timing-function:linear;
-o-animation-iteration-count:infinite;
animation-duration:1.2s;
animation-timing-function:linear;
animation-iteration-count:infinite;*/
}
.circle div.c1 {
width:20px;
height:20px;
margin-left:-10px;
margin-top:-10px;
opacity:1;
border-radius:90px
}
.circle div.c2 {
-webkit-animation-name:c2;
-webkit-animation-delay:.6s;
-ms-animation-name:c2;
-ms-animation-delay:.6s;
-moz-animation-name:c2;
-moz-animation-delay:.6s;
-o-animation-name:c2;
-o-animation-delay:.6s;
animation-name:c2;
animation-delay:.6s;
}
.circle div.c3 {
-webkit-animation-name:c2;
-webkit-animation-delay:1.2s;
-ms-animation-name:c2;
-ms-animation-delay:1.2s;
-moz-animation-name:c2;
-moz-animation-delay:1.2s;
-o-animation-name:c2;
-o-animation-delay:1.2s;
animation-name:c2;
animation-delay:1.2s;
}
@-webkit-keyframes c2 {
0% {
-webkit-transform:scale(.222);
-ms-transform:scale(.222);
-moz-transform:scale(.222);
-o-transform:scale(.222);
transform:scale(.222);
opacity:1
}
50% {
-webkit-transform:scale(.622);
-ms-transform:scale(.622);
-moz-transform:scale(.622);
-o-transform:scale(.622);
transform:scale(.622);
opacity:.4
}
98% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
opacity:.2
}
100% {
opacity:0
}
}
@-ms-keyframes c2 {
0% {
-webkit-transform:scale(.222);
-ms-transform:scale(.222);
-moz-transform:scale(.222);
-o-transform:scale(.222);
transform:scale(.222);
opacity:1
}
50% {
-webkit-transform:scale(.622);
-ms-transform:scale(.622);
-moz-transform:scale(.622);
-o-transform:scale(.622);
transform:scale(.622);
opacity:.4
}
98% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
opacity:.2
}
100% {
opacity:0
}
}
@-moz-keyframes c2 {
0% {
-webkit-transform:scale(.222);
-ms-transform:scale(.222);
-moz-transform:scale(.222);
-o-transform:scale(.222);
transform:scale(.222);
opacity:1
}
50% {
-webkit-transform:scale(.622);
-ms-transform:scale(.622);
-moz-transform:scale(.622);
-o-transform:scale(.622);
transform:scale(.622);
opacity:.4
}
98% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
opacity:.2
}
100% {
opacity:0
}
}
@-o-keyframes c2 {
0% {
-webkit-transform:scale(.222);
-ms-transform:scale(.222);
-moz-transform:scale(.222);
-o-transform:scale(.222);
transform:scale(.222);
opacity:1
}
50% {
-webkit-transform:scale(.622);
-ms-transform:scale(.622);
-moz-transform:scale(.622);
-o-transform:scale(.622);
transform:scale(.622);
opacity:.4
}
98% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
opacity:.2
}
100% {
opacity:0
}
}
@keyframes c2 {
0% {
-webkit-transform:scale(.222);
-ms-transform:scale(.222);
-moz-transform:scale(.222);
-o-transform:scale(.222);
transform:scale(.222);
opacity:1
}
50% {
-webkit-transform:scale(.622);
-ms-transform:scale(.622);
-moz-transform:scale(.622);
-o-transform:scale(.622);
transform:scale(.622);
opacity:.4
}
98% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
opacity:.2
}
100% {
opacity:0
}
}
</style>
（三）第三种方法
（1）HTML结构
<body>
<div class="container">
<div class="dot"></div>
<div class="wave"></div>
</div>
</body>
（2）CSS样式
<style type="text/css">
.container{
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
}
.dot{
position: absolute;
left: 15px;
top:15px;
width:6px;
height: 6px;
border-radius: 50%;
}
.wave{
position: absolute;
left: 2px;
top: 2px;
width: 24px;
height: 24px;
border: 6px solid red;
border-radius: 50%;
opacity: 0;
animation: waveCircle 3s ease-out;
animation-iteration-count: infinite;
}
@-webkit-keyframes waveCircle {
0%{
transform: scale(0);
opacity: 0;
}
10%{
transform: scale(0.1);
opacity: 0.1;
}
20%{
transform: scale(0.2);
opacity: 0.2;
}
30%{
transform: scale(0.3);
opacity: 0.3;
}
75%{
transform: scale(0.6);
opacity: 0.5;
}
100%{
transform: scale(1);
opacity: 0;
}
}
</style>
（四）第四种方法
（1）HTML结构
<body>
<div class="example">
<div class="dot"></div>
</div>
</body>
（2）CSS样式
<style type="text/css">
.example {
position:relative;
margin:150px auto;
width:50px;
height:50px;
}
.dot:before{
content:' ';
position: absolute;
z-index:2;
left:0;
top:0;
width:10px;
height:10px;
background-color: #ff4200;
border-radius: 50%;
} .dot:after {
content:' ';
position: absolute;
z-index:1;
width:10px;
height:10px;
background-color: #ff4200;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
-webkit-animation: waveCircle 1s ease infinite normal ;
/*-webkit-animation-name: ripple;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;*/
}
@keyframes waveCircle {
0% {
left:5px;
top:5px;
width:0;
height:0;
}
100% {
left:-20px;
top:-20px;
opacity: 0;
width:50px;
height:50px;
}
}
</style>
四种方式实现波浪效果（CSS效果）的更多相关文章
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- Android 两种方式实现类似水波扩散效果
原文链接 https://mp.weixin.qq.com/s/M19tp_ShOO6esKdozi7Nlg 两种方式实现类似水波扩散效果,先上图为敬 自定义view实现 动画实现 自定义view实现 ...
- sess文件编译输出css的四种方式以及使用
sess文件输出css有下面四种方式: :nested(嵌套) :compact(紧凑) :expanded(展开) :compressed(压缩) 如何使用: sass --watch style. ...
- HTML与CSS结合的四种方式
HTML与CSS结合的四种方式: 方式一:每个标签加一个属性: 例如:<div style="background-color:red; color: green"> ...
- ASP.NET MVC之下拉框绑定四种方式（十）
前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...
- .net core 2.x - 缓存的四种方式
其实这些微软docs都有现成的,但是现在的人想对浮躁些,去看的不会太多,所以这里就再记录下 ,大家一起懒一起浮躁,呵呵. 0.基础知识 通过减少生成内容所需的工作,缓存可以显著提高应用的性能和可伸缩性 ...
- [转载]-win7启动本地MongoDB的四种方式
2016年04月07日 09:52:34 cherry__cheng 阅读数:19451 标签: win7启动本地MongoDB的四种方式快速启动本地mongodb 更多 个人分类: mongodb& ...
- Android 查看项目依赖树的四种方式
Android 查看项目依赖树的四种方式: 方式一: ./gradlew 模块名:dependencies //查看单独模块的依赖 ./gradlew :app:dependencies --conf ...
- Copy ArrayList的四种方式
目录 简介 使用构造函数 使用addAll方法 使用Collections.copy 使用stream 总结 Copy ArrayList的四种方式 简介 ArrayList是我们经常会用到的集合类, ...
随机推荐
- vue keep-alive 不生效 以及前进 后退 对数据刷新和保留缓存操作
https://blog.csdn.net/sinat_37255207/article/details/89373825 因为项目Vue router 连续嵌套了好几层 首先检查keep-alive ...
- #leetcode刷题之路16-最接近的三数之和
给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一答案. 例如,给定数 ...
- hdu Exponentiation高精度实数乘幂（用了带小数的高精度模板）
#include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...
- 【转】：ZooKeeper真不是最终一致性的，而是顺序一致性
转:ZooKeeper真不是最终一致性的,而是顺序一致性 关键字:ZooKeeper / 分布式系统的一致性 我们可以这么理解 ZooKeeper,从整体(read 操作 +write 操作)上来说是 ...
- echarts 报错问题 is null 或者未定义等问题
我们在使用echarts的时候会出现is null或者未定义等报错提示,但是却无从下手的情况. 其一,我们是完全按照echarts的官方文档来添加的js文件:其二,在对使用option时候的配置是按照 ...
- svg图标（svg实现的QQ图标）
与传统的图片相比,用svg实现的图标要更好控制. 比如.若要改变图标的颜色,如果用图片的话,就需要UI设计人员调整图片,而如果用svg的话,就不用那么麻烦,开发人员改样式就行了. 附一个svg实现的Q ...
- lnmp+coreseek实现站内全文检索(安装篇)
coreseek安装与简单实用 安装环境 系统环境 centos7.2 1核2G 软件环境 coreseek-3.2.14 lnmp1.5 安装mmseg 更新依赖包和安装编译环境 yum -y in ...
- PHP 扩展 trie-tree, swoole过滤敏感词方案
在一些app,web中评论以及一些文章会看到一些*等,除了特定的不显示外,我们会把用户输入的一些敏感字符做处理,具体显示为*还是其他字符按照业务区实现. 下面简单介绍下业务处理. 原文地址:小时刻个人 ...
- PE 学习之路 —— DOS 头、NT 头
1. 前述 可执行文件的格式是操作系统本身执行机制的反映,理解它有助于对操作系统的深刻理解,掌握可执行文件的数据结构及其一些机理,是研究软件安全的必修课.`PE(Portable Executable ...
- 浏览器窗口输入网址后发生的一段事情（http完整请求）
1.DNS查询得到IP 输入的是域名,需要进行dns解析成IP,大致流程: 如果浏览器有缓存,直接使用浏览器缓存,否则使用本机缓存,再没有的话就是用host 如果本地没有,就向dns域名服务器查询(当 ...