css从中心向外渐变

最新推荐文章于 2024-06-23 14:50:12 发布
最新推荐文章于 2024-06-23 14:50:12 发布
阅读量2.8k 收藏 1
点赞数 1
分类专栏： 从中心渐变 其他 zookeeper 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44432032/article/details/108993568
版权 
//复制代码即可，里面有circle-scale，circle-scale2，circle-scale3三种方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./jquery.js"></script>
    <title>查看更多</title>
	<style>
		@-webkit-keyframes circle-scale {
		  0% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		  10% {
		    -moz-transform: scale(0.6);
		    -ms-transform: scale(0.6);
		    -webkit-transform: scale(0.6);
		    transform: scale(0.6);
		    opacity: 0.1;
		  }
		  20% {
		    -moz-transform: scale(1.2);
		    -ms-transform: scale(1.2);
		    -webkit-transform: scale(1.2);
		    transform: scale(1.2);
		    opacity: 0.2;
		  }
		  30% {
		    -moz-transform: scale(1.8);
		    -ms-transform: scale(1.8);
		    -webkit-transform: scale(1.8);
		    transform: scale(1.8);
		    opacity: 0.3;
		  }
		  40% {
		    -moz-transform: scale(2.4);
		    -ms-transform: scale(2.4);
		    -webkit-transform: scale(2.4);
		    transform: scale(2.4);
		    opacity: 0.15;
		  }
		  50% {
		    -moz-transform: scale(3);
		    -ms-transform: scale(3);
		    -webkit-transform: scale(3);
		    transform: scale(3);
		    opacity: 0;
		  }
		  100% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		}
		@-moz-keyframes circle-scale {
		  0% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		  10% {
		    -moz-transform: scale(0.6);
		    -ms-transform: scale(0.6);
		    -webkit-transform: scale(0.6);
		    transform: scale(0.6);
		    opacity: 0.1;
		  }
		  20% {
		    -moz-transform: scale(1.2);
		    -ms-transform: scale(1.2);
		    -webkit-transform: scale(1.2);
		    transform: scale(1.2);
		    opacity: 0.2;
		  }
		  30% {
		    -moz-transform: scale(1.8);
		    -ms-transform: scale(1.8);
		    -webkit-transform: scale(1.8);
		    transform: scale(1.8);
		    opacity: 0.3;
		  }
		  40% {
		    -moz-transform: scale(2.4);
		    -ms-transform: scale(2.4);
		    -webkit-transform: scale(2.4);
		    transform: scale(2.4);
		    opacity: 0.15;
		  }
		  50% {
		    -moz-transform: scale(3);
		    -ms-transform: scale(3);
		    -webkit-transform: scale(3);
		    transform: scale(3);
		    opacity: 0;
		  }
		  100% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		}
		@-o-keyframes circle-scale {
		  0% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		  10% {
		    -moz-transform: scale(0.6);
		    -ms-transform: scale(0.6);
		    -webkit-transform: scale(0.6);
		    transform: scale(0.6);
		    opacity: 0.1;
		  }
		  20% {
		    -moz-transform: scale(1.2);
		    -ms-transform: scale(1.2);
		    -webkit-transform: scale(1.2);
		    transform: scale(1.2);
		    opacity: 0.2;
		  }
		  30% {
		    -moz-transform: scale(1.8);
		    -ms-transform: scale(1.8);
		    -webkit-transform: scale(1.8);
		    transform: scale(1.8);
		    opacity: 0.3;
		  }
		  40% {
		    -moz-transform: scale(2.4);
		    -ms-transform: scale(2.4);
		    -webkit-transform: scale(2.4);
		    transform: scale(2.4);
		    opacity: 0.15;
		  }
		  50% {
		    -moz-transform: scale(3);
		    -ms-transform: scale(3);
		    -webkit-transform: scale(3);
		    transform: scale(3);
		    opacity: 0;
		  }
		  100% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		}
		@keyframes circle-scale {
		  0% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		  10% {
		    -moz-transform: scale(0.6);
		    -ms-transform: scale(0.6);
		    -webkit-transform: scale(0.6);
		    transform: scale(0.6);
		    opacity: 0.1;
		  }
		  20% {
		    -moz-transform: scale(1.2);
		    -ms-transform: scale(1.2);
		    -webkit-transform: scale(1.2);
		    transform: scale(1.2);
		    opacity: 0.2;
		  }
		  30% {
		    -moz-transform: scale(1.8);
		    -ms-transform: scale(1.8);
		    -webkit-transform: scale(1.8);
		    transform: scale(1.8);
		    opacity: 0.3;
		  }
		  40% {
		    -moz-transform: scale(2.4);
		    -ms-transform: scale(2.4);
		    -webkit-transform: scale(2.4);
		    transform: scale(2.4);
		    opacity: 0.15;
		  }
		  50% {
		    -moz-transform: scale(3);
		    -ms-transform: scale(3);
		    -webkit-transform: scale(3);
		    transform: scale(3);
		    opacity: 0;
		  }
		  100% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		}
		@-webkit-keyframes circle-scale2 {
		  0% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		  10% {
		    -moz-transform: scale(0.7);
		    -ms-transform: scale(0.7);
		    -webkit-transform: scale(0.7);
		    transform: scale(0.7);
		    opacity: 0.1;
		  }
		  20% {
		    -moz-transform: scale(1.4);
		    -ms-transform: scale(1.4);
		    -webkit-transform: scale(1.4);
		    transform: scale(1.4);
		    opacity: 0.2;
		  }
		  30% {
		    -moz-transform: scale(2.1);
		    -ms-transform: scale(2.1);
		    -webkit-transform: scale(2.1);
		    transform: scale(2.1);
		    opacity: 0.3;
		  }
		  40% {
		    -moz-transform: scale(2.8);
		    -ms-transform: scale(2.8);
		    -webkit-transform: scale(2.8);
		    transform: scale(2.8);
		    opacity: 0.15;
		  }
		  50% {
		    -moz-transform: scale(3.5);
		    -ms-transform: scale(3.5);
		    -webkit-transform: scale(3.5);
		    transform: scale(3.5);
		    opacity: 0;
		  }
		  100% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		}
		@-moz-keyframes circle-scale2 {
		  0% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		  10% {
		    -moz-transform: scale(0.7);
		    -ms-transform: scale(0.7);
		    -webkit-transform: scale(0.7);
		    transform: scale(0.7);
		    opacity: 0.1;
		  }
		  20% {
		    -moz-transform: scale(1.4);
		    -ms-transform: scale(1.4);
		    -webkit-transform: scale(1.4);
		    transform: scale(1.4);
		    opacity: 0.2;
		  }
		  30% {
		    -moz-transform: scale(2.1);
		    -ms-transform: scale(2.1);
		    -webkit-transform: scale(2.1);
		    transform: scale(2.1);
		    opacity: 0.3;
		  }
		  40% {
		    -moz-transform: scale(2.8);
		    -ms-transform: scale(2.8);
		    -webkit-transform: scale(2.8);
		    transform: scale(2.8);
		    opacity: 0.15;
		  }
		  50% {
		    -moz-transform: scale(3.5);
		    -ms-transform: scale(3.5);
		    -webkit-transform: scale(3.5);
		    transform: scale(3.5);
		    opacity: 0;
		  }
		  100% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		}
		@-o-keyframes circle-scale2 {
		  0% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		  10% {
		    -moz-transform: scale(0.7);
		    -ms-transform: scale(0.7);
		    -webkit-transform: scale(0.7);
		    transform: scale(0.7);
		    opacity: 0.1;
		  }
		  20% {
		    -moz-transform: scale(1.4);
		    -ms-transform: scale(1.4);
		    -webkit-transform: scale(1.4);
		    transform: scale(1.4);
		    opacity: 0.2;
		  }
		  30% {
		    -moz-transform: scale(2.1);
		    -ms-transform: scale(2.1);
		    -webkit-transform: scale(2.1);
		    transform: scale(2.1);
		    opacity: 0.3;
		  }
		  40% {
		    -moz-transform: scale(2.8);
		    -ms-transform: scale(2.8);
		    -webkit-transform: scale(2.8);
		    transform: scale(2.8);
		    opacity: 0.15;
		  }
		  50% {
		    -moz-transform: scale(3.5);
		    -ms-transform: scale(3.5);
		    -webkit-transform: scale(3.5);
		    transform: scale(3.5);
		    opacity: 0;
		  }
		  100% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		}
		@keyframes circle-scale2 {
		  0% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		  10% {
		    -moz-transform: scale(0.7);
		    -ms-transform: scale(0.7);
		    -webkit-transform: scale(0.7);
		    transform: scale(0.7);
		    opacity: 0.1;
		  }
		  20% {
		    -moz-transform: scale(1.4);
		    -ms-transform: scale(1.4);
		    -webkit-transform: scale(1.4);
		    transform: scale(1.4);
		    opacity: 0.2;
		  }
		  30% {
		    -moz-transform: scale(2.1);
		    -ms-transform: scale(2.1);
		    -webkit-transform: scale(2.1);
		    transform: scale(2.1);
		    opacity: 0.3;
		  }
		  40% {
		    -moz-transform: scale(2.8);
		    -ms-transform: scale(2.8);
		    -webkit-transform: scale(2.8);
		    transform: scale(2.8);
		    opacity: 0.15;
		  }
		  50% {
		    -moz-transform: scale(3.5);
		    -ms-transform: scale(3.5);
		    -webkit-transform: scale(3.5);
		    transform: scale(3.5);
		    opacity: 0;
		  }
		  100% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		}
		@-webkit-keyframes circle-scale3 {
		  0% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		  10% {
		    -moz-transform: scale(0.8);
		    -ms-transform: scale(0.8);
		    -webkit-transform: scale(0.8);
		    transform: scale(0.8);
		    opacity: 0.1;
		  }
		  20% {
		    -moz-transform: scale(1.6);
		    -ms-transform: scale(1.6);
		    -webkit-transform: scale(1.6);
		    transform: scale(1.6);
		    opacity: 0.2;
		  }
		  30% {
		    -moz-transform: scale(2.4);
		    -ms-transform: scale(2.4);
		    -webkit-transform: scale(2.4);
		    transform: scale(2.4);
		    opacity: 0.3;
		  }
		  40% {
		    -moz-transform: scale(3.2);
		    -ms-transform: scale(3.2);
		    -webkit-transform: scale(3.2);
		    transform: scale(3.2);
		    opacity: 0.15;
		  }
		  50% {
		    -moz-transform: scale(4);
		    -ms-transform: scale(4);
		    -webkit-transform: scale(4);
		    transform: scale(4);
		    opacity: 0;
		  }
		  100% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		}
		@-moz-keyframes circle-scale3 {
		  0% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		  10% {
		    -moz-transform: scale(0.8);
		    -ms-transform: scale(0.8);
		    -webkit-transform: scale(0.8);
		    transform: scale(0.8);
		    opacity: 0.1;
		  }
		  20% {
		    -moz-transform: scale(1.6);
		    -ms-transform: scale(1.6);
		    -webkit-transform: scale(1.6);
		    transform: scale(1.6);
		    opacity: 0.2;
		  }
		  30% {
		    -moz-transform: scale(2.4);
		    -ms-transform: scale(2.4);
		    -webkit-transform: scale(2.4);
		    transform: scale(2.4);
		    opacity: 0.3;
		  }
		  40% {
		    -moz-transform: scale(3.2);
		    -ms-transform: scale(3.2);
		    -webkit-transform: scale(3.2);
		    transform: scale(3.2);
		    opacity: 0.15;
		  }
		  50% {
		    -moz-transform: scale(4);
		    -ms-transform: scale(4);
		    -webkit-transform: scale(4);
		    transform: scale(4);
		    opacity: 0;
		  }
		  100% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		}
		@-o-keyframes circle-scale3 {
		  0% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		  10% {
		    -moz-transform: scale(0.8);
		    -ms-transform: scale(0.8);
		    -webkit-transform: scale(0.8);
		    transform: scale(0.8);
		    opacity: 0.1;
		  }
		  20% {
		    -moz-transform: scale(1.6);
		    -ms-transform: scale(1.6);
		    -webkit-transform: scale(1.6);
		    transform: scale(1.6);
		    opacity: 0.2;
		  }
		  30% {
		    -moz-transform: scale(2.4);
		    -ms-transform: scale(2.4);
		    -webkit-transform: scale(2.4);
		    transform: scale(2.4);
		    opacity: 0.3;
		  }
		  40% {
		    -moz-transform: scale(3.2);
		    -ms-transform: scale(3.2);
		    -webkit-transform: scale(3.2);
		    transform: scale(3.2);
		    opacity: 0.15;
		  }
		  50% {
		    -moz-transform: scale(4);
		    -ms-transform: scale(4);
		    -webkit-transform: scale(4);
		    transform: scale(4);
		    opacity: 0;
		  }
		  100% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		}
		@keyframes circle-scale3 {
		  0% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		  10% {
		    -moz-transform: scale(0.8);
		    -ms-transform: scale(0.8);
		    -webkit-transform: scale(0.8);
		    transform: scale(0.8);
		    opacity: 0.1;
		  }
		  20% {
		    -moz-transform: scale(1.6);
		    -ms-transform: scale(1.6);
		    -webkit-transform: scale(1.6);
		    transform: scale(1.6);
		    opacity: 0.2;
		  }
		  30% {
		    -moz-transform: scale(2.4);
		    -ms-transform: scale(2.4);
		    -webkit-transform: scale(2.4);
		    transform: scale(2.4);
		    opacity: 0.3;
		  }
		  40% {
		    -moz-transform: scale(3.2);
		    -ms-transform: scale(3.2);
		    -webkit-transform: scale(3.2);
		    transform: scale(3.2);
		    opacity: 0.15;
		  }
		  50% {
		    -moz-transform: scale(4);
		    -ms-transform: scale(4);
		    -webkit-transform: scale(4);
		    transform: scale(4);
		    opacity: 0;
		  }
		  100% {
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    opacity: 0;
		  }
		}
		.sss{
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -15px;
			margin-left: -15px;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
			opacity: 0.3;
			-moz-transform: scale(0);
			-ms-transform: scale(0);
			-webkit-transform: scale(0);
			transform: scale(0);
			background: #c84228;
			/* animation: circle-scale 3s 0.2s ease-out infinite; */
			animation: circle-scale2 3s 0.2s ease-out infinite;
			/* animation: circle-scale3 3s 0.2s ease-out infinite; */
			
		}
	</style>
