svg狗狗听音乐动画效果代码
代码语言：html
所属分类：动画
代码描述：svg狗狗听音乐动画效果代码
代码标签： 效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--note-pos-1: translate(530px, 150px) rotate(20deg);
--note-pos-2: translate(450px, 300px) rotate(-15deg);
--note-pos-3: translate(1050px, 230px) rotate(10deg);
--note-pos-4: translate(1020px, 400px) rotate(-15deg);
--note-pos-5: translate(975px, 150px) rotate(-20deg);
--note-pos-d-1: translate(530px, 150px) rotate(-20deg);
--note-pos-d-2: translate(450px, 300px) rotate(15deg);
--note-pos-d-3: translate(1050px, 230px) rotate(-10deg);
--note-pos-d-4: translate(1020px, 400px) rotate(15deg);
--note-pos-d-5: translate(975px, 150px) rotate(20deg);
--animation-time: 0.6s;
}
@keyframes left-leg-animation {
100% {
transform: translate(1066px, 714px) scaleX(1.03);
}
}
.shake-left-leg {
animation: left-leg-animation var(--animation-time) 0s ease-in-out infinite alternate;
}
@keyframes right-leg-animation {
100% {
transform: translate(856px, 714px) scaleX(1.03);
}
}
.shake-right-leg {
animation: right-leg-animation var(--animation-time) 0s ease-in-out infinite alternate;
}
* {
border: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#head {
transform-origin: center;
transform: rotate(9deg) translate(-23px, -40px);
}
#tongue {
transform: translate(1103px, 477px) rotate(-9deg);
}
#belly {
cursor: pointer;
}
#left-leg {
transform: translate(1066px, 714px);
}
#right-leg {
transform: translate(856px, 714px);
}
.info {
margin-bottom: 10px;
font-size: 25px;
font-family: 'Sacramento', cursive;
}
.shake-head {
animation: shake-head-animation var(--animation-time) 0s ease-in-out infinite alternate;
}
.toggle-tongue {
animation: toggle-tongue-animation 0.8s 0s ease-in-out infinite alternate;
}
.shake-main-belly {
animation: shake-main-belly-animation var(--animation-time) 0s ease-in-out infinite alternate;
}
.shake-main-belly-shadow {
animation: shake-main-belly-shadow-animation var(--animation-time) 0s ease-in-out infinite alternate;
}
.shake-sub-belly {
animation: shake-sub-belly-animation var(--animation-time) 0s ease-in-out infinite alternate;
}
.shake-sub-belly-shadow {
animation: shake-sub-belly-shadow-animation var(--animation-time) 0s ease-in-out infinite alternate;
}
#main-body {
transform: translate(976px, 446px);
}
@keyframes shake-main-belly-animation {
0% {
transform: translate(976px, 446px) skew(-1deg);
}
100% {
transform: translate(976px, 446px) skew(1deg);
}
}
#sub-body {
transform: translate(1037px, 507px);
}
@keyframes shake-sub-belly-animation {
0% {
transform: translate(1037px, 507px) skew(-1deg);
}
100% {
transform: translate(1037px, 507px) skew(1deg);
}
}
#main-body-shadow {
transform: translate(1116px, 420px);
}
@keyframes shake-main-belly-shadow-animation {
0% {
transform: translate(1116px, 420px) skew(-1deg);
}
100% {
transform: translate(1116px, 420px) skew(1deg);
}
}
#sub-body-shadow {
transform: translate(1174px, 489px);
}
@keyframes shake-sub-belly-shadow-animation {
0% {
transform: translate(1174px, 489px) skew(-1deg);
}
100% {
transform: translate(1174px, 489px) skew(1deg);
}
}
.closed-eyes {
display: none;
}
@keyframes toggle-tongue-animation {
0% {
transform: translate(1104px, 477px) rotate(-9deg) scale(0.9);
}
100% {
transform: translate(1104px, 478px) rotate(-9deg);
}
}
.notes {
transform: translate(775px, 450px);
transform-origin: 0px 0px;
fill: #e23939;
}
@keyframes notes-move-1 {
100% {
transform: var(--note-pos-1);
}
}
@keyframes notes-dance-1 {
0% {
transform: var(--note-pos-1);
}
100% {
transform: var(--note-pos-d-1);
}
}
.play.note-1 {
transform-origin: 25px 25px;
animation: notes-move-1 var(--animation-time) 1 forwards, notes-dance-1 var(--animation-time) var(--animation-time) ease-in-out infinite alternate;
}
@keyframes notes-move-2 {
100% {
transform: var(--note-pos-2);
}
}
@keyframes notes-dance-2 {
0% {
transform: var(--note-pos-2);
}
100% {
transform: var(--note-pos-d-2);
}
}
.play.note-2 {
transform-origin: 25px 25px;
animation: notes-move-2 var(--animation-time) 1 forwards, notes-dance-2 var(--animation-time) var(--animation-time) ease-in-out infinite alternate;
}
@keyframes notes-move-3 {
100% {
transform: var(--note-pos-3);
}
}
@keyframes notes-dance-3 {
0% {
transform: var(--note-pos-3);
}
100% {
transform: var(--note-pos-d-3);
}
}
.play.note-3 {
transform-origin: 25px 25px;
animation: notes-move-3 var(--animation-time) 1 forwards, notes-dance-3 var(--animation-time) var(--animation-time) ease-in-out infinite alternate;
}
@keyframes notes-move-4 {
100% {
transform: var(--note-pos-4);
}
}
@keyframes notes-dance-4 {
0% {
transform: var(--note-pos-4);
}
100% {
transform: var(--note-pos-d-4);
}
}
.play.note-4 {
transform-origin: 25px 25px;
animation: notes-move-4 var(--animation-time) 1 forwards, notes-dance-4 var(--animation-time) var(--animation-time) ease-in-out infinite alternate;
}
@keyframes notes-move-5 {
100% {
transform: var(--note-pos-5);
}
}
@keyframes notes-dance-5 {
0% {
transform: var(--note-pos-5);
}
100% {
transform: var(--note-pos-d-5);
}
}
.play.note-5 {
transform-origin: 25px 25px;
animation: notes-move-5 var(--animation-time) 1 forwards, notes-dance-5 var(--animation-time) var(--animation-time) ease-in-out infinite alternate;
}
@keyframes shake-head-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(18deg) translate(-60px, -85px);
}
}
</style>
</head>
<body translate="no" >
<div class="container">
<div class="info">
tap my belly
</div>
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" viewBox="0 0 1600 1200">
<defs>
<clipPath id="clip-husky">
<rect width="1600" height="1200"/>
</clipPath>
</defs>
<g id="husky" clip-path="url(#clip-husky)">
<rect width="1600" height="1200" fill="#f5e9aa"/>
<g id="design" transform="translate(0 53.427)">
<g class="music">
<path class="notes note-1" data-name="Icon ionic-ios-musical-note" d="M46.678,3.407c-.768.147-19.28,3.938-19.966,4.068a1.448,1.448,0,0,0-1.323,1.307h0v41.68A4.507,4.507,0,0,1,25,52.374a4.354,4.354,0,0,1-2.631,2.075c-.539.18-1.274.343-2.14.539C16.288,55.871,9.7,57.374,9.7,63.452a7.579,7.579,0,0,0,5.719,7.7,12.275,12.275,0,0,0,2.255.163c1.34,0,5.882-.539,8.365-2.157a8.8,8.8,0,0,0,3.938-7.81V23.814a1.3,1.3,0,0,1,1.046-1.274l15.162-3.1a2.624,2.624,0,0,0,2.091-2.565V4.649A1.292,1.292,0,0,0,46.678,3.407Z" />
<path class="notes note-2" data-name="Icon ionic-ios-musical-notes" d="M41.835,3.4C41.3,3.5,19,7.83,18.521,7.92a1,1,0,0,0-.916.9V35.973a3.119,3.119,0,0,1-.271,1.323,3.013,3.013,0,0,1-1.82,1.436c-.373.124-.882.237-1.481.373-2.725.611-7.282,1.651-7.282,5.857a5.176,5.176,0,0,0,4.715,5.371,5.512,5.512,0,0,0,.8.079h0a13.956,13.956,0,0,0,5.789-1.493,6.092,6.092,0,0,0,2.725-5.4V19.487a.9.9,0,0,1,.724-.882l17.187-3.471a.9.9,0,0,1,1.085.882v14.8a3.241,3.241,0,0,1-.283,1.515,3.005,3.005,0,0,1-1.832,1.436c-.373.124-1,.237-1.594.373-2.725.611-7.282,1.64-7.282,5.846a5.186,5.186,0,0,0,4.726,5.461,9.344,9.344,0,0,0,2.194-.1,12.963,12.963,0,0,0,4.127-1.47,5.96,5.96,0,0,0,3.109-5.45V4.268A.9.9,0,0,0,41.835,3.4Z" />
<path class="notes note-3" data-name="Icon ionic-md-musical-notes" d="M19.412,4.5V44.515a13.231,13.231,0,0,0-4.132-.637c-5.949,0-10.78,4.21-10.78,10.159S9.331,64.149,15.28,64.149A10.523,10.523,0,0,0,26.092,53.415V25.626H57.47V44.515a13.231,13.231,0,0,0-4.132-.637c-5.949,0-10.78,4.21-10.78,10.159s4.831,10.112,10.78,10.112A10.523,10.523,0,0,0,64.149,53.415V4.5ZM57.47,19.412H26.092V11.179H57.47Z" />
<path class="notes note-4" data-name="Icon ionic-md-musical-notes" d="M14.353,4.5V30.939a8.742,8.742,0,0,0-2.73-.421C7.692,30.518,4.5,33.3,4.5,37.23s3.192,6.681,7.123,6.681a6.953,6.953,0,0,0,7.143-7.092V18.458H39.5v12.48a8.742,8.742,0,0,0-2.73-.421c-3.931,0-7.123,2.781-7.123,6.712s3.192,6.681,7.123,6.681a6.953,6.953,0,0,0,7.143-7.092V4.5ZM39.5,14.353H18.766V8.913H39.5Z" />
<path class="notes note-5" data-name="Icon ionic-md-musical-note" d="M21.387,4.5V26.283a8.24,8.24,0,1,0,4.122,7.122V12.755h8.264V4.5Z" />
</g>
<g id="husky-2" data-name="husky" transform="translate(-309.369 53.898)">
<path id="shadow" d="M214.344,0C332.723,0,428.688,16.568,428.688,37.006S332.723,74.011,214.344,74.011,0,57.443,0,37.006,95.965,0,214.344,0Z" transform="translate(900.312 809)" fill="rgba(68,68,68,0.3)"/>
<g id="left-leg" transform="translate(1066.369 714)">
<path id="Path_5" data-name="Path 5" d="M122.053,112.737c67.408,0,122.053-35.088,122.053-78.371S189.461.973,122.053.973,0-8.918,0,34.366,54.645,112.737,122.053,112.737Z" transform="translate(242.287 141.645) rotate(-173)" fill="#67758f"/>
<ellipse id="Ellipse_3" data-name="Ellipse 3" cx="39.828" cy="50.106" rx="39.828" ry="50.106" transform="translate(267.968 147.551) rotate(-164)" fill="#ebf0f9"/>
<path id="Subtraction_5" data-name="Subtraction 5" d="M-1179.195-572.445a32.237,32.237,0,0,1-8.889-1.246,32.712,32.712,0,0,1-13.817-8.058,40.584,40.584,0,0,1-9.21-13.812,52.19,52.19,0,0,1-3.815-17.663,61.075,61.075,0,0,1,2.367-19.611c.14-.487.287-.979.438-1.463-6.455,24.769,3.772,48.554,23.286,54.15a30.138,30.138,0,0,0,8.307,1.165c17.776,0,34.455-14.869,40.559-36.157,7.05-24.588-2.5-48.839-21.73-55.21.431.105.847.216,1.235.328a32.709,32.709,0,0,1,13.817,8.058,40.583,40.583,0,0,1,9.209,13.812,52.192,52.192,0,0,1,3.815,17.663,61.074,61.074,0,0,1-2.367,19.611,61.677,61.677,0,0,1-6.93,15.669,54.539,54.539,0,0,1-10.225,12.138,44.737,44.737,0,0,1-12.449,7.843A35.61,35.61,0,0,1-1179.195-572.445Z" transform="translate(1417.767 710.265)" fill="rgba(103,117,143,0.2)"/>
</g>
<g id="right-leg" data-name="leg" transform="translate(856.369 714)">
<path id="Path_5-2" data-name="Path 5" d="M122.053,0c67.408,0,122.053,35.088,122.053,78.371s-54.645,33.392-122.053,33.392S0,121.654,0,78.371,54.645,0,122.053,0Z" transform="translate(39.564 29.749) rotate(-7)" fill="#67758f"/>
<ellipse id="Ellipse_3-2" data-name="Ellipse 3" cx="39.828" cy="50.106" rx="39.828" ry="50.106" transform="translate(0 51.221) rotate(-16)" fill="#ebf0f9"/>
<path id="Subtraction_5-2" data-name="Subtraction 5" d="M53.322,97.9v0c19.21-6.388,28.74-30.634,21.7-55.2C68.913,21.407,52.235,6.539,34.458,6.539A30.129,30.129,0,0,0,26.151,7.7C6.639,13.3-3.59,37.084,2.865,61.852c-.161-.514-.308-1.007-.438-1.463A61.069,61.069,0,0,1,.059,40.779,52.191,52.191,0,0,1,3.874,23.116,40.581,40.581,0,0,1,13.084,9.3,32.708,32.708,0,0,1,26.9,1.247,32.237,32.237,0,0,1,35.79,0a35.611,35.611,0,0,1,13.6,2.784,44.733,44.733,0,0,1,12.449,7.842A54.532,54.532,0,0,1,72.067,22.764,61.685,61.685,0,0,1,79,38.434a61.072,61.072,0,0,1,2.367,19.61,52.191,52.191,0,0,1-3.815,17.662A40.581,40.581,0,0,1,68.34,89.518a32.71,32.71,0,0,1-13.817,8.058C54.127,97.69,53.723,97.8,53.322,97.9Z" transform="translate(92.808 137.819) rotate(180)" fill="rgba(103,117,143,0.2)"/>
</g>
<g id="body">
<path id="main-body" data-name="body" d="M60.782,8.188H218.627S341.25,276.75,273,369c-35.08,47.416-85.976,25.521-141.238,27.887C82.112,395.634,33.17,413.834,0,369-68.25,276.75,60.782,8.188,60.782,8.188Z" fill="#67758f"/>
<path id="main-body-shadow" d="M64.653,424.727c-9.691,0-19.619-.747-30.129-1.537l-.938-.07C23.562,422.366,12.2,421.513.68,421.513c-3.09,0-6.117.063-9,.186-1.678-.042-3.421-.064-5.183-.064-10.14,0-20.494.712-29.629,1.341l-.509.035c-9.759.671-18.976,1.306-28.094,1.306A133.182,133.182,0,0,1-90.751,423.1a80.492,80.492,0,0,1-17.9-4.569c-12.412-4.824-22.693-12.91-31.431-24.72a83.147,83.147,0,0,1-8.765-15.03,108.274,108.274,0,0,1-6.074-17.322,147.625,147.625,0,0,1-3.625-19.284,202.347,202.347,0,0,1-1.416-20.917,312.511,312.511,0,0,1,2.826-45.419c1.933-14.9,4.881-31.053,8.762-48-6.987,33.684-10.125,63.294-9.324,88.008.941,29.028,7.342,51.754,19.025,67.545,18.987,25.664,36.944,30.82,59.763,30.82,5.774,0,11.81-.316,18.2-.651l1.2-.063c7.2-.377,14.295-.715,21.83-.715,2.02,0,4.025.025,5.959.074,2.272-.1,4.668-.147,7.121-.147,12.542,0,25.871,1.279,38.762,2.517l.033,0c12.885,1.236,26.2,2.514,38.744,2.514h.013c31.434,0,51.646-8.371,65.534-27.143,13.686-18.5,21.127-45.969,22.116-81.648.81-29.2-2.68-64.085-10.372-103.675C116.769,135.969,94.423,72.515,87.895,54.718c13.757,33.133,39.053,98.7,53.924,165.578,3.926,17.656,6.91,34.484,8.867,50.017a334.8,334.8,0,0,1,2.86,47.56,215.757,215.757,0,0,1-1.473,21.936,156.19,156.19,0,0,1-3.755,20.215,113.189,113.189,0,0,1-6.3,18.124,85.526,85.526,0,0,1-9.1,15.664c-8.822,11.924-19.089,20.1-31.387,24.987A79.145,79.145,0,0,1,83.7,423.47,129.389,129.389,0,0,1,64.653,424.727ZM86.023,50.238-79.5,33.414l.2-.414H78.547l.015.032c.512,1.128,3.278,7.26,7.461,17.2Z" fill="rgba(68,68,68,0.4)"/>
</g>
<g id="belly">
<path id="sub-body" data-name="belly" d="M8.89,24.827l124.346-8.92s70.451,159,28.2,216.264c-21.719,29.435-53.229,15.843-87.443,17.311C43.25,248.7,12.949,260-7.587,232.171-49.842,174.9,8.89,24.827,8.89,24.827Z" fill="#ebf0f9"/>
<path id="sub-body-shadow" data-name="Subtraction 4" d="M-17.956,268.455c-6,0-12.147-.463-18.654-.954l-.58-.044c-6.207-.468-13.241-1-20.37-1-1.914,0-3.79.039-5.574.116-1.035-.026-2.114-.04-3.208-.04-6.288,0-12.693.442-18.344.832l-.319.022c-6.041.417-11.746.81-17.388.81-9.306,0-16.569-1.141-22.856-3.591a43.394,43.394,0,0,1-19.46-15.346,62.971,62.971,0,0,1-6.751-11.7,84.787,84.787,0,0,1-4.637-13.506,138.1,138.1,0,0,1-3.857-31.021c1.788,15.772,6.279,28.629,13.351,38.213,15.1,20.464,36.216,22.129,60.241,22.129,1.543,0,3.1-.006,4.6-.011h.09c1.486-.005,3.023-.011,4.551-.011,3.431,0,6.065.028,8.539.091,1.473-.063,3.016-.1,4.588-.1,7.489,0,15.154.727,21.918,1.369l.418.04c7.2.684,14,1.329,20.636,1.329,18.091,0,29.595-5.13,38.466-17.152,8.79-11.913,12.9-29.6,12.209-52.568-.557-18.577-4.239-40.677-10.943-65.686-11.742-43.8-29.15-82.772-31.1-87.072l8.5-.61.008.018C-3.41,34.083.86,43.851,6.461,58.739c3.451,9.174,6.72,18.457,9.715,27.59,3.744,11.416,7.068,22.63,9.881,33.329C33.216,146.892,37.143,171,37.73,191.314a135.923,135.923,0,0,1-2.5,32.216A79.219,79.219,0,0,1,30.956,237.4a57.175,57.175,0,0,1-6.647,11.866c-5.462,7.4-11.818,12.476-19.432,15.511C-1.422,267.286-8.678,268.455-17.956,268.455Z" fill="rgba(103,117,1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0