正文 

当前位置： 首页 > java > java框架

四种方式实现波浪效果（css效果）

苍青浪      2022-02-14     446

关键词：

一）第一种方法

（1）HTML结构

1 <body> 
2    <div class="animate wave">
3     <div class="w1"></div>
4     <div class="w2"></div>
5     <div class="w3"></div>
6     <div class="w4"></div>
7    </div>
8 </body>

（2）CSS样式

 1 <style type="text/css">
 2     html{
 3         font-size: 20px;
 4     }
 5       body{
 6           background:#444;
 7       }
 8     @-webkit-keyframes opac{
 9         from {
10             opacity: 1;
11             width:0;
12             height:0;
13             top:50%;
14             left:50%;
15         }
16         to {
17             opacity : 0;
18             width:100%;
19             height:100%;
20             top:0;
21             left:0;
22         }
23     }
24     .animate .w2{
25         -webkit-animation-delay:1s;
26     }
27     .animate .w3{
28         -webkit-animation-delay:2s;
29     }
30     .animate .w4{
31         -webkit-animation-delay:3s;
32     }
33     .wave{
34         width: 22.7rem;
35         height: 22.7rem;
36         position: absolute;
37         top: 0;
38         left: 0;
39         right: 0;
40         margin: 0 auto;
41     }
42     .wave *{
43         border:1px solid #fff;
44         position:absolute;
45         border-radius:50%;
46         -webkit-animation:opac 4s infinite;
47     }
48     </style>

（二）第二种方法

     （1）HTML结构