</head>
<body>
    <div class="sss"></div>
</body>
</html>
原克技术
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Springboot整合Websocket实现ws和wss连接
u013071014的博客
01-30 3036
Springboot整合Websocket实现ws和wss连接
springboot整合https和wss协议
qq_16038853的博客
12-31 8788
一、首先得明白什么是wss协议: 可以看这篇文章:WSS、SSL 和 https 之间的关系 二、接下来就是配置wss协议了(注意:tomcat搭建https的低版本支持高版本不支持) (1)先拿到ssl证书:我这边是用的阿里云的免费证书具体获取方法如下: 先登录阿里云官网找到SSL证书选项，然后申请免费证书，然后下载tomcat证书，具体的申请流程我就不再说明了。 大家可以参考:阿里云申请免费 SSL证书 https 的图文教程_林中明月间丶-CSDN博客_阿里云申请免费ssl证书 ...
【CSS】深入浅出CSS渐变
最新发布
读心悦
06-23 491
CSS渐变是一种强大而灵活的功能，它允许你在网页设计中创建平滑的颜色过渡效果。通过掌握线性渐变和径向渐变的基本语法和用法，你可以创建出各种令人惊叹的视觉效果。同时，了解渐变的其他用法和高级用法，将使你能够更好地利用这一功能来增强你的网页设计。
SpringBoot 发送网络请求和文件
HHP666x的博客
08-24 452
【代码】SpringBoot 发送网络请求和文件。
【Java】SpringBoot使用websocket完成与页面实时通讯（下发通知）
weixin_45716968的博客
08-26 1430
之前接手的一个后台管理系统项目中，有下发通知功能，一直使用的是ajax循环请求获取最新通知列表，导致无效请求过多。决定优化下，使用websocket连接来实时通知页面更新通知列表。以下是实现方式及过程中遇到的问题。（websocket响应401、websocket本地连接正常，线上初始化失败）
Spring Boot 集成 WebSocket 实现服务端推送消息到客户端
李云龙的意大利面
08-22 1273
WebSocket 协议是基于 TCP 的一种新的网络协议，它实现了浏览器与服务器全双工（full-duplex）通信—允许服务器主动发送信息给客户端，这样就可以实现从客户端发送消息到服务器，而服务器又可以转发消息到客户端，这样就能够实现客户端之间的交互。对于 WebSocket 的开发，Spring 也提供了良好的支持，目前很多浏览器已经实现了 WebSocket 协议，但是依旧存在着很多浏览器没有实现该协议，为了兼容那些没有实现该协议的浏览器，往往还需要通过 STOMP 协议来完成这些兼容。
CSS3中颜色线性渐变实战
09-25
【CSS3颜色线性渐变】是网页设计中一种常用的技术，用于创建平滑过渡的颜色效果。线性渐变允许设计师以多种方式控制颜色变化，包括渐变的方向、颜色的起点和终点，甚至可以添加多个颜色阶段。在CSS3中，实现线性渐变...
CSS渐变统计柱形图
10-30
以前写柱形图时,用的是宽1px的图片底,给width赋一个百分比出可以实现.昨天晚上写一个小统计时想用CSS写一个渐变的!
纯css3渐变进度条动画特效
07-24
线性渐变沿着一个方向从一种颜色平滑过渡到另一种颜色，而径向渐变则从一个圆形或椭圆形的中心向外扩散颜色。在进度条动画中，通常会使用线性渐变来创建从左到右的颜色过渡，以模拟加载过程。 例如，创建一个水平...
CSS3 渐变（Gradients）之CSS3 线性渐变
09-27
CSS3 渐变是一种强大的视觉设计工具，允许开发者在元素的背景中创建平滑的颜色过渡效果，从而避免使用图像来实现类似效果。CSS3 渐变分为线性渐变和径向渐变两种类型。本篇文章将重点介绍CSS3线性渐变。 线性渐变...
css3实现背景动态渐变效果
11-21
这个角度值决定了颜色从哪一点开始向哪个方向平滑过渡。你可以尝试不同的角度值，以创造出不同的视觉效果。 接着，`background-size`属性用于控制渐变图案的大小。在示例中，`background-size: 400%;`意味着背景...
CSS3 由内到外(放射性)渐变
noonnightstorm的专栏
12-20 1万+
记得有个师兄在一个分享讲座中提到了由内到外渐变，为了实现这种效果，就用图片去做背景，假如加载得太多图片会使网页加载得很慢，所以有必要跟boss“吵架”！那时候我就觉得好像有点不科学，不过因为要复习所以没去探讨，今日无聊起来就自己写了个小demo，呵呵！有时候不一定要跟BOSS吵架，或许能提高自己的技术来适应boss的需求。        废话不说，先看代码:        html:
SpringBoot 配置基于 wss 和 STOMP 的 WebSocket
庄周de蝴蝶的博客
01-20 7174
前言 在上一篇文章中讲了如何在 SpringBoot 中配置 WebSocket 模拟实现群发消息的功能，本文则将进一步讲解如何在 SpringBoot 中配置基于 wss 协议和 STOMP 的 WebSocket，本文假设你对 STOMP 协议有一定的了解，否则建议你先了解一下 STOMP 协议，可以参考这篇文章，此外不同于上一篇的代码示例比较复杂，本文将用尽可能少的代码为你展示效果，同样本文的完整代码已上传到GitHub，下面就正式开始。 效果展示 同上一篇一样，在展示具体的代码配置之前，先展示一下最
利用css实现渐变色(通俗易懂)
热门推荐
DZQ1223的博客
07-07 3万+
类型语法线性渐变linear-gradient(方向, 颜色1, 颜色2, … ,颜色n)径向渐变radial-gradient(颜色1 覆盖区域大小, 颜色2 覆盖区域大小, …
springBoot集成webSocket并使用postMan进行测试
BASK2311的博客
12-15 1923
ws协议是全双工通信，客户端发起请求后，相当于搭建了一个通道，在不断开的情况下，在这期间，服务端可以把请求发给客户端，客户端也可以在这期间处理别的事情，不必等待服务端的响应。http协议是单工通信，客户端发起请求，服务端收到请求并处理，返回给客户端，然后客户端收到服务端的请求。简单来讲，webSocket是一种在http协议基础上的另一种新协议，叫ws协议。webSocket经常被用作聊天室，两个客户端，通过一个服务端分发请求，进行沟通。接下来，模拟服务端给客户端发送请求，建立一个http请求。
CSS3 渐变（Gradients）
BambooStrip的博客
08-29 1294
CSS 渐变
SpringBoot 转发请求至指定页面
pkyShare 的博客
11-01 2759
请求转发到指定页面，如浏览器输入http://127.0.0.1:8888/office/schdule/index/ 后弹出新页面，页面地址还是http://127.0.0.1:8888/office/schdule/index/
纯css实现背景颜色从中间向外渐变
07-22
你可以使用CSS的radial-gradient函数来实现背景颜色从中间向外渐变。以下是一个简单的示例： ```css .gradient-bg { background: radial-gradient(circle, #ff0000, #0000ff); } ``` 在这个示例中，我们创建了一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

原克技术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值