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>
	</def.........完整代码请登录后点击上方下载按钮下载查看