滚动鼠标自动绘画动画效果

代码语言:html

所属分类:动画

代码描述:滚动鼠标自动绘画动画效果

代码标签: 绘画 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
svg {
  fill: none;
  stroke: #1EFFBC;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  max-width: 300px;
  max-height: 255px;
}

.path {
  stroke-dashoffset: 17000;
  stroke-dasharray: 16999;
}

.viewport {
  height: 3000px;
}
</style>

</head>
<body>
<div class="viewport"></div>
<svg viewBox="0 -1 306 256" preserveAspectRatio="xMidYMid meet">
<path class="path" d="	M219,95c-22-7-42-12-67-13S61,82,42,93c-12,6-19,14-23,27
	c-4,15-8,65,11,84s33,29,69,38s108,18,140,0
	c11-6,42-25,39-88c-3-63-14-97-52-125S134-8,105,17
	s-72,123-71,170s25,52,69,59s70-2,80-20s23-41,23-79
	s-7-66-44-94S88,25,80,32s-7,26-6,61s4,49,17,67
	s54,65,117,55s73-29,80-52s25-75,2-.........完整代码请登录后点击上方下载按钮下载查看

网友评论0