• 【css3动画】圆波扩散效果

    实例一：由实心圆点向四周扩散（有阴影）

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3动画圆波扩散效果</title>
<style>
@keyframes warn {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.3;
}

75% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.5;
}

100% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0.0;
}
}

@keyframes warn1 {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.3;
}

75% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.5;
}

100% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.0;
}
}

.container {
position: relative;
width: 120px;
height: 120px;
left: 10px;
top: 10px;
}
/* 保持大小不变的小圆点 */
.dot {
position: absolute;
width: 7px;
height: 7px;
left: 134px;
top: 134px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #33ccff;
border-radius: 50%; 
background-color:#33ccff; /* 实心圆 ，如果没有这个就是一个小圆圈 */
z-index: 2;
}
/* 产生动画（向外扩散变大）的圆圈 第一个圆 */
.pulse {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */
}
/* 产生动画（向外扩散变大）的圆圈 第二个圆 */
.pulse1 {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 2s ease-out;
-moz-animation: warn1 2s ease-out;
animation: warn1 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */
}
</style>
</head>

<body>
由实心圆点向四周扩散（有阴影）
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
<div class="pulse1"></div>
</div>
</body>
</html>

    css3动画圆波扩散效果

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3动画圆波扩散效果</title>
<style>
@keyframes warn {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.3;
}

75% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.5;
}

100% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0.0;
}
}

@keyframes warn1 {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.3;
}

75% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.5;
}

100% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.0;
}
}

.container {
position: relative;
width: 120px;
height: 120px;
left: 10px;
top: 10px;
}
/* 保持大小不变的小圆点 */
.dot {
position: absolute;
width: 7px;
height: 7px;
left: 134px;
top: 134px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #33ccff;
border-radius: 50%; 
background-color:#33ccff; /* 实心圆 ，如果没有这个就是一个小圆圈 */
z-index: 2;
}
/* 产生动画（向外扩散变大）的圆圈 第一个圆 */
.pulse {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* 产生动画（向外扩散变大）的圆圈 第二个圆 */
.pulse1 {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 2s ease-out;
-moz-animation: warn1 2s ease-out;
animation: warn1 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
</style>
</head>

<body>
由实心圆点向四周扩散（无阴影）
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
<div class="pulse1"></div>
</div>
</body>
</html>

    css3动画圆波扩散效果

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3动画圆波扩散效果</title>
<style>
@keyframes warn {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.3;
}

75% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.5;
}

100% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0.0;
}
}

@keyframes warn1 {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.3;
}

75% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.5;
}

100% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.0;
}
}

.container {
position: relative;
width: 120px;
height: 120px;
left: 10px;
top: 10px;
}
/* 保持大小不变的小圆圈 */
.dot {
position: absolute;
width: 7px;
height: 7px;
left: 134px;
top: 134px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #33ccff;
border-radius: 50%; 
z-index: 2;
}
/* 产生动画（向外扩散变大）的圆圈 第一个圆 */
.pulse {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */
}
/* 产生动画（向外扩散变大）的圆圈 第二个圆 */
.pulse1 {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 2s ease-out;
-moz-animation: warn1 2s ease-out;
animation: warn1 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */
}
</style>
</head>

<body>
由空心圆圈向四周扩散（有阴影）
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
<div class="pulse1"></div>
</div>
</body>
</html>

    css3动画圆波扩散效果

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3动画圆波扩散效果</title>
<style>
@keyframes warn {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.3;
}

75% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.5;
}

100% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0.0;
}
}

@keyframes warn1 {
0% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.0;
}

25% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.1;
}

50% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
opacity: 0.3;
}

75% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.5;
}

100% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.0;
}
}

.container {
position: relative;
width: 120px;
height: 120px;
left: 10px;
top: 10px;
}
/* 保持大小不变的小圆圈 */
.dot {
position: absolute;
width: 7px;
height: 7px;
left: 134px;
top: 134px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #33ccff;
border-radius: 50%; 
z-index: 2;
}
/* 产生动画（向外扩散变大）的圆圈 第一个圆 */
.pulse {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* 产生动画（向外扩散变大）的圆圈 第二个圆 */
.pulse1 {
position: absolute;
width: 35px;
height: 35px;
left: 120px;
top: 120px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn1 2s ease-out;
-moz-animation: warn1 2s ease-out;
animation: warn1 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
</style>
</head>

<body>
由空心圆圈向四周扩散（无阴影）
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
<div class="pulse1"></div>
</div>
</body>
</html>
  • 相关阅读:
    TCP之“3次握手，4次挥手”问题——实例分析
    TCP之“3次握手，4次挥手”问题
    IO
    select用法&原理详解（源码剖析）（转）
    select()，fd_set()，fd_isset()
    AF_INET与套接字SOCKET
    Socket 编程简介
    Spring 事务控制
    Spring-Profile详解
    Spring的常用使用场景
  • 原文地址：https://www.cnblogs.com/wsir/p/9055798.html
Copyright © 2020-2023  润新知