四种方式实现波浪效果（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是我们经常会用到的集合类, ...
随机推荐
- 三、Shiro授权开发
Shiro 支持三种方式的授权: I. 编程式:通过写if/else 授权代码块完成: Subject subject =SecurityUtils.getSubject(); if(subject. ...
- 升级MAC OS到10.13, 10.14系统后UNITY工程无法加载资源的解决办法
升级MAC OS到10.13, 10.14系统后,出现UNITY工程无法加载资源的情况: Unity项目中Asset目录显示为空! 解决办法一: 打开Launchpad中的磁盘工具 (也就是实用工具下 ...
- CH4402 小Z的袜子（莫队）
描述 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命-- 具体来说,小Z把这N只袜子从1到N编号, ...
- js判断两个日期是否相等的方法
今天优化代码的时候,发现一个问题,js比较日期是否相等时,我用==去比较,发现两个时间不相等但是运行结果却是true,然后去百度了下发现oldStartTime, startTime都是对象,类型为引 ...
- Java使用POI导出excel（下）——实例与小技巧
[更新]:thinkgem的导出工具类: /** * Copyright © 2012-2016 <a href="https://github.com/thinkgem/jeesit ...
- 20155213 实验三《敏捷开发与XP实践》实验报告
20155213 实验三<敏捷开发与XP实践>实验报告 实验内容 XP基础 XP核心实践 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)> ...
- linux编程实现pwd命令
linux编程实现pwd命令 在linux中,一切皆文件.目录其实也是一种文件,只不过这种文件比较特殊,它里面存储的是一张对应表,即文件名和i节点的对应关系表,而i节点才是记录此文件详细信息的结构,如 ...
- 20155306 实验二 Java面向对象程序设计
20155306 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验要 ...
- 20155306 2006-2007-2 《Java程序设计》第2周学习总结
20155306 2006-2007-2 <Java程序设计>第2周学习总结 教材学习内容总结 第三章 基础语法: java中,基本类型:布尔(boolean):boolean类型分为tr ...
- BZOJ1010_玩具装箱toy_KEY
题目传送门 这道题可以很快想到暴力DP的做法: f[i]=min(f[i],f[j]+(C[i]-C[j]+i-j--L)^); 但是数据范围有50000,这就需要用斜率优化了. 我们设S[i]=C[ ...