1 <body>
2 <div class="circle">
3     <div class="c1"></div>
4     <div class="c2"></div>
5     <div class="c3"></div>
6 </div>
7 </body>

  （2）CSS样式

 1  <style>
 2         body{
 3             background:gold;
 4         }
 5  
 6         .circle {
 7             position:absolute;
 8             left:0;
 9             top:0;
10             right: 0;
11             margin: 0 auto;
12             width:90px;
13             height:90px
14  
15         }
16         .circle div {
17             position:absolute;
18             top:50%;
19             left:50%;
20             background:#fff;
21             width:90px;
22             height:90px;
23             margin-left:-45px;
24             margin-top:-45px;
25             opacity:1;
26             border-radius:90px;
27             animation: 1.2s linear infinite;
28             -webkit-animation: 1.2s linear infinite;
29             -ms--webkit-animation: 1.2s linear infinite;
30             -moz--webkit-animation: 1.2s linear infinite;
31             -o--webkit-animation: 1.2s linear infinite;
 1  
 2            /* 此部分是上面动画的分开表示方法，推荐使用简写的方式-webkit-animation-duration:1.2s;
 3             -webkit-animation-timing-function:linear;
 4             -webkit-animation-iteration-count:infinite;
 5             -ms-animation-duration:1.2s;
 6             -ms-animation-timing-function:linear;
 7             -ms-animation-iteration-count:infinite;
 8             -moz-animation-duration:1.2s;
 9             -moz-animation-timing-function:linear;
10             -moz-animation-iteration-count:infinite;
11             -o-animation-duration:1.2s;
12             -o-animation-timing-function:linear;
13             -o-animation-iteration-count:infinite;
14             animation-duration:1.2s;
15             animation-timing-function:linear;
16             animation-iteration-count:infinite;*/
  1  
  2         }
  3         .circle div.c1 {
  4             width:20px;
  5             height:20px;
  6             margin-left:-10px;
  7             margin-top:-10px;
  8             opacity:1;
  9             border-radius:90px
 10         }
 11         .circle div.c2 {
 12             -webkit-animation-name:c2;
 13             -webkit-animation-delay:.6s;
 14             -ms-animation-name:c2;
 15             -ms-animation-delay:.6s;
 16             -moz-animation-name:c2;
 17             -moz-animation-delay:.6s;
 18             -o-animation-name:c2;
 19             -o-animation-delay:.6s;
 20             animation-name:c2;  
 21             animation-delay:.6s; 
 22         }
 23         .circle div.c3 {
 24             -webkit-animation-name:c2;
 25             -webkit-animation-delay:1.2s;
 26             -ms-animation-name:c2;
 27             -ms-animation-delay:1.2s;
 28             -moz-animation-name:c2;
 29             -moz-animation-delay:1.2s;
 30             -o-animation-name:c2;
 31             -o-animation-delay:1.2s;
 32             animation-name:c2; 
 33             animation-delay:1.2s;
 34         }
 35         @-webkit-keyframes c2 {
 36             0% {
 37                 -webkit-transform:scale(.222);
 38                 -ms-transform:scale(.222);
 39                 -moz-transform:scale(.222);
 40                 -o-transform:scale(.222);
 41                 transform:scale(.222);
 42                 opacity:1
 43             }
 44             50% {
 45                 -webkit-transform:scale(.622);
 46                 -ms-transform:scale(.622);
 47                 -moz-transform:scale(.622);
 48                 -o-transform:scale(.622);
 49                 transform:scale(.622);
 50                 opacity:.4
 51             }
 52             98% {
 53                 -webkit-transform:scale(1);
 54                 -ms-transform:scale(1);
 55                 -moz-transform:scale(1);
 56                 -o-transform:scale(1);
 57                 transform:scale(1);
 58                 opacity:.2
 59             }
 60             100% {
 61                 opacity:0
 62             }
 63         }
 64         @-ms-keyframes c2 {
 65             0% {
 66                 -webkit-transform:scale(.222);
 67                 -ms-transform:scale(.222);
 68                 -moz-transform:scale(.222);
 69                 -o-transform:scale(.222);
 70                 transform:scale(.222);
 71                 opacity:1
 72             }
 73             50% {
 74                 -webkit-transform:scale(.622);
 75                 -ms-transform:scale(.622);
 76                 -moz-transform:scale(.622);
 77                 -o-transform:scale(.622);
 78                 transform:scale(.622);
 79                 opacity:.4
 80             }
 81             98% {
 82                 -webkit-transform:scale(1);
 83                 -ms-transform:scale(1);
 84                 -moz-transform:scale(1);
 85                 -o-transform:scale(1);
 86                 transform:scale(1);
 87                 opacity:.2
 88             }
 89             100% {
 90                 opacity:0
 91             }
 92         }
 93         @-moz-keyframes c2 {
 94             0% {
 95                 -webkit-transform:scale(.222);
 96                 -ms-transform:scale(.222);
 97                 -moz-transform:scale(.222);
 98                 -o-transform:scale(.222);
 99                 transform:scale(.222);
100                 opacity:1
101             }
102             50% {
103                 -webkit-transform:scale(.622);
104                 -ms-transform:scale(.622);
105                 -moz-transform:scale(.622);
106                 -o-transform:scale(.622);
107                 transform:scale(.622);
108                 opacity:.4
109             }
110             98% {
111                 -webkit-transform:scale(1);
112                 -ms-transform:scale(1);
113                 -moz-transform:scale(1);
114                 -o-transform:scale(1);
115                 transform:scale(1);
116                 opacity:.2
117             }
118             100% {
119                 opacity:0
120             }
121         }
122         @-o-keyframes c2 {
123             0% {
124                 -webkit-transform:scale(.222);
125                 -ms-transform:scale(.222);
126                 -moz-transform:scale(.222);
127                 -o-transform:scale(.222);
128                 transform:scale(.222);
129                 opacity:1
130             }
131             50% {
132                 -webkit-transform:scale(.622);
133                 -ms-transform:scale(.622);
134                 -moz-transform:scale(.622);
135                 -o-transform:scale(.622);
136                 transform:scale(.622);
137                 opacity:.4
138             }
139             98% {
140                 -webkit-transform:scale(1);
141                 -ms-transform:scale(1);
142                 -moz-transform:scale(1);
143                 -o-transform:scale(1);
144                 transform:scale(1);
145                 opacity:.2
146             }
147             100% {
148                 opacity:0
149             }
150         }
151         @keyframes c2 {
152             0% {
153                 -webkit-transform:scale(.222);
154                 -ms-transform:scale(.222);
155                 -moz-transform:scale(.222);
156                 -o-transform:scale(.222);
157                 transform:scale(.222);
158                 opacity:1
159             }
160             50% {
161                 -webkit-transform:scale(.622);
162                 -ms-transform:scale(.622);
163                 -moz-transform:scale(.622);
164                 -o-transform:scale(.622);
165                 transform:scale(.622);
166                 opacity:.4
167             }
168             98% {
169                 -webkit-transform:scale(1);
170                 -ms-transform:scale(1);
171                 -moz-transform:scale(1);
172                 -o-transform:scale(1);
173                 transform:scale(1);
174                 opacity:.2
175             }
176             100% {
177                 opacity:0
178             }
179         }
180     </style>

