四种方式实现波浪效果（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是我们经常会用到的集合类, ...
随机推荐
- nodejs中npm以及yarn常用指令
1.npm下载相关 1.npm install/i vue //下载vue的包 2.npm i vue --save-dev / -D //下载vue的包,并添加到开发依赖中 3.npm i //下载 ...
- vue项目获取当前地址栏参数（非路由传参）
项目中遇到一个需求,就是另一个管理系统带参直接单纯的跳转跳转到vue pc项目中的某个页面,后再初始化查询数据,参数以地址栏的形式传入 管理系统:打开新地址地址 let obj = { id: 21, ...
- MySQL学习【第十二篇事务中的锁与隔离级别】
一.事务中的锁 1.啥是锁? 顾名思义,锁就是锁定的意思 2.锁的作用是什么? 在事务ACID的过程中,‘锁’和‘隔离级别’一起来实现‘I’隔离性的作用 3.锁的种类 共享锁:保证在多事务工作期间,数 ...
- java Clob类型 转String
1.我的数据库是oracle11g 遇到取出来的字段是clob类型,但是所需要的是string类型,写一个转换函数就可以解决问题了. // Clob类型 转String public String C ...
- 请问在一个命令上加什么参数可以实现下面命令的内容在同一行输出。 echo "zhaokang";echo "zhaokang"
请问在一个命令上加什么参数可以实现下面命令的内容在同一行输出. echo "zhaokang";echo "zhaokang" [root@zhaokang t ...
- 一条SQL语句的千回百转
SQL语言相信大家都不陌生,从本质上来说,它是一种结构化查询语言,是用来数据库之间的通信的编程语言.作为一名Java程序员,我们从Java角度来看,SQL语言相当于Java接口,而数据库是实现这个接口 ...
- 我的 Delphi 学习之路 —— Delphi 的认识
标题:我的 Delphi 学习之路 -- Delphi 的认识 作者:断桥烟雨旧人伤 1. 什么是 Delphi Delphi 是 Windows 平台下著名的快速应用程序开发工具(Rapid App ...
- c#开发微信公众号——关于c#对象与xml的转换
在成为微信公众号开发者以后,整个交互流程:用户->微信服务器->自己的服务器->返回微信服务器->用户: 举个例子:用户在微信公众号里面发了个“您好!”,微信服务器会以特定的x ...
- 大数据学习：Spark是什么，如何用Spark进行数据分析
给大家分享一下Spark是什么?如何用Spark进行数据分析,对大数据感兴趣的小伙伴就随着小编一起来了解一下吧. 大数据在线学习 什么是Apache Spark? Apache Spark是一 ...
- usb驱动之打印usb设备信息（二）
以下是打印鼠标左右键及其他输入的源代码,详细说明见https://www.cnblogs.com/zhu-g5may/p/9309381.html /*参考/drivers/hid/usbhid/us ...