svg+css实现打印机打印爱心动画效果代码-html代码-BFW代码库

svg+css实现打印机打印爱心动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现打印机打印爱心动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body{
	margin: 0 auto;
	background:#fdd;
}
a{
	position:absolute;
	bottom:20px;
	right:20px;
}
svg{
	height:200px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	border-radius:20px;
	border:20px solid #333;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
/* .f {
  stroke-dasharray: 2520;
  stroke-dashoffset: 2520;
  animation: dash 30s linear infinite;
}

@keyframes dash {
	100%{
		stroke-dashoffset: 0;
	}
} */
</style>




</head>

<body  >
  <svg viewbox="0 0 120 120">
	<defs>
    <clipPath id="fade-cut-out">
      <path d="M 95 65 L 60 100 L 25 65 A 25 25 90 0 1 60 29 A 25 25 90 0 1 95 65 Z" />
    </clipPath>
  </defs>
	<path class="f" d="M 57 100 H 63 V 98 H 55 V 96 H 67 V 94 H 51 V 92 H 71 V 90 H 47 V 88 H 75 V 86 H 43 V 84 H 79 V 82 H 39 V 80 H 83 V 78 H 35 V 76 H 87 V 74 H 31 V 72 H 91 V 70 H 27 V 68 H 95 V 66 H 23 V 64 H 99 V 62 H 20 V 60 H 101 V 58 H 18 V 56 H 103 V 54 H 17 V 52 H 103 V 50 H 17 V 48 H 103 V 46 H 17 V 44 H 103 V 42 H 17 V 40 H 103 V 38 H 18 V 36 H 101 V 34 H 20 V 32 H 99 V 30 H 23 V 28 H 95 V 26 H 27 V 24 H 89 V 22 H 31" fill="none" stroke="red" stroke-width="2" stroke-dasharray="2520" stroke-dashoffset="2520" clip-path="url(#fade-cut-out)">
		<animate attributeName="stroke-dashoffset" dur="30s" values="2520; 0" repeatCount="indefinite"/>
		</path>
	
	<path d="M-5 -11 H 5 L 1 -1 H -1Z" fill="silver"&g.........完整代码请登录后点击上方下载按钮下载查看