（三）第三种方法

　　（1）HTML结构

1 <body>
2 <div class="container">
3   <div class="dot"></div>
4   <div class="wave"></div>
5 </div>
6 </body>

　　（2）CSS样式

 1 <style type="text/css">
 2   .container{
 3     position: relative;
 4     width: 100px;
 5     height: 100px;
 6     margin: 0 auto;
 7   }
 8   .dot{
 9     position: absolute;
10     left: 15px;
11     top:15px;
12     width:6px;
13     height: 6px;
14     border-radius: 50%;
15   }
16   .wave{
17     position: absolute;
18     left: 2px;
19     top: 2px;
20     width: 24px;
21     height: 24px;
22     border: 6px solid red;
23     border-radius: 50%; 
24     opacity: 0;
25     animation: waveCircle 3s ease-out;
26     animation-iteration-count: infinite;
27   }
28   @-webkit-keyframes waveCircle {
29     0%{
30       transform: scale(0);
31       opacity: 0;
32     }
33     10%{
34       transform: scale(0.1);
35       opacity: 0.1;
36     }
37     20%{
38       transform: scale(0.2);
39       opacity: 0.2;
40     }
41     30%{
42       transform: scale(0.3);
43       opacity: 0.3;
44     }
45     75%{
46       transform: scale(0.6);
47       opacity: 0.5;
48     }
49     100%{
50       transform: scale(1);
51       opacity: 0;
52     }
53   }
54   </style>

（四）第四种方法

　　（1）HTML结构

1 <body>
2 <div class="example">
3   <div class="dot"></div>
4 </div>
5 </body>

　　（2）CSS样式

 1 <style type="text/css">
 2    .example {
 3     position:relative;
 4     margin:150px auto;
 5     width:50px;
 6     height:50px;
 7     }
 8   .dot:before{
 9     content:‘ ‘;
10     position: absolute;
11     z-index:2;
12     left:0;
13     top:0;
14     width:10px;
15     height:10px; 
16     background-color: #ff4200;
17     border-radius: 50%;
18   }
19  
20   .dot:after {
21     content:‘ ‘;
22     position: absolute;
23     z-index:1;
24     width:10px;
25     height:10px; 
26     background-color: #ff4200;
27     border-radius: 50%;
28     box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
29     -webkit-animation: waveCircle 1s ease infinite normal ;
 1  
 2     /*-webkit-animation-name: ripple;
 3     -webkit-animation-duration: 1s;
 4     -webkit-animation-timing-function: ease; 
 5     -webkit-animation-delay: 0s;
 6     -webkit-animation-iteration-count: infinite;
 7     -webkit-animation-direction: normal;*/
 8   }
 9  
10   @keyframes waveCircle {
11      0% {
12       left:5px;
13       top:5px;
14       width:0;
15       height:0;
16     }
17     100% {
18       left:-20px;
19       top:-20px;
20       opacity: 0;
21       width:50px;
22       height:50px;
23     }
24   }
25     </style>

 

纯css实现四种方式文本反差色效果(代码片段)

如上图所示，文字随着界面的交互变化会修改文字的颜色形成反差色，让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果，这样的效果肯定见过不少，在一些比较注重设计的网站都有类似的交互效果出现。本... 查看详情

使用纯css实现波浪效果

有时候我们需要实现水晃动的效果，其实我们可以通过css旋转动画和圆角来实现。首先来2个div,外层div相对定位，内层div绝对定位，内层div大致位于外层div上半部分。外层div设置一个颜色较深的背景色（水的颜色）;内层div颜色设... 查看详情

css3实现的线条波浪动画效果(代码片段)

阅读目录阐述HTML结构CSS样式预览阐述这是一款使用CSS3animation动画和png图片制作的css3线条波浪动画效果。该特效中，使用了3张波浪线条的png图片，以及少量的CSS代码，制作出逼真的线条波浪动画效果。HTML结构该css3线... 查看详情

css3实现的线条波浪动画效果(代码片段)

