svg可爱小狗吐舌动画效果代码-html代码-BFW代码库

svg可爱小狗吐舌动画效果代码

代码语言：html

所属分类：动画

代码描述：svg可爱小狗吐舌动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
<style>
body,
html {
	height: 100%;
background: rgb(242,236,239);
background: radial-gradient(circle, rgba(242,236,239,1) 0%, rgba(235,183,70,1) 100%);
	);
}
body {
	display: flex;
	align-items:center;
	justify-content: center;
	flex-direction: column;
}

.cats-dogs {
	font-size: 10rem;
	margin: auto;
}

.head {
	fill: #d8cebf;
}
.mouth {
	fill: #d8cebf;
}

.eyes {
	stroke: black;
	stroke-width: 2;
}
.eyes ellipse {
	fill: url('#eyeGradient');
}

.ears, .spot {
	fill: #ae6a09;
}

.spot {
	mix-blend-mode: multiply;
	opacity: 0.9;
}

.tongue {
	fill: #e37789;
}

@keyframes pant {
	0% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(0, -5px);
	}
	100% {
		transform: translate(0, 0);
	}
}

.headGroup, .mouth, .earGroup, .tongue {
  animation-duration: 1s;
  animation-name: pant;
  animation-iteration-count: infinite;
}
.tongue {
	animation-delay: 200ms;
}
.earGroup {
	animation-delay: 50ms;
}
</style>


</head>

<body >
  <svg width="200" height="200" viewBox="-110 -110 220 220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<linearGradient id="eyeGradient" gradientTransform="rotate(90)" gradientUnits="objectBoundingBox">
			<stop offset="0%" stop-color="#fff" />
			<stop offset="10%" stop-color="#fff" />
			<stop offset="33%" stop-color="#000" />
			<stop offset="100%" stop-color="#000" />
		</linearGradient>
	</defs>
	<mask id="noseMask">
		<circle cx="0" cy="35" r="15" fill="white" />
	</mask>
	<filter id="headLighting">
		<feMorphology operator="erode" radius="10" in="SourceGraphic" result="eroded" />
		<feOffset in="eroded" dx="0" dy="-6" result="offset" />
		<feGaussianBlur in="offset" stdDeviation="8" result="blur" />
		<feColorMatrix in="blur" type="matrix" result="highlight" values="
								1.1 0 0 0 .3
                0 1.1 0 0 .3
                0 0 1.1 0 .3
                0 0 0 1 0" />
		<feComposite in2="SourceGraphic" in="highlight" mode="atop" />
	</filter>
	<filter id="earLighting".........完整代码请登录后点击上方下载按钮下载查看