网站首页 > 技术文章正文

svg+circle实现请求后台时的过度动画

nanyue 2024-10-30 02:58:02 技术文章 11 ℃

其实这段代码是从elementui的css中拿出来的发现很实用，可以借鉴下,在请求后台的时候，可以用幕布+绝对布局居中的转圈来提醒用户正在请求后台，防止用户多次点击。

附上代码:

<!DOCTYPE html>
<html>
	<head>
		<style>
		@keyframes loading-rotate {
 to {
 transform: rotate(1turn)
 }
 }
 @keyframes loading-dash {
 0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0
 }
 50% {
 stroke-dasharray: 90, 150;
 stroke-dashoffset: -40px
 }
 to {
 stroke-dasharray: 90, 150;
 stroke-dashoffset: -120px
 }
 }
		 .path {
 -webkit-animation: loading-dash 1.5s ease-in-out infinite;
			}
			.out{
				 -webkit-animation: loading-rotate 2s linear infinite;
			}
	
		</style>
	
	
	</head>
<body>
<svg class="out" style="width:50px;height:50px;" viewBox="25 25 50 50">
 <circle cx="50" cy="50" r="20" fill="none" stroke="black" fill="red" class="path"/>
</svg> 
 
</body>
</html>

SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示

viewBox参数

viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

代码稍微修正下，增加viewBox控制

<svg width="200" height="150" viewBox="0,0,400,300" style="border:1px solid #cd0000;">
 <rect width="200" height="150" fill="#cd0000" />
</svg>

rect同样与svg尺寸一直，但是显示出来的大小确等比缩小了一倍

试着简单的理解：强制把分辨率提升到400*300 ，那么原来的svg尺寸是200*150，相对于400*300就等比缩小一倍了

同样的，如果把viewBox缩小一倍，那么反之svg会增加一倍

<svg width="200" height="200" viewBox="0,0,100,100" style="border:1px solid #cd0000;">
 <rect width="200" height="200" fill="#cd0000" />
</svg>

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)

上一篇： CSS3过渡属性详解，如何让简单代码轻松实现页面动画?
下一篇：快过年了~我用CSS画了个灯笼，赶紧来白嫖

网站首页 > 技术文章 正文

svg+circle实现请求后台时的过度动画

猜你喜欢

网站首页 > 技术文章正文