阅读目录阐述HTML结构CSS样式预览阐述这是一款使用CSS3animation动画和png图片制作的css3线条波浪动画效果。该特效中，使用了3张波浪线条的png图片，以及少量的CSS代码，制作出逼真的线条波浪动画效果。HTML结构该css3线... 查看详情

css3实现悬停波浪效果

<ahref=""class="a1">商家入口</a>.a1{ 　　background-color:orange; 　　display:inline-block; 　　width:100px; 　　height:35px; 　　text-align:center; 　　text-decoration:none; 　　//设置好元素的定位和边界 　　overflow:hi 查看详情

css实现四种loading动画效果

　　四种loading加载效果：<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>四种加载效果</title><style>/*第一种*/.demo1{width:4px;height:4px;border-radius:2px;backg 查看详情

css3动画：波浪效果

实现效果如图所示：首先得准备三张图，一张是浅黄色的背景图loading_bg.png，一张是深红色的图loading.png，最后一张为bolang.png。css代码body{background:#ffe894;}.loading_bg{width:113px;height:111px;background:url(loading_bg.png)no-repeatlefttop;margin: 查看详情

jetpackcompose实现波浪加载效果(代码片段)

最近用Compose实现了一个波浪效果的进度加载，如上图所示。API在设计上符合Compose的编码风格，使用非常简便。1.使用方式在root的build.gradle中引入jitpack，allprojects repositories ... mavenurl'https://jitpack.io' 在modu 查看详情

css3波纹特效h5实现动态波浪

css3实现动态波纹特效，由于css3里面有过渡和动画效果，现在利用css3实现动态波浪效果就很简单了，直接使用transform来实现就ok，使得translateX产生偏移就可以不断实现循环动态效果，这样就比传统的flash来实现更为简单。而且对... 查看详情

wpf实现波浪浮动效果

原文:WPF实现波浪浮动效果 目标：实现界面图标Load时，整体图标出现上下波浪浮动效果，如下图：前台代码：<Windowxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmln 查看详情

svg实现波浪效果(代码片段)

SVG实现波浪效果svgpath：C贝塞尔曲线绘制波浪形状  　　　 A绘制圆弧形svganimate：制作波浪动画，为了波浪动画效果自然，设置values关键点 　　　　　　　　　　　attributeName：变化属性名　　　　　　dur：动画时... 查看详情

h5牛牛棋牌大厅搭建图文教程

css3实现动态波纹特效，由于css3里面有过渡和动画效果，现在利用css3实现动态波浪效果就很简单了，直接使用transform来实现就ok，使得translateX产生偏移就可以不断实现循环动态效果，这样就比传统的flash来实现更为简单。而且对... 查看详情

css实现大波浪(代码片段)

前言：简单的一段代码实现大波浪的效果，用css让html躁动起来。构建波浪主体<svgclass="wave-container"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"viewBo 查看详情

unityshader实现水效果（折射，反射，波浪，1.菲尼尔，深度颜色）

   整个实现过程，包括水面的UV流动，折射，反射，根据深度进行透明值处理等等  查看详情

android——贝塞尔曲线的水波浪效果实现

使用贝塞尔曲线实现的水波浪效果，在很多杀毒软件的进度条显示中都有应用：这个效果呢以前在有一个项目中需要实现过，当时是使用的正弦曲线做的效果，不过后来发现贝塞尔曲线也可以做出相同的效果，... 查看详情

三种方式实现下拉菜单效果

 使用3种方式实现下拉菜单效果：html/css、js方法实现下拉菜单显示隐藏、jquery方法实现下拉菜单显示隐藏先看效果图第一种：html/css方式实现<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>下拉菜单的实现<... 查看详情

安卓按键响应四种方式(代码片段)

目录标题一、按键响应方式一1.1绑定onclick函数1.2按键响应函数实现1.3效果二、按键响应方式二2.1定义监听器接口2.2绑定响应接口2.3效果三、按键响应方式三3.1定义变量Button3.2绑定局部变量Button和xml中button3.3设置按键响应3.4效果... 查看详情

h5棋牌房间如何安装现在分享一套搭建教程

css3实现动态波纹特效，由于css3里面有过渡和动画效果，现在利用css3实现动态波浪效果就很简单了，直接使用transform来实现就ok，使得translateX产生偏移就可以不断实现循环动态效果，这样就比传统的flash来实现更为简单。而且对... 查看详情