CSS3实现"视频拨通中..."水波纹动画

demo1

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>水波纹效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        @-webkit-keyframes wateranimate {
            0% {
                -webkit-transform: scale(0);
                opacity: 0.5;
            }

            100% {
                -webkit-transform: scale(2);
                opacity: 0;
            }
        }

        @keyframes wateranimate {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
                opacity: 0.7;
            }

            100% {
                -webkit-transform: scale(2);
                transform: scale(2);
                opacity: 0;
            }
        }

        .container {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 0 auto;
            /* border: 1px solid yellow; */
        }

        .water1 {
            -webkit-animation: wateranimate 4s 3s ease-out infinite;
            animation: wateranimate 4s 3s ease-out infinite;
        }

        .water2 {
            -webkit-animation: wateranimate 4s 2s ease-out infinite;
            animation: wateranimate 4s 2s ease-out infinite;
        }

        .water3 {
            -webkit-animation: wateranimate 4s 1s ease-out infinite;
            animation: wateranimate 4s 1s ease-out infinite;
        }

        .water4 {
            -webkit-animation: wateranimate 4s 0s ease-out infinite;
            animation: wateranimate 4s 0s ease-out infinite;
        }

        .water1,
        .water2,
        .water3,
        .water4 {
            padding: 20%;
            position: absolute;
            left: 30%;
            top: 30%;
            border: 1px solid pink;
            box-shadow: 0 0 120px 30px green inset;
            border-radius: 100%;
            z-index: 1;
            opacity: 0;
        }

        .fontAnimate {
            margin: 0 auto;
            text-align: center;
            margin-top: 20px;
        }

        .user {
            margin: 0 auto;
            text-align: center;
        }

        .cellPhone {
            border: 2px solid #ccc;
            width: 200px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }

        dot {
            display: inline-block;
            height: 1em;
            line-height: 1;
            text-align: left;
            vertical-align: -.25em;
            overflow: hidden;
        }

        dot::before {
            display: block;
            content: '...\A..\A.';
            white-space: pre-wrap;
            animation: dot 2s infinite step-start both;
        }
        @keyframes dot {
            33% {
                transform: translateY(-2em);
            }
            66% {
                transform: translateY(-1em);
            }
        }
    </style>
</head>

<body>
    <div class="cellPhone">
        <div class="container">
            <div class="water1"></div>
            <div class="water2"></div>
            <div class="water3"></div>
        </div>
        <div class="user">张帆</div>

        <div class="fontAnimate">
            视频拨通中<dot>...</dot>
        </div>
    </div>
</body>

</html>

demo2:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS实战 - 波纹扩散效果</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg">
 
	<style type="text/css">
		body {
			margin: 0;
		}
 
        .container {  
            position: absolute;
            top: 30%;
            left: 30%;
            width: 40%;  
            height: 40%;
        } 

		.wave {
			position: relative;
		    width: 100px;
		    height: 100px;
		    text-align: center;
		    line-height: 100px;
		    font-size: 28px;
		}
 
		.wave .circle {
		    position: absolute;
		    border-radius: 50%;
		    opacity: 0;
		}
 
		/* 波纹效果 */
		.wave.ripple .circle {
		    width: calc(100% - 6px); /* 减去边框的大小 */
    		height: calc(100% - 6px);/* 减去边框的大小 */
		    border: 3px solid #fff;
		}
 
		.wave.ripple .circle:first-child {
			animation: circle-opacity 2s infinite;
		}
 
		.wave.ripple .circle:nth-child(2) {
			animation: circle-opacity 2s infinite;
			animation-delay: .3s;
		}
 
		.wave.ripple .circle:nth-child(3) {
		 	animation: circle-opacity 2s infinite;
			animation-delay: .6s;
		}
 
		.wave.ripple.danger {
		    color: red;
		}
 
		.wave.ripple.danger .circle {
			border-color: red;
		}
 
		/* 波动效果 */
		.wave.solid .circle{
			width: 100%;
    		height: 100%;
		    background: #fff;
		}
 
		.wave.solid .circle:first-child {
			animation: circle-opacity 2s infinite;
		}
 
		.wave.solid.danger {
			color: red;
		}
 
		.wave.solid.danger .circle{
			background: red;
		}
		
		@keyframes circle-opacity{
		    from {
		        opacity: 1;
		        transform: scale(0);
		    }
		    to {
		        opacity: 0;
		        transform: scale(1);
		    }
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="wave ripple danger">
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="content">
				<i class="fa fa-bell"></i>
			</div>
		</div>
	</div>
</body>
</html>

来源：CSDN

作者：星期五の夜

链接：https://blog.csdn.net/weixin_43550562/article/details/104650645

标签

css

infinite