四种方式实现波浪效果（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是我们经常会用到的集合类, ...
随机推荐
- 使用XWAF框架（5）——XML解析器：CXDP
XWAF推出了自己的组合式XML文档解析器,英文名叫:“CXDP”,是“Combined XML Document Parser”的缩写.核心代码属XWAF原创,注释.日志和帮助文档采用全中文描述,特 ...
- 【原创】如何使用Jmockit进行单元测试
如何使用jmockit进行单元测试 1. Jmockit简介 JMockit 是用以帮助开发人员编写测试程序的一组工具和API,它完全基于 Java 5 SE 的 java.lang.instrume ...
- ABP 开发（一）
rh 最近搞Angular ,使用Abp+Angular建项目,遇到部分问题,记录一下,以备查: 一.Abp官网: https://aspnetboilerplate.com/ 点Get starte ...
- iOS双滑块选择器
iOS双滑块选择器 <SDRangeSliderView> https://github.com/qddnovo/SDRangeSliderView 实现了通用性和便利性 今天是个好日子
- CSDN强制登录的解决办法
这个网站的吃相越来越恶心,最近使用发现他竟然强制登录了,这样的网站我是不可能登录的,要一大堆身份信息,但是,某些时候有需要看一些别人的文章怎么办呢, 似乎节操与便利必须选一个,还好CSDN这样的网 ...
- laravel artisan 命令列表
5.4版本新增 命令 说明 备注 php artisan make:resource ? 创建api返回格式化资源 >=5.4版本可用 php artisan make:rule ? 创建val ...
- python 3下对stm32串口数据做解析
1.最近有个想做一个传感器数据实时显示的上位机,常规的数据打印太频繁了,无法直观的看出数据的变化. python下的上位机实现起来简单一点,网上找了一些python界面Tkinter相关资料和pyth ...
- Winform程序拖拽文件到窗体
1:首先需要将接收拖拽的窗体属性AllowDrop设置为True. 2:编写窗体拖拽进入(DragEnter)和拖拽完成(DragDrop)事件. private void FrmCode_DragE ...
- 20155327李百乾 Exp3 免杀原理与实践
20155327李百乾 Exp3 免杀原理与实践 实践guocheng 一.Msfvenom使用编码器 1.利用(virustota)[https://www.virustotal.com/]检测实验 ...
- Caliburn.Micro - Getting Started - Introduction
Caliburn.Micro Xaml made easy Introduction When my “Build Your Own MVVM Framework” talk was chosen f ...