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