svg 动态描边时间戳

痛定思痛。 2021-07-24 18:36 450阅读 0赞

思路:
    动态设置时间
    边框运动:文字不设置填充度,设置边框,将边框设置为虚线,动画中设置移动虚线
    实现多色:因为一个文字只能设置一种颜色,所以设置多个相同文字,每一个文字设置不同颜色,通过延迟各个动画开始的时间(相当于错位开始运动),达到边框多色显示
    
    stroke-dashoffset: xx; 完成边框运动;
    animation-delay:ns; 完成多个动画错位开始运动

代码示例:  
**css:**

*{ 
    	padding: 0;
    	margin: 0;
    }
    html{ 
    	height: 100%;
    }
    body{ 
    	background-color: black;
    	height: 100%;
    }
    svg{ 
    	width: 100%;
    	height: 100%;
    }
    .words{ 
    	/* 设置文字大小,使得可以去掉内部填充色 */
    	font-size: 22vh;
    	font-weight:bold;
    	/* 设置无填充色,使文字中心透明 */
    	fill: none;
    	stroke-width: 8px;
    	/* 设置字体边框为虚线 */
    	stroke-dasharray: 90,310;
    	
    	animation: drawing 8s linear infinite;
    	
    }
    
    .words-1{ 
    	stroke:deepskyblue;
    	/* 设置阴影实现光晕效果 */
    	text-shadow: 0 0 50px deepskyblue;
    	/* 在动画开始2s后的位置开始 */
    	animation-delay:-2s ;
    }
    
    .words-2{ 
    	stroke:lightgreen;
    	/* 设置阴影实现光晕效果 */
    	text-shadow: 0 0 50px lightgreen;
    	/* 在动画开始4s后的位置开始 */
    	animation-delay:-4s ;
    }
    
    .words-3{ 
    	stroke:red;
    	/* 设置阴影实现光晕效果 */
    	text-shadow: 0 0 50px red;
    	/* 在动画开始6s后的位置开始 */
    	animation-delay:-6s ;
    }
    
    .words-4{ 
    	stroke:purple;
    	/* 设置阴影实现光晕效果 */
    	text-shadow: 0 0 50px purple;
    	/* 在动画开始8s后的位置开始 */
    	animation-delay:-8s ;
    }
    
    @keyframes drawing{ 
    	from{ }
    	to{ 
    		/* 一组虚线和边框加起来400，表示每组整体运动400*/
    		stroke-dashoffset: -400; 
    	}
    }

**js:**

**html:**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="./css/clock.css"/>
    	</head>
    	<body>
    		<svg  xmlns="http://www.w3.org/2000/svg">
    			<text id='time' text-anchor='middle' x="50%" y="50%" class='words words-1'></text>
    			
    			<text id='time' text-anchor='middle' x="50%" y="50%" class='words words-2'></text>
    			
    			<text id='time' text-anchor='middle' x="50%" y="50%" class='words words-3'></text>
    			
    			<text id='time' text-anchor='middle' x="50%" y="50%" class='words words-4'></text>
    			
    		</svg>
    		<script src="./js/clock.js"></script>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200513162353741.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70