CSS3实现的4种水波特效

其他 2018-08-19 19:15:07 阅读次数: 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样式

<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>
注意：
  • 亲测有效，如果有误，欢迎指证。
  • 喜欢就记得顶，记得关注哟 点击打开链接，谢谢

猜你喜欢

转载自blog.csdn.net/qq_38658877/article/details/78092649
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022