四种方式实现波浪效果（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是我们经常会用到的集合类, ...
随机推荐
- Knowledge-Reserve
Knowledge-Reserve ComputerOperatingSystem 编译 静态库&动态库(Linux) 静态链接&动态链接 内存 内联函数&宏 Static&a ...
- C++_构造函数与析构函数
构造函数与析构函数 OOP第二课 1 构造函数 1.1 构造函数具有一些特殊的性质 1.2 定义构造函数的一般形式 1.3 利用构造函数创建对象 2 成员初始化表 3 缺省参数的构造函数 4 重载构造 ...
- es6 入坑笔记(一)---let,const,解构，字符串模板
let 全面取代var 大概相似于C++的定义,一个变量必须得先定义后使用,没有预编译 注意let的作用域,一个{}就是一个作用域,上述规则须在一个作用于内 坑:for(let i =0;i < ...
- 用DBCC CHECK修复SQL2000的数据库一致性问题
) set @databasename='需要修复的数据库实体的名称' exec sp_dboption @databasename, N'single', N'true' --将目标数据库置为单用户 ...
- 从零开始的Python学习Episode 15——正则表达式
正则表达式 正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现,所以使用时要导入re模块.正则表达式模式被编译成一系列的字节码 ...
- leetcode记录-字符串转整数
实现 atoi,将字符串转为整数. 该函数首先根据需要丢弃任意多的空格字符,直到找到第一个非空格字符为止.如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连续的数字组合起来,这部分字 ...
- Pytorch之Variable求导机制
自动求导机制是pytorch中非常重要的性质,免去了手动计算导数,为构建模型节省了时间.下面介绍自动求导机制的基本用法. #自动求导机制 import torch from torch.autogra ...
- The Road to learn React书籍学习笔记(第二章)
The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...
- 基于fork(),execvp()和wait()实现类linux下的bash——mybash
基于fork(),execvp()和wait()实现类linux下的bash--mybash 预备知识 fork():fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可 ...
- 《JAVA程序设计》 实验二 Java面向对象程序设计
<JAVA程序设计> 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解 ...