CSS3实现的4种水波特效

最新推荐文章于 2024-03-05 17:11:21 发布

左手喵子

最新推荐文章于 2024-03-05 17:11:21 发布

阅读量378

点赞数 6

分类专栏： CSS 文章标签： css3 前端 java

本文链接：https://blog.csdn.net/weixin_42017221/article/details/136094939

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

（一）第一种方法

（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样式

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;
		}

（二）第二种方法

（1）HTML结构

	<div class="circle">
	    <div class="c1"></div>
	    <div class="c2"></div>
	    <div class="c3"></div>
	</div>

（2）CSS样式

 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
							            }
							        }

（三）第三种方法

（1）HTML结构

	<div class="container">
	  <div class="dot"></div>
	  <div class="wave"></div>
	</div>

（2）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;
	    }
	  }

（四）第四种方法

（1）HTML结构

	<div class="example">
	  <div class="dot"></div>
	</div>

（2）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;
		     }
		   }