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